Related
I'm using React (17.0.2), Chakra UI and Storybook (6.5.15) to create a component library. I don't use create-react-app because I don't really need to run it as an app. However, I can't get around the errors related to the core node modules that I receive like can't resolve module 'fs'. I have tried to add custom configuration to main.js for Storybook's webpack v5 so that it will ignore the node core modules like this:
webpackFinal: (config) => {
config.resolve.fallback.fs = false;
config.resolve.fallback.module = false;
config.resolve.fallback.os = false;
return config;
},
When I try to show the story for the component I receive the following error:
TypeError: fs[fsStatType] is not a function
at isTypeSync (http://localhost:6006/vendors-node_modules_chakra-ui_layout_dist_chakra-ui-layout_esm_js-node_modules_chakra-ui_spi-d8af64.iframe.bundle.js:116363:24)
at getDirectorySync (http://localhost:6006/vendors-node_modules_chakra-ui_layout_dist_chakra-ui-layout_esm_js-node_modules_chakra-ui_spi-d8af64.iframe.bundle.js:82082:61)
at ExplorerSync.searchSync (http://localhost:6006/vendors-node_modules_chakra-ui_layout_dist_chakra-ui-layout_esm_js-node_modules_chakra-ui_spi-d8af64.iframe.bundle.js:81910:63)
Below you'll find a list of the dev dependencies from my package.json.
"devDependencies": {
"#babel/cli": "^7.20.7",
"#babel/core": "^7.20.12",
"#babel/preset-env": "^7.20.2",
"#babel/preset-react": "^7.18.6",
"#chakra-ui/react": "^1.7.1",
"#chakra-ui/storybook-addon": "^4.0.16",
"#emotion/react": "^11.1.5",
"#emotion/styled": "^11.1.5",
"#rollup/plugin-babel": "^6.0.3",
"#rollup/plugin-commonjs": "^24.0.0",
"#rollup/plugin-node-resolve": "^15.0.1",
"#rollup/plugin-typescript": "^10.0.1",
"#storybook/addon-actions": "^6.5.15",
"#storybook/addon-essentials": "^6.5.15",
"#storybook/addon-interactions": "^6.5.15",
"#storybook/addon-links": "^6.5.15",
"#storybook/builder-webpack5": "^6.5.15",
"#storybook/manager-webpack5": "^6.5.15",
"#storybook/react": "^6.5.15",
"#storybook/testing-library": "0.0.13",
"#types/react": "^18.0.26",
"babel-loader": "^8.3.0",
"base64-arraybuffer": "^1.0.2",
"cross-fetch": "^3.1.5",
"crypto": "^1.0.1",
"framer-motion": "^6.5.0",
"jest-fetch-mock": "^3.0.3",
"js-cookie": "^3.0.1",
"jwt-decode": "^3.1.2",
"nanoid": "^4.0.0",
"njwt": "^1.2.0",
"node-polyfill-webpack-plugin": "^2.0.1",
"npm-run-all": "^4.1.5",
"randomstring": "^1.2.3",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"rollup": "^3.9.1",
"rollup-plugin-delete": "^2.0.0",
"rollup-plugin-dts": "^5.1.0",
"rollup-plugin-peer-deps-external": "^2.2.4",
"tslib": "^2.4.1",
"typescript": "^4.9.4",
"webpack": "^5.75.0"},
Does anyone have an idea on how to solve this issue?
I have tried to add the NodePolyfillPlugin plugin to webpack but I was still receiving errors related to fs, likely because it doesn't have a fallback for it and adding aliases with the modules to resolve it to node modules but I wasn't able to find an npm package for 'fs'. It seems deprecated?
I recently upgraded react, react-dom and their corresponding type packages from v16 to v18.
Since doing so, I get the following error on any Storybook story which features a React component:
at react-dom/client (http://127.0.0.1:8080/main.1187308f.iframe.bundle.js:1:486489)
at __webpack_require__ (http://127.0.0.1:8080/runtime~main.bb9256ec.iframe.bundle.js:1:381)
at __webpack_require__.t (http://127.0.0.1:8080/runtime~main.bb9256ec.iframe.bundle.js:1:1475)
This is a Typescript and Gatsby project. Here are the relevant dependencies/resolutions from package.json:
"dependencies": {
"react": "^18.2.0",
"react-dom": "^18.2.0"
"#types/react": "^18.0.26",
"#types/react-dom": "^18.0.10",
"#storybook/addon-a11y": "^6.5.15",
"#storybook/addon-essentials": "^6.5.15",
"#storybook/addon-links": "^6.5.15",
"#storybook/addons": "^6.5.15",
"#storybook/builder-webpack5": "^6.5.15",
"#storybook/cli": "^6.5.15",
"#storybook/manager-webpack5": "^6.5.15",
"#storybook/react": "^6.5.15",
"#storybook/source-loader": "^6.5.15",
},
"resolutions": {
"#types/react": "^18.0.26",
"#types/react-dom": "^18.0.10"
}
For my main.js, I precisely copied the Gatsby Storybook instructions.
How can I fix this error and get a working storybook with React v18? Per this github issue comment it should be totally possible with Storybook 6.5+.
You have to use the old ReactDOM.render or upgrade your storybook to 7.beta version to use the new API of React.
It looks like it works when I remove this from the recommended Gatsby Config:
if (parseInt(React.version) <= 18) {
config.externals = ["react-dom/client"];
}
Perhaps they made an error, and this was supposed to be < not <=
I am new in React and WebPack. I actually don't have any experience with such problems.
I tried to set up webpack, everything was ok. But after installing some packages during development, I started to get such mistakes. I tried to use --legacy-peer-deps, but it does not help me solve these problems.
If you know what packages to change or maybe update and how to fix it, thank you in advance!
While resolving: extract-text-webpack-plugin#3.0.2
npm ERR! Found: webpack#5.74.0
npm ERR! node_modules/webpack
npm ERR! dev webpack#"^5.74.0" from the root project
npm ERR! peer webpack#">=4.43.0 <6.0.0" from #pmmmwh/react-refresh-webpack-plugin#0.5.8
npm ERR! node_modules/#pmmmwh/react-refresh-webpack-plugin
npm ERR! #pmmmwh/react-refresh-webpack-plugin#"^0.5.3" from #storybook/react#6.5.12
npm ERR! node_modules/#storybook/react
npm ERR! dev #storybook/react#"^6.5.12" from the root project
npm ERR! 25 more (#storybook/builder-webpack5, #storybook/core, ...)
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer webpack#"^3.1.0" from extract-text-webpack-plugin#3.0.2
npm ERR! node_modules/extract-text-webpack-plugin
npm ERR! dev extract-text-webpack-plugin#"^3.0.2" from the root project
npm ERR!
npm ERR! Conflicting peer dependency: webpack#3.12.0
npm ERR! node_modules/webpack
npm ERR! peer webpack#"^3.1.0" from extract-text-webpack-plugin#3.0.2
npm ERR! node_modules/extract-text-webpack-plugin
npm ERR! dev extract-text-webpack-plugin#"^3.0.2" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR! See /home/user/.npm/eresolve-report.txt for a full report.
my package.json is below
"devDependencies": {
"#babel/core": "^7.19.1",
"#babel/preset-env": "^7.19.1",
"#babel/preset-typescript": "^7.18.6",
"#marshallofsound/webpack-asset-relocator-loader": "^0.5.0",
"#storybook/addon-actions": "^6.5.12",
"#storybook/addon-essentials": "^6.5.12",
"#storybook/addon-interactions": "^6.5.12",
"#storybook/addon-links": "^6.5.12",
"#storybook/builder-webpack5": "^6.5.12",
"#storybook/manager-webpack5": "^6.5.12",
"#storybook/preset-scss": "^1.0.3",
"#storybook/react": "^6.5.12",
"#storybook/testing-library": "^0.0.13",
"#testing-library/dom": "^8.18.1",
"#testing-library/jest-dom": "^5.16.5",
"#testing-library/react": "12",
"#testing-library/user-event": "^14.4.3",
"#types/jest": "^29.0.2",
"#types/react": "^17.0.3",
"#types/react-dom": "^17.0.2",
"#types/react-transition-group": "^4.4.5",
"#types/webpack-env": "^1.16.0",
"#typescript-eslint/eslint-plugin": "^5.37.0",
"#typescript-eslint/parser": "^5.37.0",
"babel-core": "^7.0.0-bridge.0",
"babel-jest": "^29.0.3",
"babel-loader": "^8.2.5",
"cross-env": "^7.0.3",
"css-loader": "^5.2.4",
"cz-conventional-changelog": "3.3.0",
"eslint": "^7.22.0",
"eslint-import-resolver-alias": "^1.1.2",
"eslint-plugin-import": "^2.22.1",
"eslint-plugin-react": "^7.31.8",
"extract-text-webpack-plugin": "^3.0.2",
"file-loader": "^6.2.0",
"fork-ts-checker-webpack-plugin": "^6.2.4",
"html-webpack-plugin": "^5.3.1",
"jest": "^29.0.3",
"jest-environment-jsdom": "^29.0.3",
"less": "^4.1.1",
"less-loader": "8.1.1",
"mini-css-extract-plugin": "^1.5.0",
"react-hot-loader": "^4.13.0",
"react-test-renderer": "^18.2.0",
"resolve-url-loader": "2.3.1",
"sass": "^1.54.9",
"sass-loader": "^13.0.2",
"style-loader": "^2.0.0",
"ts-jest": "^29.0.1",
"ts-loader": "^9.1.0",
"typescript": "^4.8.3",
"webpack": "^5.74.0",
"webpack-cli": "^4.6.0",
"webpack-dev-server": "^3.11.2"
},
"dependencies": {
"#hot-loader/react-dom": "^17.0.1",
"#types/node-sass": "^4.11.3",
"adjust-sourcemap-loader": "1.2.0",
"axios": "^0.27.2",
"classnames": "^2.3.2",
"css-modules-typescript-loader": "^4.0.1",
"eslint-plugin-padding": "^0.0.4",
"image-webpack-loader": "^8.1.0",
"node-sass": "^7.0.3",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-transition-group": "^4.4.5",
"ts-node": "^10.9.1",
"typescript-css-modules": "^1.0.4"
},
Try to run npm install --legacy-peer-deps
Seems your node version and project requirements conflict. First, uninstall node from your machine:
from this link
And install the latest version of node from here:
node installation
Hope it would work.Thanks
Try to downgrade the node version using nvm
I am facing a problem with my next.js application.
In fact, I'm trying to switch my application to my production server. Before that, I tested it on my local computer, where I could build it.
Then I moved it to my pre-production server, where again I was able to build it.
However, when I run the "yarn build" command on the production server, an error is generated.
Which is :
Browserslist: caniuse-lite is outdated. Please run next command `yarn upgrade`
> Build error occurred
{ Error: Cannot find module 'webpack'
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:636:15)
at Function.Module._load (internal/modules/cjs/loader.js:562:25)
at Module.require (internal/modules/cjs/loader.js:692:17)
at require (internal/modules/cjs/helpers.js:25:18)
at Object.<anonymous> (/var/www/vhosts/paplar-auto.fr/web/node_modules/mini-css-extract-plugin/dist/index.js:7:16)
at Module._compile (internal/modules/cjs/loader.js:778:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:789:10)
at Module.load (internal/modules/cjs/loader.js:653:32)
at tryModuleLoad (internal/modules/cjs/loader.js:593:12)
at Function.Module._load (internal/modules/cjs/loader.js:585:3) code: 'MODULE_NOT_FOUND' }
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
So I tried a "yarn add webpack" and then made a new build, and I then got this error :
Browserslist: caniuse-lite is outdated. Please run next command `yarn upgrade`
> Build error occurred
{ Error: Cannot find module 'next-compose'
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:636:15)
at Function.Module._load (internal/modules/cjs/loader.js:562:25)
at Module.require (internal/modules/cjs/loader.js:692:17)
at require (internal/modules/cjs/helpers.js:25:18)
at Object.<anonymous> (/var/www/vhosts/paplar-auto.fr/web/next.config.js:5:17)
at Module._compile (internal/modules/cjs/loader.js:778:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:789:10)
at Module.load (internal/modules/cjs/loader.js:653:32)
at tryModuleLoad (internal/modules/cjs/loader.js:593:12)
at Function.Module._load (internal/modules/cjs/loader.js:585:3) code: 'MODULE_NOT_FOUND' }
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
Whereas, I already have next-compose in my devDepencies (here is my package.json) :
{
"name": "web-gp",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next",
"build": "next build",
"build-static": "next build && next export",
"start": "next start -p 8000",
"storybook": "start-storybook -p 6006",
"build-storybook": "build-storybook",
"lint": "eslint .",
"build:svg": "svgr -d components/icons svg/"
},
"dependencies": {
"#artsy/fresnel": "^1.1.0",
"#bootstrap-styled/v4": "^3.4.0",
"#fortawesome/fontawesome-svg-core": "^1.2.28",
"#fortawesome/free-solid-svg-icons": "^5.13.0",
"#fortawesome/react-fontawesome": "^0.1.9",
"#material-ui/core": "^4.9.14",
"#material-ui/icons": "^4.9.1",
"#react-hook/window-size": "^3.0.6",
"#svgr/cli": "^5.3.1",
"#zeit/next-css": "^1.0.1",
"#zeit/next-sass": "^1.0.1",
"axios": "^0.19.2",
"babel-plugin-module-resolver": "^4.0.0",
"bootstrap": "^4.4.1",
"bootstrap-styled": "^2.7.2",
"core-js": "2.6.10",
"dotenv": "^8.2.0",
"dotenv-webpack": "^1.8.0",
"jquery": "^3.5.1",
"js-cookie": "^2.2.1",
"leaflet": "^1.6.0",
"moment": "^2.26.0",
"next": "9.3.5",
"next-fonts": "^1.0.3",
"next-images": "^1.4.0",
"nextjs-fonts": "^0.22.0",
"node-sass": "^4.14.0",
"query-string": "^6.13.1",
"react": "16.13.1",
"react-bootstrap": "^1.0.0",
"react-bootstrap-date-picker": "^5.1.0",
"react-datepicker": "^2.16.0",
"react-dom": "^16.13.1",
"react-html-parser": "^2.0.2",
"react-leaflet": "^2.7.0",
"react-leaflet-div-icon": "^1.1.0",
"react-leaflet-universal": "^2.2.1",
"react-loader-spinner": "^3.1.14",
"react-moment": "^0.9.7",
"react-papaparse": "^3.1.1",
"react-responsive": "^8.0.3",
"react-router-dom": "^5.1.2",
"react-select": "^3.1.0",
"react-slick": "^0.26.1",
"slick-carousel": "^1.8.1",
"standard-http-error": "^2.0.1",
"styled-components": "^5.1.0",
"swiper": "^6.0.2",
"webpack": "^5.50.0"
},
"devDependencies": {
"#babel/core": "^7.9.0",
"#storybook/addon-actions": "^5.3.18",
"#storybook/addon-links": "^5.3.18",
"#storybook/addons": "^5.3.18",
"#storybook/preset-typescript": "^3.0.0",
"#storybook/react": "^5.3.18",
"#storybook/theming": "^5.3.18",
"babel-eslint": "^10.1.0",
"babel-loader": "^8.1.0",
"babel-plugin-styled-components": "^1.10.7",
"eslint": "6.6.0",
"eslint-config-airbnb": "^18.1.0",
"eslint-config-prettier": "^6.10.1",
"eslint-plugin-import": "^2.20.2",
"eslint-plugin-prettier": "^3.1.3",
"eslint-plugin-react": "^7.19.0",
"fork-ts-checker-webpack-plugin": "^4.1.3",
"next-compose": "^0.0.2",
"ts-loader": "^7.0.1",
"tsconfig-paths-webpack-plugin": "^3.2.0",
"typescript": "^3.8.3"
},
"eslintConfig": {
"extends": "react-app"
}
}
I have already tried to move the packages mentioned in the errors from devDependencies to dependencies, but it does not change anything.
The errors of the missing packages vary, are not the same. Usually when I pass next-compose from devDependencies to dependencies, it tells me that typescript is missing, and when I then pass typescript from devDependencies to dependencies, it tells me again that next-compose is missing.
Anyway, I don't understand anything, does anyone have any idea what's going on?
Thanks in advance :)
Trying to implement google closure compiler to existing angularjs project. When i build application i get error java.lang.RuntimeException: Unhandled flag: outputManifest.
Here is package.json:
"devDependencies": {
"angular-mocks": "^1.7.8",
"expect.js": "^0.3.1",
"google-closure-compiler": "^20190909.0.0",
"google-closure-deps": "^20190909.0.0",
"google-closure-library": "^20190909.0.0",
"karma": "^4.3.0",
"karma-mocha": "1.3.0",
"karma-phantomjs-launcher": "1.0.4",
"less": "^3.10.3",
"mocha": "^6.2.1",
"ng-annotate": "1.2.2",
"sinon": "^7.5.0"
},
"dependencies": {
"angular": "^1.7.8",
"angular-animate": "^1.7.8",
"angular-translate": "^2.18.1",
"bootstrap": "^3.4.1",
"cesium": "^1.62.0",
"jquery": "^3.4.1",
"ol": "^6.0.1",
"olcs": "^2.9.0",
"proj4": "^2.5.0",
"url-polyfill": "^1.1.7"
}
Here is error:
{ Error: java.lang.RuntimeException: Unhandled flag: outputManifest
at mQ.QN [as Dg] (/vagrant/source/node_modules/google-closure-compiler-js/jscomp.js:8941:25462)
at mQ.TN [as Fg] (/vagrant/source/node_modules/google-closure-compiler-js/jscomp.js:8941:25657)
at mQ.ON (/vagrant/source/node_modules/google-closure-compiler-js/jscomp.js:2802:48)
at mQ.WN (/vagrant/source/node_modules/google-closure-compiler-js/jscomp.js:966:19)
at new mQ (/vagrant/source/node_modules/google-closure-compiler-js/jscomp.js:967:19)
at SHd (/vagrant/source/node_modules/google-closure-compiler-js/jscomp.js:8802:132)
at DQ (/vagrant/source/node_modules/google-closure-compiler-js/jscomp.js:2286:29)
at GQ (/vagrant/source/node_modules/google-closure-compiler-js/jscomp.js:3753:44)
at /vagrant/source/node_modules/google-closure-compiler-js/jscomp.js:3971:46
at CompilerJS.run (/vagrant/source/node_modules/google-closure-compiler/lib/node/closure-compiler-js.js:54:17)
at getFilesFromStdin.then.inputFiles (/vagrant/source/node_modules/google-closure-compiler/cli.js:164:31)
at process._tickCallback (internal/process/next_tick.js:68:7)
at Function.Module.runMain (internal/modules/cjs/loader.js:834:11)
at startup (internal/bootstrap/node.js:283:19)
at bootstrapNodeJSCore (internal/bootstrap/node.js:622:3)
'__java$exception':
{ g: null,
e: 'Unhandled flag: outputManifest',
backingJsObject: [Circular] } }
According to Closure Compiler's Flags and Option documentation:
--output_manifest VAL [is] Not supported by the JavaScript version
While I do not see closure-compiler-js in your package.json, I do see in your error report that you are using it to compile.
at mQ.TN [as Fg] (/vagrant/source/node_modules/google-closure-compiler-js/jscomp.js:8941:25657)
^^^^^^^^^^^^^^^^^^^^^^^^^^
So the solution to this would be either to stop using the JS version or start using flags that it supports.