向next.js添加样式指南(react)返回错误: ENOENT:没有这样的文件或目录，

Question

我刚开始学习next.js，我想使用https://react-styleguidist.js.org/添加一些文档

我使用npx创建下一个应用程序创建了我的项目。

在安装之后，并添加一些配置

[styleguide.config.js]
const path = require('path')

module.exports = {
    components: './**/*.js',
    webpackConfig: {
        entry: 'next/lib/app.js',
    module: {
        rules: [
            {
            test: /\.js$/,
            exclude: /node_modules/,
            use: {
                loader: "babel-loader",
                options: {
                    presets: ['@babel/react' ],
                    plugins: ['@babel/plugin-proposal-class-properties']
                }
            }

            },
            {
                test: /\.scss$/,
                loader: 'sass-loader'
            }
        ]
    }
    }
};

在使用以下命令运行它时，我会得到以下错误: npx styleguidist服务器

./node_modules/react-styleguidist/lib/client/index.js (./node_modules/react-styleguidist/lib/loaders/styleguide-loader.js!./node_modules/react-styleguidist/lib/client/index.js)
Error: ENOENT: no such file or directory, scandir '${projectPath}\node_modules\ally.md\amd'
    at Array.map (<anonymous>)
    at Array.map (<anonymous>)
 @ ./node_modules/react-styleguidist/lib/client/index.js 36:19-71 46:2-49:4 46:65-49:3
 @ multi ./node_modules/react-styleguidist/lib/client/index ./node_modules/react-dev-utils/webpackHotDevClient.js

(请注意，我已将项目路径替换为"${projectPath}")

我不知道该怎么解决它。

有关更多细节，您可以在这里找到我的package.json https://pastebin.com/H7RfxxKZ。

我的文件夹结构如下图所示：

​

我的所有组件都在src/下，有些组件包括component.module.css文件

• ，我的上下文组件在
• 下，全局scss在“
• /”

下面

任何关于为什么会发生这种情况以及如何解决这个问题的指导都将不胜感激，我对配置文件工作方式的了解是有限的，对任何相关文章的任何引用都将不胜感激。

谢谢你的帮助。祝你一天休息愉快，保持安全。

Answer 1

在做了一些进一步的测试之后，我发现我的主要问题是“组件：'./**/*.js'”，以及我丢失了组件的别名！我会在这里贴出对我有用的东西。

 module.exports = {
    
  components: "./src/**/*.js",
  skipComponentsWithoutExample: true, //You don't need this one
  moduleAliases: { //Map it to your folder structure 
    'components': path.resolve(__dirname, 'src','components'),
    '_db': path.resolve(__dirname, 'src','_db'),
    'context': path.resolve(__dirname, 'src','context'),
    'styles': path.resolve(__dirname, 'src','styles'),
  },
  webpackConfig: {
    module: {
      rules: [
        {
          test: /\.js?$/,
          exclude: /node_modules/,
          loader: "babel-loader",
        },
        {
            test: /\.scss$/,
            loaders: [
                'style-loader',
                'css-loader',
                'sass-loader'
            ]
        },
        { //This code prevents errors with font-awesome
            test: /\.(ttf|eot|svg|gif|woff|woff2)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
            use: [{
                loader: 'file-loader',
            }]
        },
      ],
    },
  },
};