Module build failed: ReferenceError: [BABEL] Unknown option: /Users/Will/.babelrc.presets - node.js

So I am totally baffled by this. My team is running on the same branch, same commit of code. I'm the only one having this issue. Here's the full stack trace:
Module build failed: ReferenceError: [BABEL] /Users/Will/Brandzooka/visibl-front_end/node_modules/eslint-loader/index.js!/Users/Will/Brandzooka/visibl-front_end/app/index.jsx: Unknown option: /Users/Will/.babelrc.presets
at Logger.error (/Users/Will/Brandzooka/visibl-front_end/node_modules/babel-core/lib/transformation/file/logger.js:58:11)
at OptionManager.mergeOptions (/Users/Will/Brandzooka/visibl-front_end/node_modules/babel-core/lib/transformation/file/options/option-manager.js:126:29)
at OptionManager.addConfig (/Users/Will/Brandzooka/visibl-front_end/node_modules/babel-core/lib/transformation/file/options/option-manager.js:107:10)
at OptionManager.findConfigs (/Users/Will/Brandzooka/visibl-front_end/node_modules/babel-core/lib/transformation/file/options/option-manager.js:168:35)
at OptionManager.init (/Users/Will/Brandzooka/visibl-front_end/node_modules/babel-core/lib/transformation/file/options/option-manager.js:229:12)
at File.initOptions (/Users/Will/Brandzooka/visibl-front_end/node_modules/babel-core/lib/transformation/file/index.js:147:75)
at new File (/Users/Will/Brandzooka/visibl-front_end/node_modules/babel-core/lib/transformation/file/index.js:137:22)
at Pipeline.transform (/Users/Will/Brandzooka/visibl-front_end/node_modules/babel-core/lib/transformation/pipeline.js:164:16)
at transpile (/Users/Will/Brandzooka/visibl-front_end/node_modules/babel-loader/index.js:12:22)
at Object.module.exports (/Users/Will/Brandzooka/visibl-front_end/node_modules/babel-loader/index.js:69:12)
I've come across multiple answers that all relate to Babel 6 usage, which doesn't currently apply to me.
I've tried:
Uninstalling and reinstalling node and npm versions (via nvm)
Blowing away all the node modules, and reinstalling
npm cache clean
Blowing away repo, and re-cloning
For good measure, restarting my machine
Im running node v0.12.9 & npm v2.14.9
Here's my package.json
{
"version": "0.0.0",
"main": "app/index.js",
"private": true,
"scripts": {
"build": "CONFIG_ENV=dev Q_DEBUG=1 time ./node_modules/.bin/webpack --config conf/webpack.production.js",
"build:prod": "CONFIG_ENV=production time ./node_modules/.bin/webpack --config conf/webpack.production.js",
"build:stage": "CONFIG_ENV=stage time ./node_modules/.bin/webpack --config conf/webpack.production.js",
"deploy:codeship-getvisibl": "time firebase deploy --token $FIREBASETOKEN",
"deploy:codeship-stage": "time firebase deploy --token $FIREBASETOKEN --project firebase-visibl-stage",
"deploy:stage": "firebase use firebase-visibl-stage && firebase deploy",
"lint": "PATH=$PATH:/usr/local/bin time ./node_modules/eslint/bin/eslint.js --cache --format 'node_modules/eslint-friendly-formatter' --ext .js --ext .jsx --config .eslintrc app/",
"migrate": "babel-node --stage 1 migrate.js",
"start": "CONFIG_ENV=dev Q_DEBUG=1 ./node_modules/.bin/webpack-dev-server --config conf/webpack.config.js --hot --progress --inline --content-base ./build",
"start:prod": "CONFIG_ENV=production Q_DEBUG=1 ./node_modules/.bin/webpack-dev-server --config conf/webpack.config.js --hot --progress --inline --content-base ./build",
"debug": "CONFIG_ENV=dev Q_DEBUG=1 time ./node_modules/.bin/mocha debug --full-trace --colors --recursive app/mochaNodeSetup.js app",
"test": "CONFIG_ENV=dev Q_DEBUG=1 time ./node_modules/.bin/mocha --full-trace --colors --bail --recursive app/mochaNodeSetup.js app"
},
"dependencies": {
"#brandzooka/client": "*",
"#brandzooka/models": "*",
"autoprefixer-loader": "2.0.0",
"aws-sdk": "^2.3.7",
"babel-core": "5.8.38",
"babel-loader": "5.3.2",
"baconjs": "0.7.66",
"bluebird": "2.10.1",
"bootstrap-sass": "3.3.5",
"bootstrap-slider": "4.10.0",
"chai": "3.0.0",
"chai-immutable": "1.0.2",
"classnames": "2.1.2",
"clear-require": "^1.0.1",
"cls-bluebird": "^1.0.1",
"css-loader": "0.15.1",
"dom-scroll-into-view": "1.2.0",
"eslint": "1.4.3",
"eslint-friendly-formatter": "1.0.8",
"eslint-loader": "^1.0.0",
"eslint-plugin-mocha": "0.4.0",
"eslint-plugin-react": "3.4.1",
"exports-loader": "0.6.2",
"file-loader": "0.8.4",
"immutable": "3.7.4",
"immutable-form-validation": "1.0.4",
"imports-loader": "0.6.4",
"jquery": "2.1.4",
"jsdom": "2.0.0",
"json-loader": "0.5.2",
"lodash": "3.10.1",
"mocha": "2.2.5",
"moment": "2.10.3",
"node-libs-browser": "0.5.2",
"node-sass": "3.2.0",
"nomnom": "^1.8.1",
"null-loader": "0.1.1",
"phantomjs": "1.9.18",
"precommit-hook": "2.0.1",
"q": "1.4.1",
"query-string": "3.0.3",
"rc-form-validation": "2.4.12",
"react": "^0.14.0",
"react-addons-pure-render-mixin": "0.14.0",
"react-addons-test-utils": "0.14.0",
"react-bootstrap": "0.29.5",
"react-bootstrap-daterangepicker": "0.2.5",
"react-dom": "0.14.0",
"react-dropzone": "1.2.2",
"react-hot-loader": "1.2.7",
"react-moment-proptypes": "0.0.5",
"react-router": "0.13.5",
"react-slick": "0.12.2",
"readline2": "^1.0.1",
"reflux": "0.4.1",
"reflux-core": "0.3.0",
"reflux-promise": "1.0.4",
"sass-loader": "1.0.2",
"sha.js": "2.4.5",
"sinon": "1.15.4",
"sinon-chai": "2.8.0",
"sinon-react": "0.2.1",
"style-loader": "0.12.3",
"superagent": "1.2.0",
"superagent-promise": "1.0.0",
"url": "0.10.3",
"url-loader": "0.5.6",
"uuid": "2.0.2",
"valid-url": "1.0.9",
"whatwg-fetch": "0.9.0"
},
"devDependencies": {
"babel": "5.8.38",
"babel-eslint": "^6.0.0-beta.6",
"chai-spies": "^0.7.1",
"clean-webpack-plugin": "0.1.3",
"estraverse": "^4.2.0",
"extract-text-webpack-plugin": "0.8.2",
"firebase-token-generator": "^2.0.0",
"html-webpack-plugin": "1.5.2",
"pg": "^4.4.2",
"pg-parse-float": "0.0.1",
"webpack": "*",
"webpack-dev-server": "*"
}
}
Any hot ideas out there? 3 hours in, I can't even get the error message to change.

