Support
Quality
Security
License
Reuse
kandi's functional review helps you automatically verify the functionalities of the libraries and avoid rework.
Currently covering the most popular Java, JavaScript and Python libraries. See a Sample Here
Get all kandi verified functions for this library.
Storybook is a frontend workshop for building UI components and pages in isolation. Made for UI development, testing, and documentation.
See all related Code Snippets
QUESTION
Storybook couldn't resolve fs
Asked 2022-Mar-22 at 08:55I am setting up a Storybook with RemixJS. I got the following error when trying to import a component
ERROR in ./node_modules/@remix-run/node/errors.js
Module not found: Error: Can't resolve 'fs' in '/Users/ht/Desktop/a/node_modules/@remix-run/node'
ERROR in ./node_modules/@remix-run/node/node_modules/source-map/lib/read-wasm.js
Module not found: Error: Can't resolve 'fs' in '/Users/ht/Desktop/a/node_modules/@remix-run/node/node_modules/source-map/lib'
ERROR in ./node_modules/@remix-run/node/sessions/fileStorage.js
Module not found: Error: Can't resolve 'fs' in '/Users/ht/Desktop/a/node_modules/@remix-run/node/sessions'
ERROR in ./node_modules/busboy/lib/main.js
Module not found: Error: Can't resolve 'fs' in '/Users/ht/Desktop/a/node_modules/busboy/lib'
ERROR in ./node_modules/@remix-run/node/errors.js
Module not found: Error: Can't resolve 'fs/promises' in '/Users/ht/Desktop/a/node_modules/@remix-run/node'
ERROR in ./node_modules/@remix-run/node/upload/fileUploadHandler.js 124:15
Module parse failed: Unexpected token (124:15)
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 NodeOnDiskFile {
> lastModified = 0;
| webkitRelativePath = "";
|
ERROR in ./node_modules/@remix-run/node/formData.js 53:73
Module parse failed: Unexpected token (53:73)
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
| get(name) {
| let arr = this._fields[name];
> return (arr === null || arr === void 0 ? void 0 : arr.slice(-1)[0]) ?? null;
| }
|
I got the suggestion that I should add this to the web pack
{
resolve: {
fallback: {
fs: false
}
}
}
How could I do it with a storybook? I use storybook version 6.4.19
I added this to .storybook/main.js but without success
webpackFinal: async (config, { configType }) => {
config.node = {
...config.node,
fs: 'empty'
};
return config;
},
Thank you
ANSWER
Answered 2022-Mar-11 at 12:09Depending on the webpack version you are using to build your Storybook you need to add fs
, stream
and other Node core module used by Remix packages.
As a rule of thumb you can use the list from Webpack documentation on resolve.fallback
here.
If you are using Stroybook with Webpack 4 the config should look like :
module.exports = {
// Storybook config
webpackFinal: async (config, { configType }) => {
config.node = {
...config.node,
fs: "empty",
assert: "empty",
buffer: "empty",
console: "empty",
constants: "empty",
crypto: "empty",
domain: "empty",
events: "empty",
http: "empty",
https: "empty",
os: "empty",
path: "empty",
punycode: "empty",
process: "empty",
querystring: "empty",
stream: "empty",
string_decoder: "empty",
sys: "empty",
timers: "empty",
tty: "empty",
url: "empty",
util: "empty",
vm: "empty",
zlib: "empty",
};
return config;
},
};
Or with Webpack 5
module.exports = {
// Storybook config
webpackFinal: async (config, { configType }) => {
config.resolve.fallback = {
fs: false,
assert: false,
buffer: false,
console: false,
constants: false,
crypto: false,
domain: false,
events: false,
http: false,
https: false,
os: false,
path: false,
punycode: false,
process: false,
querystring: false,
stream: false,
string_decoder: false,
sys: false,
timers: false,
tty: false,
url: false,
util: false,
vm: false,
zlib: false,
};
return config;
},
};
Community Discussions, Code Snippets contain sources that include Stack Exchange Network
No vulnerabilities reported
Save this library and start creating your kit
See Similar Libraries in
Save this library and start creating your kit
Open Weaver – Develop Applications Faster with Open Source