Module parse failed: Unexpected character '@' (1:0) with Storybook 6.1.11, Webpack 5.11.0, React 17.0.1

丶灬走出姿态 提交于 2021-01-06 03:40:58

问题


Trying to setup a react-app with all latest versions.

Github Repo Link

Trying to run storybook with sass file imported will result in below error. Trying to run without importing the styles, storybook works.

The same code works correctly when its run as npm start run with no warnings and errors.

I have configured css modules using @dr.pogodin/babel-plugin-react-css-modules with sass, webpack 5, react 17 and with latest packages.

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 for css (partial code inlcuded)

{
        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 file

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,
      }
    };
  },
};


回答1:


I don't know what you have done with your configuration but you would define the config things inside .storybook/main.js. And for global style css is supposed to be included in preview.js file.

In short, you have to do the few things:

  • Remove your .storybook/config.js and add .storybook/main.js with following content:
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,
      }
    };
  },
};
  • Create the .storybook/preview.js to import your global style:
import "../src/assets/stylesheets/app.scss";


来源:https://stackoverflow.com/questions/65464491/module-parse-failed-unexpected-character-10-with-storybook-6-1-11-webpa

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!