I want to use my mock servers for my stories. The Storybook runs perfectly. Once I go through the steps of adding msw-storybook-addon and set up my preview.js from here and here (preview.js is different in these two resources, I tried both), and I run
start-storybook -p 9009 -s public
I get the error below:
ERROR in ./node_modules/strict-event-emitter/lib/Emitter.js 14:4
Module parse failed: Unexpected character '#' (14:4)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| */
| class Emitter {
> #events;
| #maxListeners;
| #hasWarnedAboutPotentialMemortyLeak;
@ ./node_modules/strict-event-emitter/lib/index.js 17:13-33
@ ./node_modules/msw/lib/index.js
@ ./src/mocks/browser.ts
@ ./.storybook/preview.js
@ ./.storybook/preview.js-generated-config-entry.js
@ multi ./node_modules/@storybook/core-client/dist/esm/globals/polyfills.js ./node_modules/@storybook/core-client/dist/esm/globals/globals.js ./node_modules/webpack-hot-middleware/client.js?reload=true&quiet=false&noInfo=undefined ./storybook-init-framework-entry.js ./node_modules/@storybook/react/dist/esm/client/docs/config-generated-config-entry.js ./node_modules/@storybook/react/dist/esm/client/preview/config-generated-config-entry.js ./node_modules/@storybook/addon-actions/preview.js-generated-config-entry.js ./node_modules/@storybook/addon-interactions/preview.js-generated-config-entry.js ./.storybook/preview.js-generated-config-entry.js ./generated-stories-entry.js
ERROR in ./node_modules/strict-event-emitter/lib/MemoryLeakError.js 5:11
Module parse failed: Unexpected token (5:11)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| exports.MemoryLeakError = void 0;
| class MemoryLeakError extends Error {
> emitter;
| type;
| count;
@ ./node_modules/strict-event-emitter/lib/index.js 18:13-41
@ ./node_modules/msw/lib/index.js
@ ./src/mocks/browser.ts
@ ./.storybook/preview.js
@ ./.storybook/preview.js-generated-config-entry.js
@ multi ./node_modules/@storybook/core-client/dist/esm/globals/polyfills.js ./node_modules/@storybook/core-client/dist/esm/globals/globals.js ./node_modules/webpack-hot-middleware/client.js?reload=true&quiet=false&noInfo=undefined ./storybook-init-framework-entry.js ./node_modules/@storybook/react/dist/esm/client/docs/config-generated-config-entry.js ./node_modules/@storybook/react/dist/esm/client/preview/config-generated-config-entry.js ./node_modules/@storybook/addon-actions/preview.js-generated-config-entry.js ./node_modules/@storybook/addon-interactions/preview.js-generated-config-entry.js ./.storybook/preview.js-generated-config-entry.js ./generated-stories-entry.js
Child HtmlWebpackCompiler:
Asset Size Chunks Chunk Names
__child-HtmlWebpackPlugin_0 6.25 KiB HtmlWebpackPlugin_0 HtmlWebpackPlugin_0
Entrypoint HtmlWebpackPlugin_0 = __child-HtmlWebpackPlugin_0
[./node_modules/html-webpack-plugin/lib/loader.js!./node_modules/@storybook/core-common/templates/index.ejs] 2.04 KiB {HtmlWebpackPlugin_0} [built]
ModuleParseError: Module parse failed: Unexpected character '#' (14:4)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| */
| class Emitter {
> #events;
| #maxListeners;
| #hasWarnedAboutPotentialMemortyLeak;
at handleParseError (/Users/akeikha/Documents/code/pharmacy-management-ui/node_modules/@storybook/builder-webpack4/node_modules/webpack/lib/NormalModule.js:469:19)
at /Users/akeikha/Documents/code/pharmacy-management-ui/node_modules/@storybook/builder-webpack4/node_modules/webpack/lib/NormalModule.js:503:5
at /Users/akeikha/Documents/code/pharmacy-management-ui/node_modules/@storybook/builder-webpack4/node_modules/webpack/lib/NormalModule.js:358:12
at /Users/akeikha/Documents/code/pharmacy-management-ui/node_modules/@storybook/builder-webpack4/node_modules/loader-runner/lib/LoaderRunner.js:373:3
at iterateNormalLoaders (/Users/akeikha/Documents/code/pharmacy-management-ui/node_modules/@storybook/builder-webpack4/node_modules/loader-runner/lib/LoaderRunner.js:214:10)
at Array.<anonymous> (/Users/akeikha/Documents/code/pharmacy-management-ui/node_modules/@storybook/builder-webpack4/node_modules/loader-runner/lib/LoaderRunner.js:205:4)
at Storage.finished (/Users/akeikha/Documents/code/pharmacy-management-ui/node_modules/@storybook/builder-webpack4/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:55:16)
at /Users/akeikha/Documents/code/pharmacy-management-ui/node_modules/@storybook/builder-webpack4/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:91:9
at /Users/akeikha/Documents/code/pharmacy-management-ui/node_modules/graceful-fs/graceful-fs.js:123:16
at FSReqCallback.readFileAfterClose [as oncomplete] (node:internal/fs/read_file_context:68:3)
ModuleParseError: Module parse failed: Unexpected token (5:11)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| exports.MemoryLeakError = void 0;
| class MemoryLeakError extends Error {
> emitter;
| type;
| count;
at handleParseError (/Users/akeikha/Documents/code/pharmacy-management-ui/node_modules/@storybook/builder-webpack4/node_modules/webpack/lib/NormalModule.js:469:19)
at /Users/akeikha/Documents/code/pharmacy-management-ui/node_modules/@storybook/builder-webpack4/node_modules/webpack/lib/NormalModule.js:503:5
at /Users/akeikha/Documents/code/pharmacy-management-ui/node_modules/@storybook/builder-webpack4/node_modules/webpack/lib/NormalModule.js:358:12
at /Users/akeikha/Documents/code/pharmacy-management-ui/node_modules/@storybook/builder-webpack4/node_modules/loader-runner/lib/LoaderRunner.js:373:3
at iterateNormalLoaders (/Users/akeikha/Documents/code/pharmacy-management-ui/node_modules/@storybook/builder-webpack4/node_modules/loader-runner/lib/LoaderRunner.js:214:10)
at Array.<anonymous> (/Users/akeikha/Documents/code/pharmacy-management-ui/node_modules/@storybook/builder-webpack4/node_modules/loader-runner/lib/LoaderRunner.js:205:4)
at Storage.finished (/Users/akeikha/Documents/code/pharmacy-management-ui/node_modules/@storybook/builder-webpack4/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:55:16)
at /Users/akeikha/Documents/code/pharmacy-management-ui/node_modules/@storybook/builder-webpack4/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:91:9
at /Users/akeikha/Documents/code/pharmacy-management-ui/node_modules/graceful-fs/graceful-fs.js:123:16
at FSReqCallback.readFileAfterClose [as oncomplete] (node:internal/fs/read_file_context:68:3)
WARN Broken build, fix the error above.
WARN You may need to refresh the browser.
info => Loading presets
error Command failed with exit code 1.
I realized from this error that the file Emmiter.js is using es6 syntax and for some reason, my webpack config doesn't have that loader. So I searched for how to override my webpack config without ejecting from here. I also looked for the loader that can interpret es6, and I found this. So I added the code below to my config-override.js
module.exports = function override(config, env) {
config.module.rules[1].oneOf = config.module.rules[1].oneOf
.map((one) => {
if (one.options && one.options.name && one.exclude) {
one.exclude = [/\.(mjs|jsx|ts|tsx)$/, /\.html$/, /\.json$/, /\.pdf$/];
}
return one;
})
.concat([
{
test: /\.js$/,
loader: "babel-loader",
options: { presets: ["es2015"] },
},
]);
return config;
};
And updated my scripts on package.json
yarn start gets stuck on Starting the development server...
I'm not even sure if this is the right solution. Any ideas what the problem is and what I should do here?