The config path /Users/Will/.babelrc.presets means you have a .babelrc file in /Users/Will/, and it has a "presets" key because it appears to be a config file for Babel 6.
Presumably you have a .babelrc at /Users/Will/Brandzooka/visibl-front_end/.babelrc to configure your Babel 5 install, but Babel 5 does not stop traversing upward looking for other configs unless you tell it to (Babel 6 stops at the first config), so it will also look farther up and error out on the Babel 6 config in your home directory.
This leaves you with a few options:
Delete /Users/Will/.babelrc, because Babel config files should live in the project they apply to, not in your home.
If that is a no-go, open (and maybe create) /Users/Will/Brandzooka/visibl-front_end/.babelrc and make sure it has the key "breakConfig": true to tell Babel 5 to stop looking in parent directories for other config files.

Related

Strategy to update Node.js and npm

We are currently using, npm - 9.1.3 and node - v16.14.2
What's a good strategy to update both the npm and node to the latest versions in the Windows environment?
Are there any issues involved?
My package.json looks like,
{
"name": "myreact",
"version": "1.0.0",
"description": "",
"scripts": {
"test": "jest --verbose --colors",
"test:ci": "jest --ci --watchAll=false --colors --reporters=default --reporters=jest-junit --coverage --coverageReporters=cobertura --coverageThreshold '{}'",
"test:coverage": "jest --verbose --coverage",
"test:watch": "jest --verbose --watch",
"test-debug": "node --inspect-brk --inspect ./node_modules/jest/bin/jest -i",
"start": "concurrently \"webpack-dev-server --mode development --open\" \"npm:stubby\"",
"start:iis": "webpack-dev-server --mode development --open --iis",
"build": "webpack --progress --mode production",
"build:dev": "webpack --progress --mode production --dev",
"build:prod": "lingui add-locale en && lingui extract --clean && lingui compile && webpack --mode production",
"lint": "eslint --cache --format codeframe --ext mjs,jsx,js src",
"add-locale": "lingui add-locale",
"extract": "lingui extract",
"compile": "lingui compile",
"stubby": "stubby --data stubs/stubby.yaml --watch"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"#craftjs/core": "0.2.0-beta.1",
"#craftjs/utils": "0.2.0-beta.1",
"#my/react-homegrown": "file:..//thirdparty/react/#my/my-react-homegrown-0.10.90.tgz",
"#lingui/core": "^2.9.1",
"#lingui/macro": "^2.9.1",
"#lingui/react": "^2.9.1",
"#material-ui/core": "^4.11.0",
"#material-ui/lab": "^4.0.0-alpha.56",
"#tinymce/tinymce-react": "^3.12.8",
"antlr4": "4.8.0",
"axios": "^0.26",
"classnames": "^2.3.1",
"date-fns": "^2.14.0",
"file-saver": "^2.0.5",
"formik": "^2.1.4",
"immer": "^9.0.12",
"json5": "^2.2.3",
"lodash": "^4.17.21",
"moment": "^2.29.4",
"nanoid": "^3.1.32",
"prop-types": "^15.7.2",
"pubsub-js": "^1.9.2",
"qs": "^6.11.0",
"react": "^16.14.0",
"react-container-query": "^0.12.0",
"react-datepicker": "^2.16.0",
"react-dom": "^16.14.0",
"react-resize-detector": "^6.7.2",
"react-resize-panel": "^0.3.5",
"react-router-dom": "^5.2.0",
"react-to-print": "^2.14.7",
"react-virtualized-auto-sizer": "^1.0.5",
"react-window": "^1.8.6",
"recoil": "^0.7.0",
"resolve": "^1.22.1",
"sanitize-html": "2.7.1",
"sheetjs-style": "^0.15.8",
"tinymce": "^5.10.7",
"yup": "^0.32.11"
},
"peerDependencies": {
"react": "^16.14.0",
"react-dom": "^16.14.0"
},
"devDependencies": {
"#babel/core": "^7.10.4",
"#babel/preset-react": "^7.14.5",
"#lingui/cli": "^2.9.2",
"#neutrinojs/airbnb": "^9.2.0",
"#neutrinojs/compile-loader": "^9.2.0",
"#neutrinojs/dev-server": "^9.4.0",
"#neutrinojs/eslint": "^9.2.0",
"#neutrinojs/jest": "^9.2.0",
"#neutrinojs/react": "^9.2.0",
"#tippyjs/react": "^4.0.5",
"#types/jest": "^25.2.3",
"assets-webpack-plugin": "^5.1.2",
"autoprefixer": "^9.8.4",
"babel-core": "^7.0.0-bridge.0",
"babel-plugin-macros": "^2.8.0",
"concurrently": "^5.3.0",
"core-js": "^2.6.11",
"enzyme": "^3.11.0",
"enzyme-adapter-react-16": "^1.15.6",
"enzyme-to-json": "^3.5.0",
"eslint": "^6.8.0",
"eslint-plugin-react-hooks": "^4.0.6",
"identity-obj-proxy": "^3.0.0",
"jest": "^26.6.3",
"jest-junit": "12.1.0",
"moment-locales-webpack-plugin": "^1.2.0",
"neutrino": "^9.2.0",
"postcss-loader": "^3.0.0",
"rc-slider": "^8.7.1",
"react-overlays": "^1.2.0",
"react-scripts": "^4.0.3",
"sass": "^1.49.9",
"sass-loader": "^10.0.5",
"stubby": "^5.0.0",
"style-loader": "^1.2.1",
"styled-components": "^4.1.2",
"webpack": "^4.44.2",
"webpack-bundle-analyzer": "^4.3.0",
"webpack-cli": "^3.3.12",
"webpack-dev-server": "^3.11.1"
}
}
Upgrading dependencies always comes with the risk of causing breakage to older dependencies. Typically, that occurs when you're using a really old module that requires one of your other modules to be on an older version as you go to upgrade it.
One really neat way to find outdated packages comes built-into NPM. Try running this in your both your backend and frontend projects:
npm outdated
It will return a list that's likely very large of outdated packages. Go through each package and try to find the ones with the largest disparity between the Current and Latest version. These packages will be the most difficult to upgrade. Also the packages that have a very small difference between current and latest means they are likely outdated. You'll want to check their Github repository to see when the last commit was and generally if it's being maintained anymore.
Upgrading past Node 16 is likely to cause breaking changes in your app on the backend. In terms of your front-end and the compiled client, it's not going to have much effect. Upgrading from React 16 to 18 has many breaking changes though. Migrating from Material-UI v4 to v5 has many breaking changes. Also moving from react-scripts 4 to 5 has quite a few changes.
In general, you'll want to go through all your packages and do some research based on the business needs. It's common for businesses to have to make the touch choice between keeping an older module pegged for awhile before upgrading it, as it may cause a required refactor.

