将样式指南添加到 next.js (react) 会返回错误：ENOENT：没有这样的文件或目录，答案

【问题标题】：Adding style guide to next.js (react) returns Error: ENOENT: no such file or directory,将样式指南添加到 next.js (react) 会返回错误：ENOENT：没有这样的文件或目录，
【发布时间】：2021-04-06 05:04:46
【问题描述】：

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

我使用 npx create-next-app 创建了我的项目

安装后，添加一些配置

[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/components 下，有些包含 component.module.css 文件
我的上下文组件在 src/context 下
我所有的全局scss都可以在“styles/”下找到

任何关于为什么会发生这种情况以及如何解决它的指导将不胜感激，我对配置文件如何工作的了解有限，并且对任何相关文章的任何参考都将不胜感激。

感谢您的帮助。好好休息一天，保持安全。

【问题讨论】：

为了测试 porpuses，我尝试将 "loader: 'sass-loader'" 更改为 "use: { loader: 'sass-loader' }" 没有任何不同的结果

标签： javascript node.js reactjs next.js

【解决方案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',
            }]
        },
      ],
    },
  },
};

【讨论】：