模块解析失败:使用 Storybook 6.1.11、Webpack 5.11.0、React 17.0.1 出现意外字符 '@' (1:0)

问题描述

尝试使用所有最新版本设置 react-app.

解决方案

我不知道您对配置做了什么，但您会在 .storybook/main.js 中定义配置内容.对于全局样式 css 应该包含在 preview.js 文件中.

简而言之，您必须做以下几件事:

• 删除您的 .storybook/config.js 并添加具有以下内容的 .storybook/main.js:

const custom = require('../webpack.config.js');模块.出口 = {故事:['../src/**/stories.js',//名称应该有一个组件名称的前缀，如`button.stories.js`，而不是像你所做的那样`stories.js`.重命名时，您可以删除此模式"../src/**/*.stories.@(js|jsx|ts|tsx)"],webpackFinal:(配置)=>{返回 {...配置，模块: {规则:custom.module.rules，},解决: {...配置.解决，...自定义.解决，}};},};

• 创建 .storybook/preview.js 以导入您的全局样式:

import "../src/assets/stylesheets/app.scss";

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

解决方案

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";

这篇关于模块解析失败:使用 Storybook 6.1.11、Webpack 5.11.0、React 17.0.1 出现意外字符 '@' (1:0)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！