Adding style guide to next.js (react) returns Error: ENOENT: no such file or directory,

I just started learning next.js and I wanted to add some documentation using https://react-styleguidist.js.org/

I created my project using npx create-next-app

After installing it, and adding some configuration

[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'
            }
        ]
    }
    }
};

I’m getting the following error when trying to run it using the following command: npx styleguidist server

./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_modulesally.mdamd'
    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

(Note that I have replaced the project path for “${projectPath}”)

And I’m at a loss on how to fix it.

For further details, you can find my package.json here https://pastebin.com/H7RfxxKZ.

My folder structure shown in below image:

• All my components are under src/components, some include component.module.css files
• My context components are under src/context
• All my global scss can be found under “styles/”

Any guidance on why this can happen and how to solve it would be appreciated, my knowledge on how the configuration files work is limited, and any reference to any related article would be appreciated.

Thanks for your help. have a nice rest of the day and stay safe.

Answer

After doing some further testing, I found out that my main problem was the “components: ‘./**/*.js'” and the fact that I was missing some alias for my components! I will post here what worked for me.

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