We Keep Coding

Once msw-storybook-addon added, I get Unexpected charachter '#' in node_modules/../Emitter.js

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?

Adding these packages to my package.json:
"#storybook/builder-webpack5": "6.5.16",
"#storybook/manager-webpack5": "6.5.16",
"webpack" : "5"
And these lines to my main.ts inside module.export
core: {
builder: "#storybook/builder-webpack5"
},
docs: {
autodocs: true
}
resolved the issue.

Storybook keeps crashing with ModuleParseError: Module parse failed Error

I wanted to mock api calls in storybook by using the msw package in my storybook.
but when i try to launch it i get an error.
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 (\node_modules\#storybook\builder-webpack4\node_modules\webpack\lib\NormalModule.js:469:19)
at \node_modules\#storybook\builder-webpack4\node_modules\webpack\lib\NormalModule.js:503:5
at \node_modules\#storybook\builder-webpack4\node_modules\webpack\lib\NormalModule.js:358:12
at \node_modules\loader-runner\lib\LoaderRunner.js:373:3
at iterateNormalLoaders (\node_modules\loader-runner\lib\LoaderRunner.js:214:10)
at Array.<anonymous> (\node_modules\loader-runner\lib\LoaderRunner.js:205:4)
at Storage.finished (\node_modules\enhanced-resolve\lib\CachedInputFileSystem.js:55:16)
at \node_modules\enhanced-resolve\lib\CachedInputFileSystem.js:91:9
at \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 (\node_modules\#storybook\builder-webpack4\node_modules\webpack\lib\NormalModule.js:469:19)
at \node_modules\#storybook\builder-webpack4\node_modules\webpack\lib\NormalModule.js:503:5
at \node_modules\#storybook\builder-webpack4\node_modules\webpack\lib\NormalModule.js:358:12
at \node_modules\loader-runner\lib\LoaderRunner.js:373:3
at iterateNormalLoaders (\node_modules\loader-runner\lib\LoaderRunner.js:214:10)
at Array.<anonymous> (\node_modules\loader-runner\lib\LoaderRunner.js:205:4)
at Storage.finished (\node_modules\enhanced-resolve\lib\CachedInputFileSystem.js:55:16)
at \node_modules\enhanced-resolve\lib\CachedInputFileSystem.js:91:9
at \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.
heres my storybook config
// https://storybook.js.org/docs/react/builders/webpack#typescript-module-resolution
const TsconfigPathsPlugin = require("tsconfig-paths-webpack-plugin");
module.exports = {
stories: ["../src/**/*.stories.tsx", "../src/**/*.stories.mdx"],
addons: [
"#storybook/preset-create-react-app",
"#storybook/addon-actions",
"#storybook/addon-links",
"#storybook/addon-controls",
"#storybook/addon-knobs",
"#storybook/addon-docs",
],
webpackFinal: async (config) => {
config.resolve.plugins = [
...(config.resolve.plugins || []),
new TsconfigPathsPlugin({
extensions: config.resolve.extensions,
}),
];
return config;
},
};
im using storybook v6.5.13, i tried using webpack5 since i noticed a lot of the articles explaning how to use msw had it, so i added
core : {
builder : "webpack5"
}
and the webpack manager + builder, but it just hangs there and never finishes building, so i reverted back.

antd URL is not supported - unsure what warning means, or how to solve it

I'm trying to learn React, so am following a tutorial on Youtube. With my code as it is, the live server is bringing up the errors shown below. I'm not really sure where to start with it.. Am I lacking a dependency or something? I'm not sure
WARNING in ./node_modules/antd/dist/antd.css (./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[2]!./node_modules/source-map-loader/dist/cjs.js!./node_modules/antd/dist/antd.css)
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map: 'webpack://antd/./components/config-provider/style/index.less' URL is not supported
# ./node_modules/antd/dist/antd.css 8:6-231 22:17-24 26:7-21 58:25-39 59:36-47 59:50-64 61:4-74:5 63:6-73:7 64:54-65 64:68-82 70:42-53 70:56-70 72:21-28 83:0-201 83:0-201 84:22-29 84:33-47 84:50-64
# ./src/index.js 8:0-28
WARNING in ./node_modules/antd/dist/antd.css (./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[2]!./node_modules/source-map-loader/dist/cjs.js!./node_modules/antd/dist/antd.css)
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map: 'webpack://antd/./components/icon/style/index.less' URL is not supported
# ./node_modules/antd/dist/antd.css 8:6-231 22:17-24 26:7-21 58:25-39 59:36-47 59:50-64 61:4-74:5 63:6-73:7 64:54-65 64:68-82 70:42-53 70:56-70 72:21-28 83:0-201 83:0-201 84:22-29 84:33-47 84:50-64
# ./src/index.js 8:0-28
WARNING in ./node_modules/antd/dist/antd.css (./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[2]!./node_modules/source-map-loader/dist/cjs.js!./node_modules/antd/dist/antd.css)
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map: 'webpack://antd/./components/locale-provider/style/index.less' URL is not supported
# ./node_modules/antd/dist/antd.css 8:6-231 22:17-24 26:7-21 58:25-39 59:36-47 59:50-64 61:4-74:5 63:6-73:7 64:54-65 64:68-82 70:42-53 70:56-70 72:21-28 83:0-201 83:0-201 84:22-29 84:33-47 84:50-64
# ./src/index.js 8:0-28
WARNING in ./node_modules/antd/dist/antd.css (./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[2]!./node_modules/source-map-loader/dist/cjs.js!./node_modules/antd/dist/antd.css)
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map: 'webpack://antd/./components/time-picker/style/index.less' URL is not supported
# ./node_modules/antd/dist/antd.css 8:6-231 22:17-24 26:7-21 58:25-39 59:36-47 59:50-64 61:4-74:5 63:6-73:7 64:54-65 64:68-82 70:42-53 70:56-70 72:21-28 83:0-201 83:0-201 84:22-29 84:33-47 84:50-64
# ./src/index.js 8:0-28

You can try this
Replace import 'antd/dist/antd.css with import 'antd/dist/antd.min.css

Error running react native project using async storage on web platform

I am trying to run a React Native test app on a web platform.
I have installed #react-native-community/async-storage dependency.
It generates the following error:
ERROR in ./node_modules/#react-native-community/async-storage/lib/AsyncStorage.js 40:5
Module parse failed: Unexpected token (40:5)
You may need an appropriate loader to handle this file type.
| }
|
type ReadOnlyArrayString = $ReadOnlyArray;
|
| type MultiGetCallbackFunction = (
# ./node_modules/#react-native-community/async-storage/lib/index.js 5:0-42 7:15-27
# ./src/app.js
# ./index.web.js
# multi (webpack)-dev-server/client?http://0.0.0.0:8080 (webpack)/hot/dev-server.js ./index.web.js
ERROR in ./node_modules/#react-native-community/async-storage/lib/hooks.js 7:5
Module parse failed: Unexpected token (7:5)
You may need an appropriate loader to handle this file type.
| import AsyncStorage from './AsyncStorage';
|
type AsyncStorageHook = {
| getItem: (
| callback?: ?(error: ?Error, result: string | null) => void,
# ./node_modules/#react-native-community/async-storage/lib/index.js 8:0-40 8:0-40
# ./src/app.js
# ./index.web.js
# multi (webpack)-dev-server/client?http://0.0.0.0:8080 (webpack)/hot/dev-server.js ./index.web.js
Note: Code is running on Android, but it is not running on Web.

resolve: {
alias: {
'#react-native-community/async-storage': 'react-native-web'
}
}
create a resolve alias in your webpack.config.json.
This might help you

Using libxml-xsd in an electron app fails with bindings error

I would like to validate an XML file based upon its schema in an electron application.
I have an angular2 service which works before the inclusion of my libxml-xsd require statement. As soon as I add this to the top of my service file:
const xsd = require('libxml-xsd');
I run npm run build which executes this :
webpack --progress --profile --colors --display-error-details --display-cached
I see the following new warnings in the output:
WARNING in ./~/bindings/bindings.js
Critical dependencies:
76:22-40 the request of a dependency is an expression
76:43-53 the request of a dependency is an expression
# ./~/bindings/bindings.js 76:22-40 76:43-53
WARNING in ./~/bindings/README.md
Module parse failed: /Users/myusername/Documents/Personal/MyApp/node_modules/bindings/README.md Unexpected token (2:3)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected token (2:3)
at Parser.pp$4.raise (/Users/myusername/Documents/Personal/MyApp/node_modules/acorn/dist/acorn.js:2221:15)
at Parser.pp.unexpected (/Users/myusername/Documents/Personal/MyApp/node_modules/acorn/dist/acorn.js:603:10)
at Parser.pp$3.parseExprAtom (/Users/myusername/Documents/Personal/MyApp/node_modules/acorn/dist/acorn.js:1822:12)
at Parser.pp$3.parseExprSubscripts (/Users/myusername/Documents/Personal/MyApp/node_modules/acorn/dist/acorn.js:1715:21)
at Parser.pp$3.parseMaybeUnary (/Users/myusername/Documents/Personal/MyApp/node_modules/acorn/dist/acorn.js:1692:19)
at Parser.pp$3.parseExprOp (/Users/myusername/Documents/Personal/MyApp/node_modules/acorn/dist/acorn.js:1656:43)
at Parser.pp$3.parseExprOp (/Users/myusername/Documents/Personal/MyApp/node_modules/acorn/dist/acorn.js:1658:21)
at Parser.pp$3.parseExprOps (/Users/myusername/Documents/Personal/MyApp/node_modules/acorn/dist/acorn.js:1639:17)
at Parser.pp$3.parseMaybeConditional (/Users/myusername/Documents/Personal/MyApp/node_modules/acorn/dist/acorn.js:1620:21)
at Parser.pp$3.parseMaybeAssign (/Users/myusername/Documents/Personal/MyApp/node_modules/acorn/dist/acorn.js:1597:21)
at Parser.pp$3.parseExpression (/Users/myusername/Documents/Personal/MyApp/node_modules/acorn/dist/acorn.js:1573:21)
at Parser.pp$1.parseStatement (/Users/myusername/Documents/Personal/MyApp/node_modules/acorn/dist/acorn.js:727:47)
at Parser.pp$1.parseTopLevel (/Users/myusername/Documents/Personal/MyApp/node_modules/acorn/dist/acorn.js:638:25)
at Parser.parse (/Users/myusername/Documents/Personal/MyApp/node_modules/acorn/dist/acorn.js:516:17)
at Object.parse (/Users/myusername/Documents/Personal/MyApp/node_modules/acorn/dist/acorn.js:3098:39)
at Parser.parse (/Users/myusername/Documents/Personal/MyApp/node_modules/webpack/lib/Parser.js:902:15)
at DependenciesBlock.<anonymous> (/Users/myusername/Documents/Personal/MyApp/node_modules/webpack/lib/NormalModule.js:104:16)
at DependenciesBlock.onModuleBuild (/Users/myusername/Documents/Personal/MyApp/node_modules/webpack-core/lib/NormalModuleMixin.js:310:10)
at nextLoader (/Users/myusername/Documents/Personal/MyApp/node_modules/webpack-core/lib/NormalModuleMixin.js:275:25)
at /Users/myusername/Documents/Personal/MyApp/node_modules/webpack-core/lib/NormalModuleMixin.js:259:5
at Storage.finished (/Users/myusername/Documents/Personal/MyApp/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:38:16)
at /Users/myusername/Documents/Personal/MyApp/node_modules/graceful-fs/graceful-fs.js:78:16
at FSReqWrap.readFileAfterClose [as oncomplete] (fs.js:446:3)
# ./~/bindings ^\.\/.*$
I then run my application by executing : electron main.js which then throws this error in the browsers console:
Uncaught Error: Could not locate the bindings file. Tried:
→ /Users/myusername/Documents/Personal/MyApp/build/xmljs.node
→ /Users/myusername/Documents/Personal/MyApp/build/Debug/xmljs.node
→ /Users/myusername/Documents/Personal/MyApp/build/Release/xmljs.node
→ /Users/myusername/Documents/Personal/MyApp/out/Debug/xmljs.node
→ /Users/myusername/Documents/Personal/MyApp/Debug/xmljs.node
→ /Users/myusername/Documents/Personal/MyApp/out/Release/xmljs.node
→ /Users/myusername/Documents/Personal/MyApp/Release/xmljs.node
→ /Users/myusername/Documents/Personal/MyApp/build/default/xmljs.node
→ /Users/myusername/Documents/Personal/MyApp/compiled/6.5.0/darwin/x64/xmljs.node
Could somebody please help me get libxml-xsd running under my application configuration? Does this have anything to do with webpack? If so - how do I change its config to bring in the appropriate files?

You can resolve issue with bindings.js using this code from GitHub issue.
webpack
module.exports = {
plugins: [
new webpack.IgnorePlugin(/^mock-firmata$/),
new webpack.ContextReplacementPlugin(/bindings$/, /^$/)
],
externals: ["bindings"]
}
The problem is that libxml-xsd package is for server side. I think you will get another problem after this one. It has dependencies like this require('fs'); which can't be used in front-end.

I think you need to use either the asar-unpack or asar-unpack-dir parameters on the folders containing native modules.
Looks like it only takes one string, see the API docs for asar-unpack-dir for glob examples.
(The one string limitation appears to be an asar module limitation, if you think it should work as an array, you'd need to file an issue in their repository.)