I 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
Depending 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;
},
};
Upgrade storybook to use webpack 5
https://gist.github.com/shilman/8856ea1786dcd247139b47b270912324
Update .storybook/main.js
module.exports = {
stories: ["../.slicemachine/assets/**/*.stories.#(js|jsx|ts|tsx)"],
addons: [
"#storybook/addon-links",
"#storybook/addon-essentials",
"#storybook/addon-interactions",
],
framework: "#storybook/react",
core: {
builder: "webpack5",
},
webpackFinal: async (config, { configType }) => {
config.resolve = {
...config.resolve,
fallback: {
...(config.resolve || {}).fallback,
fs: false,
stream: false,
os: false,
},
}
// Return the altered config
return config
},
}
Related
Error
Module not found
Can't resolve 'clarifai-nodejs-grpc' node module grps-js and proto-loader
I tried config-overrides.js with react-app-rewired:
module.exports = function override(config, env) {
console.log("override");
let loaders = config.resolve;
loaders.fallback = {
fs: false,
tls: false,
net: false,
http: require.resolve("stream-http"),
https: false,
zlib: require.resolve("browserify-zlib"),
path: require.resolve("path-browserify"),
stream: require.resolve("stream-browserify"),
url: false,
util: false,
http2: false,
os: false,
dns: false,
assert: false,
buffer: false,
};
config.ignoreWarnings = \\\[/Failed to parse source map/\\\];
return config;
};
What can be wrong with this? Why clarifai-nodejs-grpc is invisible?
If using ReactJS with the Clarifai API, it's recommended you consume it via the JavaScript HTTP channel. You can check the JavaScript samples on their docs platform. The Node gRPC client is recommended for Node.js projects.
I have this big issue with starting Next.js, the same project on 2 different OS, it has completely different startup times, 1s on MacOSX vs 10s on Windows 11.
Has anyone else had the same problem? Is there any way to fix it?
enter image description here
Here's my next.js conf:
const { resolve } = require('path')
const withBundleAnalyzer = require('#next/bundle-analyzer')({
enabled: process.env.ANALYZE === 'true',
openAnalyzer: true,
})
module.exports = withBundleAnalyzer(
{
i18n: {
locales: ['en', 'it'],
defaultLocale: 'en',
localeDetection: true,
},
compiler: {
removeConsole: process.env.NODE_ENV !== 'development',
},
swcMinify: true,
eslint: {
ignoreDuringBuilds: true,
},
webpack: (config) => {
config.plugins = config.plugins || []
config.optimization.providedExports = true
config.resolve.alias = {
...config.resolve.alias,
'#': resolve(__dirname, './src/'),
}
config.resolve.fallback = { ...config.resolve.fallback, fs: false }
config.module.rules.push({
test: /\.(glsl|vs|fs|vert|frag)$/,
use: ['raw-loader', 'glslify-loader'],
})
return config
},
},
)
I got this error in my react project.
Invalid configuration object. Webpack has been initialized using a configuration object that does not match the API schema.
- configuration.resolve has an unknown property 'fallback'. These properties are valid:
object { alias?, aliasFields?, cachePredicate?, cacheWithContext?, concord?, descriptionFiles?, enforceExtension?, enforceModuleExtension?, extensions?, fileSystem?, mainFields?, mainFiles?, moduleExtensions?, modules?, plugins?, resolver?, symlinks?, unsafeCache?, useSyncFileSystemCalls? }
-> Options for the resolver
I have try to build react pdf for my project. I have used craco for resolving errors caused by re
var webpack = require("webpack");
module.exports = {
webpack: {
configure: {
resolve: {
fallback: {
process: require.resolve("process/browser"),
zlib: require.resolve("browserify-zlib"),
stream: require.resolve("stream-browserify"),
util: require.resolve("util"),
buffer: require.resolve("buffer"),
asset: require.resolve("assert"),
},
},
plugins: [
new webpack.ProvidePlugin({
Buffer: ["buffer", "Buffer"],
process: "process/browser",
}),
],
},
},
};
act pdf. Here is my code.
I'm trying to get react-pdf to work in gatsby and something is wonky with my webpack config. Tried different ways from different posts but nothing seems to do the trick.
if I remove 'process/browser', the site builds fine but the PDF doesn't render and I get the error that process is not defined. If I leave it in, the site won't build at all.
/gatsby-node.js
const webpack = require("webpack");
exports.onCreateWebpackConfig = ({ stage, loaders, actions, plugins }) => {
if (stage === "build-html" || stage === "develop-html") {
actions.setWebpackConfig({
module: {
rules: [
{
test: /react-pdf/, // check /pdfjs-dist/ too
use: loaders.null()
},
{
test: /pdfjs-dist/, // check /pdfjs-dist/ too
use: loaders.null()
}
]
}
});
}
actions.setWebpackConfig({
resolve: {
fallback: {
module: "empty",
dgram: "empty",
dns: "mock",
fs: "empty",
http2: "empty",
net: "empty",
tls: "empty",
child_process: "empty",
process: require.resolve("process/browser"),
zlib: require.resolve("browserify-zlib"),
stream: require.resolve("stream-browserify"),
util: require.resolve("util"),
buffer: require.resolve("buffer"),
asset: require.resolve("assert")
}
},
plugins: [
new webpack.ProvidePlugin({
Buffer: ["buffer", "Buffer"],
process: "process/browser"
})
]
});
};
I've also tried moving the process/browser part into the stage check:
...
if (stage === "build-html" || stage === "develop-html") {
actions.setWebpackConfig({
plugins: [
new webpack.ProvidePlugin({
process: "process/browser"
})
]
});
}
...
but that doesn't seem to work either :/
I feel like I just need a little tweak here but for the life of me I can't figure out what. Any ideas?
Found the missing thing.. Had to add safer-buffer to the loaders:
actions.setWebpackConfig({
module: {
rules: [
{
test: /safer-buffer/,
use: loaders.null()
}
]
}
});
I am using AngularJS writen in typescript and SystemJS module builder.
My app's main file (app.ts) is located inside Scripts/App.
SytemJS production configuration from gulpfile.js:
gulp.task("deploy", ["ts", "vendorjs", "app-css"], function (done) {
return systemBuild("./Scripts/App/app", "./dist/js/main_" + build + ".min.js");
});
function systemBuild(sourcepath, targetPath, cb) {
var builder = new Builder();
// Collection bundling
builder.config({
defaultJSExtensions: true,
map: {
"ts": "node_modules/plugin-typescript/lib/plugin.js"
},
baseURL: "./Scripts",
transpiler: "ts",
typescriptOptions: {
module: "system",
target: "es5",
sourceMap: true,
inlineSourceMap: true,
inlineSources: true,
resolveTypings: true,
emitDecoratorMetadata: true,
noImplicitAny: true,
typeCheck: true, // also accepts "strict"
tsconfig: true // also accepts a path
},
packages: {
"app": {
defaultExtension: "ts"
}
}
});
return builder.buildStatic(sourcepath, targetPath, {
minify: true,
mangle: true,
sourceMaps: false,
sourceMapContents: false,
globalDefs: { DEBUG: false }
});
}
After running gulp default, I am getting 'Uncaught SyntaxError: Unexpected token <' error. Could anybody tell me what I am doing wrong?