Ошибка синтаксического анализа модуля: неожиданный символ '@' (1: 0) в Storybook 6.1.11, Webpack 5.11.0, React 17.0.1

Пытаюсь установить приложение для реакции со всеми последними версиями.

Ссылка на репозиторий Github

Попытка запустить сборник рассказов с импортированным файлом sass приведет к ошибке ниже. Пробуем запустить без импорта стилей, сборник рассказов работает.

Тот же код работает правильно, когда он запускается как npm start run без предупреждений и ошибок.

Я настроил модули css, используя @ dr.pogodin / babel-plugin-react-css-modules с sass, webpack 5, react 17 и с последними пакетами.

ERROR in ./src/assets/stylesheets/app.scss 1:0
Module parse failed: Unexpected character '@' (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> @import "./base.scss";
| @import "./generics/font.scss";
| @import "./generics/spacing.scss";
 @ ./stories/index.js 5:0-44 8:2-10:4 8:58-10:3 9:4-49
 @ ./src/components/atoms/button/stories.js

babel.config.js

module.exports = {
  presets: ["@babel/preset-env", "@babel/preset-react"],
  plugins: [
    [
      "@dr.pogodin/babel-plugin-react-css-modules",
      {
        webpackHotModuleReloading: true,
        autoResolveMultipleImports: true,
        filetypes: {
          ".scss": {
            syntax: "postcss-scss",
          },
        },
        generateScopedName: "[name]__[local]___[hash:base64:5]",
      },
    ],
  ],
};

webpack.config.js для css (частичный код включен)

{
        test: /\.(css|sass|scss)$/,
        exclude: /node_modules/,
        use: [
          isDev ? "style-loader" : MiniCssExtractPlugin.loader,
          {
            loader: "css-loader",
            options: {
              modules: {
                auto: (resourcePath) =>
                  resourcePath.indexOf("assets/stylesheets") === -1,
                localIdentName:"[name]__[local]___[hash:base64:5]",
              },
              sourceMap: true,
            },
          },
          "sass-loader",
        ],
      }

Файл storybook / webpack.config.js

const custom = require('../webpack.config.js');

module.exports = {
  // stories: ['../src/components/**/*.stories.js'],
  webpackFinal: (config) => {
    return {
      ...config,
      module: {
        rules: custom.module.rules,
      },
      resolve: {
        ...config.resolve,
        ...custom.resolve,
      }
    };
  },
};

введите описание изображения здесь


webpack reactjs webpack-5 sass storybook
person Sharath    schedule 27.12.2020    source источник

Ответы (2)


arrow_upward
3
arrow_downward

Я не знаю, что вы сделали со своей конфигурацией, но вы должны определить конфигурацию внутри .storybook/main.js. А для глобального стиля css должен быть включен в preview.js файл.

Короче говоря, вам нужно сделать несколько вещей:

  • Удалите свой .storybook/config.js и добавьте .storybook/main.js со следующим содержанием:
const custom = require('../webpack.config.js');

module.exports = {
  stories: [
    '../src/**/stories.js', // The name should have a prefix for component name like `button.stories.js` instead of `stories.js` like you've done. As you renamed, you can remove this pattern
    "../src/**/*.stories.@(js|jsx|ts|tsx)"
  ],
  webpackFinal: (config) => {
    return {
      ...config,
      module: {
        rules: custom.module.rules,
      },
      resolve: {
        ...config.resolve,
        ...custom.resolve,
      }
    };
  },
};
  • Создайте .storybook/preview.js для импорта вашего глобального стиля:
import "../src/assets/stylesheets/app.scss";
person tmhao2005    schedule 27.12.2020
comment
спасибо, это сработало .. Я добавил сборник рассказов, используя эту команду npx sb init, упомянутую в этой ссылке сборник рассказов. js.org/docs/react/get-started/install, чтобы с его помощью были созданы указанные выше файлы .. в чем причина изменения этих файлов - person Sharath; 27.12.2020
comment
Вот официальный документ, рассказывающий о пользовательском webpack storybook.js. org / docs / react / configure /. Ваша ошибка заключалась в том, что ваша конфигурация не повлияла :) затем я снова повлиял - person tmhao2005; 27.12.2020

arrow_upward
1
arrow_downward

Некоторые люди сталкивались с проблемами при использовании Storybook 6.2. 0 с помощью Webpack 5. Вместо использования предустановки я рекомендую настроить конфигурацию Webpack в main.js, как упоминалось выше. Вот соответствующая часть рабочей конфигурации Storybook Webpack для Sass:

module: {
        ...config.module,
        rules: [
          ...config.module.rules,
          {
            test: /\.(scss)$/,
            use: [
              {
                loader: 'style-loader',
              },
              {
                loader: 'css-loader',
              },
              {
                loader: 'postcss-loader',
                options: {
                  postcssOptions: {
                    plugins: function () {
                      return [require('precss'), require('autoprefixer')];
                    },
                  },
                },
              },
              {
                loader: require.resolve('sass-loader'),
                options: {
                  implementation: require('sass'),
                },
              },
            ],
          },
        ],
      },

Я написал больше о том, как запустить Storybook с помощью Webpack 5 (и изменить конфигурацию Storybook Webpack) здесь.

person John Camden    schedule 26.03.2021