React NextJS app, installed webpack, then removed it: Error: Cannot find module 'webpack/lib/node/NodeOutputFileSystem'
I found the answer in the following trend here: https://github.com/webpack/webpack/issues/2131#issuecomment-383017060
rm -R node_modules
rm package-lock.json #(this should be removed)
npm cache verify
npm install
Now my npm run dev
works again!
Leon Gaban
Investor, Powerlifter, Crypto investor and global citizen You can also find me here: @leongaban | github | panga.ventures
Updated on June 18, 2022Comments
-
Leon Gaban almost 2 years
While trying to figure out how to create and use ENV secrets with a frontend only ReactJS / NextJS app I broke my app installing webpack.
https://medium.com/@trekinbami/using-environment-variables-in-react-6b0a99d83cf5
https://github.com/zeit/next.js/issues/805
After I
npm install webpack
I realized that I should not install webpack myself since that is already handled by NextJS.So I removed my node_modules folder, removed webpack from my package.json, but now when I try to run my app with:
npm run dev
I get the following error:moonholdings.io [actionsReducers●] % npm run dev > [email protected] dev /Users/leongaban/projects/Futuratum/moonholdings.io > next -p 7777 { Error: Cannot find module 'webpack/lib/node/NodeOutputFileSystem' at Function.Module._resolveFilename (internal/modules/cjs/loader.js:581:15) at Function.Module._load (internal/modules/cjs/loader.js:507:25) at Module.require (internal/modules/cjs/loader.js:637:17) at require (internal/modules/cjs/helpers.js:20:18) at Object.<anonymous> (/Users/leongaban/projects/Futuratum/moonholdings.io/node_modules/webpack-dev-middleware/lib/fs.js:7:30) at Module._compile (internal/modules/cjs/loader.js:689:30) at Object.Module._extensions..js (internal/modules/cjs/loader.js:700:10) at Module.load (internal/modules/cjs/loader.js:599:32) at tryModuleLoad (internal/modules/cjs/loader.js:538:12) at Function.Module._load (internal/modules/cjs/loader.js:530:3) code: 'MODULE_NOT_FOUND' }
Thoughts on why this would be happening?
My next.config.js
const { PHASE_PRODUCTION_SERVER } = process.env.NODE_ENV === 'development' ? {} : !process.env.NOW_REGION ? require('next/constants') : require('next-server/constants'); module.exports = (phase, { defaultConfig }) => { if (phase === PHASE_PRODUCTION_SERVER) { // Config used to run in production. return {}; } // ✅ Put the require call here. const withTypescript = require('@zeit/next-typescript'); const withCSS = require('@zeit/next-sass'); return withTypescript(withCSS()); };
package.json
{ "name": "moon.holdings", "version": "2.0.0", "description": "Moon Holdings, your cryptocurrency portfolio.", "main": "index.js", "scripts": { "dev": "next -p 7777", "build": "next build", "start": "next start -p 8000", "test": "NODE_ENV=test jest --watch --no-cache", "test-win": "SET NODE_ENV=test&& jest --watch", "heroku-postbuild": "next build" }, "author": "Futuratum", "license": "ISC", "dependencies": { "@zeit/next-sass": "^1.0.1", "@zeit/next-typescript": "^1.1.1", "apollo-boost": "^0.1.16", "apollo-client": "^2.4.2", "axios": "^0.18.0", "decko": "^1.2.0", "downshift": "^2.2.3", "enzyme": "^3.6.0", "enzyme-adapter-react-16": "^1.5.0", "graphql": "^14.0.2", "graphql-tag": "^2.9.2", "graphql-tools": "^4.0.0", "lodash.debounce": "^4.0.8", "next": "^7.0.2", "next-with-apollo": "^3.1.3", "node-sass": "^4.11.0", "nprogress": "^0.2.0", "prop-types": "^15.6.2", "ramda": "^0.26.1", "react": "^16.7.0", "react-adopt": "^0.6.0", "react-apollo": "^2.2.1", "react-dom": "^16.7.0", "react-redux": "^6.0.0", "react-transition-group": "^2.5.0", "redux-devtools-extension": "^2.13.8", "redux-thunk": "^2.3.0", "styled-components": "^3.4.9", "tslint": "^5.12.1", "tslint-react": "^3.6.0", "typescript": "^3.2.4", "waait": "^1.0.2" }, "devDependencies": { "@babel/plugin-proposal-decorators": "^7.3.0", "@babel/preset-typescript": "^7.1.0", "@types/enzyme": "^3.1.15", "@types/jest": "^23.3.13", "@types/next": "^7.0.6", "@types/ramda": "^0.25.49", "@types/react": "^16.7.20", "@types/react-dom": "^16.0.11", "@types/react-redux": "^7.0.1", "@types/zeit__next-typescript": "^0.1.1", "babel-core": "^7.0.0-bridge.0", "babel-jest": "^23.6.0", "babel-plugin-sass-vars": "^0.2.1", "babel-plugin-styled-components": "^1.7.1", "casual": "^1.5.19", "enzyme-to-json": "^3.3.4", "jest": "^23.6.0", "jest-transform-graphql": "^2.1.0" }, "jest": { "setupTestFrameworkScriptFile": "<rootDir>/jest.setup.js", "testPathIgnorePatterns": [ "<rootDir>/.next/", "<rootDir>/node_modules/" ], "transform": { ".*": "babel-jest", "^.+\\.js?$": "babel-jest", "^.+\\.ts?$": "babel-jest", "^.+\\.tsx?$": "babel-jest" }, "moduleFileExtensions": [ "js", "json", "ts", "tsx" ], "modulePaths": [ "<rootDir>/components/", "<rootDir>/pages/", "<rootDir>/shared/" ] } }