Error in start react with vite (parse5 error code eof-in-element-that-can-contain-only-text)

When I start the application I get the following error:
[vite] Internal server error: Unable to parse HTML; parse5 error code
eof-in-element-that-can-contain-only-text at
{"file":"/index.html","line":56,"column":1}
at {"file":"/index.html","line":56,"column":1}
at handleParseError (file:///C:/Users/Marco/Documents/Projetos/admooh-presentation/src/node_modules/vite/dist/node/chunks/dep-a713b95d.js:43358:11)
at Parser.onParseError (file:///C:/Users/Marco/Documents/Projetos/admooh-presentation/src/node_modules/vite/dist/node/chunks/dep-a713b95d.js:43285:13)
at Parser._err (file:///C:/Users/Marco/Documents/Projetos/admooh-presentation/src/node_modules/vite/dist/node/chunks/dep-19c40c50.js:4942:14)
at eofInText (file:///C:/Users/Marco/Documents/Projetos/admooh-presentation/src/node_modules/vite/dist/node/chunks/dep-19c40c50.js:6977:7)
at Parser.onEof (file:///C:/Users/Marco/Documents/Projetos/admooh-presentation/src/node_modules/vite/dist/node/chunks/dep-19c40c50.js:5731:17)
at Tokenizer._emitEOFToken (file:///C:/Users/Marco/Documents/Projetos/admooh-presentation/src/node_modules/vite/dist/node/chunks/dep-19c40c50.js:1403:22)
at Tokenizer._stateRawtext (file:///C:/Users/Marco/Documents/Projetos/admooh-presentation/src/node_modules/vite/dist/node/chunks/dep-19c40c50.js:1903:22)
at Tokenizer._callState (file:///C:/Users/Marco/Documents/Projetos/admooh-presentation/src/node_modules/vite/dist/node/chunks/dep-19c40c50.js:1522:22)
at Tokenizer._runParsingLoop (file:///C:/Users/Marco/Documents/Projetos/admooh-presentation/src/node_modules/vite/dist/node/chunks/dep-19c40c50.js:1179:22)
at Tokenizer.write (file:///C:/Users/Marco/Documents/Projetos/admooh-presentation/src/node_modules/vite/dist/node/chunks/dep-19c40c50.js:1204:14)
package.json
{
"name": "admooh-presentation",
"version": "4.1.0",
"description": "Admooh presentation project",
"repository": {
"type": "git",
"url": "git://github.com/react-boilerplate/react-boilerplate-typescript.git"
},
"license": "MIT",
"author": "Max Stoiber",
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview --port 8080",
"lint": "npm run typecheck && npm run lint:css && npm run lint:eslint:quiet app",
"lint:css": "stylelint app/**/*.{js,ts,tsx}",
"lint:eslint": "eslint --ext .ts,.tsx,.js,.jsx --no-error-on-unmatched-pattern",
"lint:eslint:fix": "eslint --ext .ts,.tsx,.js,.jsx --no-error-on-unmatched-pattern --quiet --fix",
"lint:eslint:quiet": "eslint --ext .ts,.tsx,.js,.jsx --no-error-on-unmatched-pattern --quiet",
"prettify": "prettier --write app ",
"pretest": "npm run test:clean && npm run lint",
"test": "vitest run",
"test:ci": "vitest run",
"test:clean": "rimraf ./coverage",
"test:coverage": "vitest run --coverage",
"test:watch": "vitest watch",
"typecheck": "tsc --noEmit",
"storybook": "start-storybook -p 6006",
"build-storybook": "build-storybook",
"prepare": "cd .. && husky install"
},
"lint-staged": {
"*.{md,json}": [
"prettier --write",
"git add --force"
],
"*.{ts,tsx,js,jsx}": [
"npm run lint:eslint:fix",
"git add --force"
]
},
"dependencies": {
"#devexpress/dx-core": "3.0.5",
"#devexpress/dx-react-chart": "3.0.5",
"#devexpress/dx-react-chart-material-ui": "3.0.5",
"#devexpress/dx-react-core": "3.0.5",
"#hookform/resolvers": "2.9.8",
"#mui/icons-material": "^5.10.3",
"#mui/lab": "5.0.0-alpha.99",
"#mui/material": "^5.10.5",
"#mui/styled-engine-sc": "^5.10.3",
"#mui/x-date-pickers": "^5.0.1",
"#react-google-maps/api": "2.12.2",
"#rjsf/bootstrap-4": "^4.2.3",
"#rjsf/core": "^4.2.3",
"#textea/json-viewer": "^1.24.4",
"#uppy/core": "3.0.1",
"#uppy/dashboard": "^3.0.1",
"#uppy/drag-drop": "^3.0.0",
"#uppy/file-input": "^3.0.0",
"#uppy/locales": "3.0.0",
"#uppy/progress-bar": "^3.0.0",
"#uppy/react": "3.0.1",
"#uppy/tus": "3.0.1",
"#uppy/xhr-upload": "^3.0.1",
"bootstrap": "^4.6.2",
"copy-to-clipboard": "^3.3.2",
"crypto-js": "^4.1.1",
"currency.js": "2.0.4",
"date-fns": "2.29.3",
"immer": "9.0.15",
"intl": "1.2.5",
"jsdom": "^20.0.0",
"lodash": "4.17.21",
"mixpanel-browser": "^2.45.0",
"mui-tel-input": "^2.0.1",
"node-fetch": "^3.2.10",
"notistack": "3.0.0-alpha.7",
"ramda": "0.28.0",
"react": "18.2.0",
"react-beautiful-dnd": "13.1.1",
"react-bootstrap": "^1.6.6",
"react-dom": "18.2.0",
"react-error-boundary": "3.1.4",
"react-hook-form": "7.35.0",
"react-input-mask": "^2.0.4",
"react-intl": "6.1.1",
"react-jsonschema-form": "1.8.1",
"react-query": "3.39.2",
"react-responsive": "9.0.0-beta.10",
"react-responsive-carousel": "3.2.23",
"react-router-dom": "^6.4.0",
"react-table": "7.8.0",
"react-youtube": "10.0.0",
"sanitize.css": "13.0.0",
"styled-components": "5.3.5",
"typescript-plugin-styled-components": "2.0.0",
"use-immer": "0.7.0",
"use-places-autocomplete": "4.0.0",
"vest": "3.2.8",
"yup": "0.32.11",
"zod": "^3.19.1"
},
"devDependencies": {
"#hookform/devtools": "4.2.2",
"#storybook/addon-actions": "^6.5.12",
"#storybook/addon-essentials": "^6.5.12",
"#storybook/addon-links": "^6.5.12",
"#storybook/react": "^6.5.12",
"#stylelint/postcss-css-in-js": "^0.38.0",
"#testing-library/jest-dom": "5.16.5",
"#testing-library/react": "13.4.0",
"#testing-library/user-event": "14.4.3",
"#types/google.maps": "^3.50.1",
"#types/lodash": "4.14.185",
"#types/node": "18.7.18",
"#types/ramda": "0.28.15",
"#types/react": "18.0.20",
"#types/react-beautiful-dnd": "13.1.2",
"#types/react-dom": "18.0.6",
"#types/react-responsive": "8.0.5",
"#types/react-router-dom": "5.3.3",
"#types/styled-components": "5.1.26",
"#types/testing-library__jest-dom": "5.14.5",
"#typescript-eslint/eslint-plugin": "5.37.0",
"#typescript-eslint/parser": "5.37.0",
"#vitejs/plugin-react": "2.1.0",
"#vitest/ui": "^0.23.2",
"cross-env": "7.0.3",
"eslint": "8.23.1",
"eslint-config-airbnb-typescript": "17.0.0",
"eslint-config-prettier": "8.5.0",
"eslint-import-resolver-typescript": "3.5.1",
"eslint-plugin-import": "2.26.0",
"eslint-plugin-jest-dom": "^4.0.2",
"eslint-plugin-jsx-a11y": "6.6.1",
"eslint-plugin-prettier": "4.2.1",
"eslint-plugin-react": "7.31.8",
"eslint-plugin-react-hooks": "4.6.0",
"eslint-plugin-storybook": "^0.6.4",
"eslint-plugin-testing-library": "^5.6.4",
"husky": "^8.0.1",
"lint-staged": "13.0.3",
"msw": "0.47.3",
"postcss-syntax": "^0.36.2",
"prettier": "2.7.1",
"rimraf": "3.0.2",
"stylelint": "14.11.0",
"stylelint-config-recommended": "9.0.0",
"stylelint-config-styled-components": "0.1.1",
"stylelint-processor-styled-components": "1.10.0",
"typescript": "4.8.3",
"vite": "^3.1.1",
"vitest": "^0.23.2"
},
"engines": {
"node": ">=10.13.0",
"npm": ">=6.4.1"
},
"msw": {
"workerDirectory": "public"
}
}
Can anyone tell me what the error could be?
Already adjusted the dependencies, already deleted the nodemodules and installed again.
Node version: 16.17
You should probably include the HTML file in the question too.
In my case I found the issue was invalid HTML not quite on the same line. I had a self closing script tag that looked like:
<script type="text/javascript" src="/src/index.js"/>
which is invalid HTML. Changing it to <script type="text/javascript" src="/src/index.js"></script> fixed it. See Why don't self-closing script elements work?
I've just found out what the problem was. Sine version 3.1.0 vite uses parse5 as it's html parser. And for some reason this causes the crash. You should lock the vite dependency on 3.0.9.
Edit:
So, I have finally figured out what the problem was with my html file, since there was a need to update to the latest vite version.
It was because of html file formatting, parse5 throws when you have html styled like so
<noscript
><div>
<h1 style="margin: 16px; font-size: 26px">
No js detected
</h1>
<p style="font-size: 18px">
Turn your js on
</p>
</div></noscript
>
Notice the new line after <noscript that is the problem. It has to be <noscript> without the empty line. Obviously, the same applies to other tags. Which is really stupid, since that is completely valid and some formatters do format html like that.

webpack-cli Unable to load '#webpack-cli/serve' command webpack-cli TypeError: devServerFlags is not iterable windows

I am extreme newb and just realized what webpack was/is doing but I still can not get it to run in my lesson. Here is the error
> dev
> webpack serve --config ./bundler/webpack.dev.js
[webpack-cli] Unable to load '#webpack-cli/serve' command
[webpack-cli] TypeError: devServerFlags is not iterable
at C:\Users\Gamer\code\threejs-dc-1\node_modules\#webpack-cli\serve\lib\index.js:28:43
at WebpackCLI.makeCommand (C:\Users\Gamer\code\threejs-dc-1\node_modules\webpack-cli\lib\webpack-cli.js:104:31)
at ServeCommand.apply (C:\Users\Gamer\code\threejs-dc-1\node_modules\#webpack-cli\serve\lib\index.js:10:19)
at loadCommandByName (C:\Users\Gamer\code\threejs-dc-1\node_modules\webpack-cli\lib\webpack-cli.js:626:35)
at Command.<anonymous> (C:\Users\Gamer\code\threejs-dc-1\node_modules\webpack-cli\lib\webpack-cli.js:1091:23)
at Command.listener [as _actionHandler] (C:\Users\Gamer\code\threejs-dc-1\node_modules\webpack-cli\node_modules\commander\index.js:922:31)
at Command._parseCommand (C:\Users\Gamer\code\threejs-dc-1\node_modules\webpack-cli\node_modules\commander\index.js:1503:14)
at Command.parse (C:\Users\Gamer\code\threejs-dc-1\node_modules\webpack-cli\node_modules\commander\index.js:1292:10)
at Command.parseAsync (C:\Users\Gamer\code\threejs-dc-1\node_modules\webpack-cli\node_modules\commander\index.js:1318:10)
at WebpackCLI.run (C:\Users\Gamer\code\threejs-dc-1\node_modules\webpack-cli\lib\webpack-cli.js:1123:28)
and here is my package.json
{
"repository": "#",
"license": "UNLICENSED",
"scripts": {
"build": "webpack --config ./bundler/webpack.prod.js",
"dev": "webpack serve --config ./bundler/webpack.dev.js"
},
"dependencies": {
"#babel/core": "^7.13.1",
"#babel/preset-env": "^7.13.5",
"babel-loader": "^8.2.2",
"clean-webpack-plugin": "^3.0.0",
"copy-webpack-plugin": "^7.0.0",
"css-loader": "^5.1.0",
"dat.gui": "^0.7.7",
"file-loader": "^6.2.0",
"html-loader": "^2.1.1",
"html-webpack-plugin": "^5.2.0",
"mini-css-extract-plugin": "^1.3.9",
"portfinder-sync": "0.0.2",
"raw-loader": "^4.0.2",
"style-loader": "^2.0.0",
"three": "^0.126.0",
"webpack": "^5.24.2",
"webpack-cli": "^4.5.0",
"webpack-dev-server": "^4.9.0",
"webpack-merge": "^5.7.3"
}
}
I am running the following:
webpack: 5.72.0
webpack-cli: 4.9.2
webpack-dev-server 4.9.0
node v16.15.0
npm 8.5.5
on Windows 10.
I have uninstalled (fully) node v18 and npm and reinstalled. I've uninstalled webpack and reinstalled. I am at a loss. Any help is appreciated! I haven't even gotten started on my lesson but I am learning a lesson for sure!
Diza

Cant resolve fbjs/lib/memoizeStringOnly

Just did a refresh of my computer but now Im having trouble running my code....
When running "npm start" I get the following error:
> ERROR in ./~/react-dom/lib/CSSPropertyOperations.js Module not found:
> Error: Can't resolve 'fbjs/lib/memoi zeStringOnly' in
> 'C:\Code\Project.Web\node_modules\react-dom\lib'
> # ./~/react-dom/lib/CSSPropertyOperations.js 20:24-61
> # ./~/react-dom/lib/ReactDOMComponent.js #
> ./~/react-dom/lib/ReactDefaultInjection.js #
> ./~/react-dom/lib/ReactDOM.js # ./~/react-dom/index.js #
> ./source/components/index.js # multi
> (webpack)-dev-server/client?http://0.0.0.0:30 00
> webpack/hot/dev-server ./index.js
I tried to update all packages but got same error...
Here is my package.json file:
{
"name": "homecore.web",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "webpack-dashboard -t 'HomeCore' -- webpack-dev-server --colors --no-info",
"build": "rm -rf ./build && NODE_ENV=\"production\" webpack",
"lint-break-on-errors": "eslint ./source/js ./webpack.config.js -f table --ext .js --ext .jsx",
"lint": "eslint ./source/js ./webpack.config.js -f table --ext .js --ext .jsx || true",
"preview": "NODE_ENV=\"production\" webpack-dashboard -t 'Preview Mode - React-Redux Boilerplate' -- webpack-dev-server",
"hook-add": "prepush install",
"hook-remove": "prepush remove"
},
"author": "",
"license": "ISC",
"devDependencies": {
"autoprefixer": "^6.7.7",
"babel-core": "^6.24.1",
"babel-eslint": "^7.2.3",
"babel-loader": "^7.0.0",
"babel-plugin-syntax-decorators": "^6.13.0",
"babel-plugin-transform-class-properties": "^6.24.1",
"babel-plugin-transform-decorators-legacy": "^1.3.4",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"babel-preset-react-hmre": "^1.1.1",
"babel-preset-stage-0": "^6.24.1",
"babel-runtime": "^6.23.0",
"css-loader": "0.28.1",
"eslint": "^3.19.0",
"eslint-config-airbnb": "^14.1.0",
"eslint-plugin-import": "^2.2.0",
"eslint-plugin-jsx-a11y": "^4.0.0",
"eslint-plugin-react": "^6.10.3",
"extract-text-webpack-plugin": "^2.1.0",
"file-loader": "^0.11.1",
"html-webpack-plugin": "^2.28.0",
"less": "^2.7.2",
"less-loader": "^4.0.3",
"postcss-loader": "^1.3.3",
"prepush": "^3.1.11",
"style-loader": "^0.17.0",
"url-loader": "^0.5.8",
"webpack": "^2.4.1",
"webpack-dashboard": "^0.4.0",
"webpack-dev-server": "^2.4.5"
},
"dependencies": {
"alt": "0.18.6",
"alt-utils": "^1.0.0",
"babel-polyfill": "^6.23.0",
"es6-promise": "^4.1.0",
"immutable": "^3.8.1",
"isomorphic-fetch": "^2.2.1",
"react": "^15.5.4",
"react-dom": "^15.5.4",
"react-router": "^4.1.1",
"react-router-dom": "^4.1.1",
"semantic-ui-react": "^0.68.2",
"whatwg-fetch": "^2.0.3"
},
"prepush": [
"npm run lint-break-on-errors --silent"
]
}
Ok so after a lot of googleing, I found a work around. Im still not sure why i get this error.
But according to this post there is a way to add alias in webpack.
So i added this to my webpack.config.js
var alias = {};
alias['fbjs/lib/memoizeStringOnly'] = '../node_modules/fbjs/lib/memoizeStringOnly';
module.exports = {
.
.
alias : alias,
.
.
}
and now it works!
But, and now Im guessing, some package must be broken trying to access this component from the wrong location
Within the last week or so, I've run into the same issue but with react-dom#15.4.2 instead of react-dom#15.5.4. What I think I've found to be the issue is that Webpack isn't able to resolve the fbjs dependency within the react-dom/node_modules directory.
For me, I was able to solve the issue by including the fbjs package as an explicit dependency in the package.json. Now instead of the project-level dependency linking to the peer of react-dom, the module in react-dom links to the project-level module.
Now, I don't think this is necessarily the right solution, especially if you allow minor version bumps with '~' and '^' in your package.json, but because we are only updating our dependencies when we need to by hand, our team is comfortable specifying the version of fbjs.
Snippet of our package.json:
"dependencies": {
"assets-webpack-plugin": "3.5.1",
"babel-core": "6.24.0",
"babel-loader": "6.4.1",
"babel-preset-es2015": "6.24.0",
"babel-preset-react": "6.23.0",
"css-loader": "0.26.4",
"del": "2.2.2",
"es6-promise": "4.1.0",
"fbjs": "0.8.12",
"file-loader": "0.10.1",
"flux": "2.1.1",
"highcharts": "5.0.10",
"imports-loader": "0.7.1",
"jquery": "2.1.3",
"keymirror": "0.1.1",
"lodash": "3.10.1",
"lodash.clonedeep": "4.5.0",
"material-design-icons": "2.2.3",
"material-ui": "0.17.1",
"moment": "2.18.1",
"object-assign": "4.1.1",
"postcss-loader": "1.3.3",
"rc-progress": "2.1.0",
"react": "15.4.2",
"react-addons-perf": "15.4.2",
"react-data-grid": "1.0.85",
"react-dom": "15.4.2",
"react-highcharts": "11.5.0",
"react-router": "3.0.3",
"react-tap-event-plugin": "2.0.1",
"sass-loader": "6.0.3",
"style-loader": "0.13.2",
"superagent": "3.5.2",
"underscore": "1.8.3",
"url-loader": "0.5.8",
"webpack": "2.4.1"
},
I ran into this error as well after uninstalling a package. It seems fbjs was somehow removed as well, even though other packages still depended on it.
I fixed it by manually installing fbjs with npm install fbjs --save

How to resolve gulp dependencies while creating a NPM package

I have a nodeJs application(demo) which using commander package to take command line argument and using gulp for
build
docs
test
coverage
This functionality is working fine but Now I need to move this application as a NPM Package.
Changes are done according to according NPM Package but when I install this as NPM package npm install ../demo/ from local location.
It asks for following gulp dependencies: -
Cannot find module gulp
Cannot find module gulp-load-plugins
Cannot find module del
Cannot find module gulp-plumber
Cannot find module gulp-eslint
Cannot find module babel-eslint
Cannot find module gulp-debug
Cannot find module gulp-sourcemaps
Cannot find module gulp-babel
Every time I go back to the npm package(which i created) directory and run the command which occurs as an error like npm install gulp --save-dev and npm install del --save-dev and so on.
I also defined these dependencies in package.json but it is still throwing errors.
Is there any way to resolve this issue.
package.json
{
"name": "demo",
"version": "0.0.1",
"description": "",
"main": "./dist/index.js",
"license": "SEE LICENSE IN LICENSE.md",
"keywords": [],
"scripts": {
"build": "gulp build",
"coverage": "gulp coverage",
"docs": "gulp docs",
"prepublish": "gulp build",
"test": "gulp test"
},
"dependencies": {
"autobind-decorator": "^1.3.3",
"babel-polyfill": "^6.6.1",
"commander": "^2.9.0",
"lodash": "^4.0.0",
"mustache": "^2.2.1",
"source-map-support": "^0.4.0",
"wrench": "^1.5.8",
"ms": "^0.7.1"
"babel-eslint": "^6.0.4",
"babel-plugin-lodash": "^2.2.1",
"babel-plugin-transform-decorators-legacy": "^1.3.4",
"babel-preset-nodejs-lts": "^1.2.2",
"chai": "^3.5.0",
"del": "^2.2.0",
"esdoc-es7-plugin": "^0.0.3",
"gulp": "^3.9.1",
"gulp-babel": "^6.1.2",
"gulp-babel-istanbul": "^1.1.0",
"gulp-debug": "^2.1.2",
"gulp-esdoc": "^0.2.0",
"gulp-eslint": "^2.0.0",
"gulp-filter": "^4.0.0",
"gulp-inject-modules": "^0.1.1",
"gulp-load-plugins": "^1.2.2",
"gulp-mocha": "^2.2.0",
"gulp-plumber": "^1.1.0",
"gulp-sourcemaps": "^2.0.0-alpha",
"sinon": "^1.17.4",
"sinon-chai": "^2.8.0",
"btoa": "^1.1.2",
"superagent": "^2.1.0"
},
"engines": {
"node": ">=4.0.0"
}
}
I put all the things in dependencies. I tried that way but having same problem.
npm install ../demo/
npm WARN package.json demo_project#1.0.0 No description
npm WARN package.json demo_project#1.0.0 No repository field.
npm WARN package.json demo_project#1.0.0 No README data
> demo#0.0.1 prepublish /work/demo
> gulp build
[16:53:33] Local gulp not found in ~/work/demo
[16:53:33] Try running: npm install gulp
Although the documentation doesn't mention it, npm install folder only installs dependencies and not devDependencies. This may be a little bit confusing as running npm install inside the package folder installs both dependenciesand devDependencies.
So try to install gulpand all the rest as npm install --save gulp (not
--save-dev)
UPDATE: after adding package.json:
everything under devDependencies in your package.json should be under dependencies:
{
"name": "demo",
"version": "0.0.1",
"description": "",
"main": "./dist/index.js",
"license": "SEE LICENSE IN LICENSE.md",
"keywords": [],
"scripts": {
"build": "gulp build",
"coverage": "gulp coverage",
"docs": "gulp docs",
"prepublish": "gulp build",
"test": "gulp test"
},
"dependencies": {
"autobind-decorator": "^1.3.3",
"babel-polyfill": "^6.6.1",
"commander": "^2.9.0",
"lodash": "^4.0.0",
"mustache": "^2.2.1",
"source-map-support": "^0.4.0",
"wrench": "^1.5.8",
"ms": "^0.7.1",
"babel-eslint": "^6.0.4",
"babel-plugin-lodash": "^2.2.1",
"babel-plugin-transform-decorators-legacy": "^1.3.4",
"babel-preset-nodejs-lts": "^1.2.2",
"chai": "^3.5.0",
"del": "^2.2.0",
"esdoc-es7-plugin": "^0.0.3",
"gulp": "^3.9.1",
"gulp-babel": "^6.1.2",
"gulp-babel-istanbul": "^1.1.0",
"gulp-debug": "^2.1.2",
"gulp-esdoc": "^0.2.0",
"gulp-eslint": "^2.0.0",
"gulp-filter": "^4.0.0",
"gulp-inject-modules": "^0.1.1",
"gulp-load-plugins": "^1.2.2",
"gulp-mocha": "^2.2.0",
"gulp-plumber": "^1.1.0",
"gulp-sourcemaps": "^2.0.0-alpha",
"sinon": "^1.17.4",
"sinon-chai": "^2.8.0",
"btoa": "^1.1.2",
"superagent": "^2.1.0"
},
"engines": {
"node": ">=4.0.0"
}
}

Resources