You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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'returnwebpackConfig},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']}]}}}
The text was updated successfully, but these errors were encountered:
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'returnwebpackConfig},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']}]}}}
Throws:
Uncaught ReferenceError: module is not defined
I assume that the error originates in:
Config:
The text was updated successfully, but these errors were encountered: