Uncaught ReferenceError: module is not defined

[catamphetamine]

Throws: Uncaught ReferenceError: module is not defined

I assume that the error originates in:

module.hot&&module.hot.accept([]),module.exports={doclets:{},displayName:"PhoneNumberInput",description:"",...

Config:

module.exports = {
  components: "source/PhoneInputWithCountry.js",
  styleguideDir: "website/docs",
  usageMode: "expand",
  sortProps: props => props,
  dangerouslyUpdateWebpackConfig(webpackConfig, env) {
    webpackConfig.output.filename = 'build/bundle.js'
    webpackConfig.output.chunkFilename = 'build/[name].js'
    return webpackConfig
  },
  webpackConfig: {
    module: {
      rules: [
        // Babel loader will use your project’s babel.config.js
        {
          test: /\.jsx?$/,
          exclude: /node_modules/,
          loader: 'babel-loader'
        },
        // Other loaders that are needed for your components
        {
          test: /\.css$/,
          use: ['style-loader', 'css-loader']
        }
      ]
    }
  }
}

[catamphetamine]

A thing to note is that the project uses type: "module" feature.

First, I attempted to rename styleguide.config.js to styleguide.config.cjs, otherwise it complained about module.exports not being a valid ES6 import syntax.

That didn't work (see the error above: module is undefined).

I found another workaround:

• In the project, I've created a folder called react-styleguidist.
• Moved styleguide.config.js file there, with some edits (shown below).
• In that folder, I also created a simple package.json file without type: "module" setting. This means that any require()s inside that folder will resolve as ES5.
• In that folder, I also created a package subfolder where I copied:
  • .babelrc
  • src folder with the components

That way, it worked.

styleguide.config.js:

module.exports = {
	components: "project/source/PhoneInputWithCountry.js",
	styleguideDir: "../website/docs",
	usageMode: "expand",
	sortProps: props => props,
	dangerouslyUpdateWebpackConfig(webpackConfig, env) {
		webpackConfig.output.filename = 'build/bundle.js'
		webpackConfig.output.chunkFilename = 'build/[name].js'
		return webpackConfig
	},
	webpackConfig: {
		module: {
			rules: [
				// Babel loader will use your project’s babel.config.js
				{
					test: /\.jsx?$/,
					exclude: /node_modules/,
					loader: 'babel-loader',
					options: {
						babelrcRoots: ['..']
					}
				},
				// Other loaders that are needed for your components
				{
					test: /\.css$/,
					use: ['style-loader', 'css-loader']
				}
			]
		}
	}
}

package.json:

{
  "private": true,
  "name": "react-phone-number-input/react-styleguidist",
  "main": "styleguide.config.js"
}

https://gitlab.com/catamphetamine/react-phone-number-input/-/commit/309cf471f510995c5d94b2d7a8d169fdce30a9b0