We Keep Coding

How to fix Module build failed (from ./node_modules/babel-loader/lib/index.js)?

While trying to start the project I have the following error:
Module build failed (from ./node_modules/babel-loader/lib/index.js):
Error [ERR_MODULE_NOT_FOUND]: Cannot find package 'C:\Users\user\Documents\signatura-web\node_modules#babel\preset-es2015' imported from C:\Users\user\Documents\signatura-web\babel-virtual-resolve-base.js.
I have #babel packages installed (7th version) and babel-loader (8th version).
Here is package.json file:
{
"name": "signatura-web",
"version": "1.0.0",
"description": "",
"private": true,
"main": "index.js",
"scripts": {
"start": "webpack-dev-server --open --mode development --env dev",
"build": "webpack --mode production --env stage",
"build:prod": "webpack --mode production --env prod",
"serve": "node prodServer.js",
"test": "jest"
},
"repository": {
"type": "git",
"url": "https://Evgeny.Smirennikov#bitbucket.axamit.com/scm/sgt/signatura-web.git"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"#babel/core": "^7.10.3",
"#babel/plugin-proposal-class-properties": "^7.10.4",
"#babel/plugin-transform-runtime": "^7.11.5",
"#babel/preset-env": "^7.10.3",
"#babel/preset-es2015": "^7.0.0-beta.53",
"#babel/preset-react": "^7.10.1",
"#babel/preset-typescript": "^7.12.7",
"#svgr/webpack": "^5.4.0",
"#types/react-datepicker": "^4.3.3",
"#types/react-notifications-component": "^2.4.0",
"#types/react-redux": "^7.1.11",
"#types/react-router-dom": "^5.3.2",
"#types/yup": "^0.29.13",
"#typescript-eslint/eslint-plugin": "^5.12.1",
"#typescript-eslint/parser": "^5.12.1",
"babel-loader": "^8.1.0",
"copy-webpack-plugin": "^6.4.0",
"css-loader": "^3.6.0",
"eslint": "^8.21.0",
"eslint-config-airbnb": "^19.0.4",
"eslint-config-prettier": "^8.5.0",
"eslint-plugin-import": "^2.26.0",
"eslint-plugin-jsx-a11y": "^6.6.1",
"eslint-plugin-prettier": "^4.2.1",
"eslint-plugin-react": "^7.30.1",
"eslint-plugin-react-hooks": "^4.6.0",
"fork-ts-checker-webpack-plugin": "^6.0.4",
"html-loader": "^1.1.0",
"html-webpack-plugin": "^4.3.0",
"identity-obj-proxy": "^3.0.0",
"mini-css-extract-plugin": "^0.9.0",
"prettier": "^2.7.1",
"react-datetime": "2.16.3",
"react-router-redux": "^4.0.8",
"style-loader": "^1.2.1",
"stylus-loader": "^3.0.2",
"ts-loader": "^8.0.11",
"typescript": "^4.1.2",
"webpack": "^4.43.0",
"webpack-cli": "^3.3.12",
"webpack-dev-server": "^3.11.0"
},
"dependencies": {
"#beyonk/google-fonts-webpack-plugin": "^1.5.0",
"#hookform/resolvers": "^1.0.0",
"#logtail/browser": "^0.1.12",
"#material-ui/core": "^4.11.0",
"#material-ui/icons": "^4.9.1",
"#types/react-input-mask": "^3.0.1",
"animejs": "^3.2.1",
"axios": "^0.27.2",
"bootstrap": "^4.5.2",
"braintree-web-drop-in-react": "^1.2.1",
"classnames": "^2.2.6",
"compute-scroll-into-view": "^1.0.17",
"connected-react-router": "^6.8.0",
"copy-to-clipboard": "^3.3.1",
"date-fns": "^2.29.1",
"express": "^4.17.1",
"file-loader": "^6.1.0",
"font-awesome": "^4.7.0",
"google-map-react": "^2.1.9",
"headroom.js": "^0.11.0",
"html-react-parser": "^1.4.8",
"jest": "^26.6.3",
"moment": "^2.26.0",
"node-sass": "^4.14.1",
"openvidu-browser": "2.16.0",
"pdfjs-dist": "^3.0.279",
"prop-types": "^15.7.2",
"react": "^16.13.1",
"react-addons-css-transition-group": "^15.6.2",
"react-bootstrap": "^1.3.0",
"react-bootstrap-typeahead": "^5.1.1",
"react-datepicker": "^4.5.0",
"react-document-meta": "^3.0.0-beta.2",
"react-dom": "^16.13.1",
"react-dropzone": "^11.1.0",
"react-ga": "^3.3.0",
"react-hook-form": "^6.9.6",
"react-input-mask": "^2.0.4",
"react-modal": "^3.11.2",
"react-notifications-component": "^2.4.1",
"react-paginate": "^6.5.0",
"react-progressive-graceful-image": "^0.6.14",
"react-redux": "^7.2.2",
"react-router-dom": "^5.2.0",
"react-select": "^3.1.0",
"react-spinners": "^0.9.0",
"react-string-replace": "^0.4.4",
"react-tabs": "^3.1.1",
"react-test-renderer": "^17.0.1",
"reactstrap": "^8.5.1",
"redux": "^4.0.5",
"redux-devtools-extension": "^2.13.8",
"redux-persist": "^6.0.0",
"redux-persist-transform-filter": "^0.0.20",
"redux-saga": "^1.1.3",
"regenerator-runtime": "^0.13.7",
"sass-loader": "^10.0.2",
"stylus": "^0.54.8",
"yup": "^0.29.3"
},
"homepage": "./",
"jest": {
"moduleNameMapper": {
"\\.(css|styl|svg)$": "identity-obj-proxy"
}
}
}
Here is .babelrc file:
{
"presets": [
"#babel/preset-env",
"#babel/preset-react",
"#babel/preset-typescript",
"#babel/preset-es2015"
],
"plugins": [
[
"#babel/plugin-proposal-class-properties"
]
]
}
Among rules in webpack.config.js I have:
{
test: /\.(js|jsx|tsx)$/,
exclude: /node_modules/,
use: {
loader: "babel-loader",
},
},

After building AWS Amplify "Error: Invariant failed"

My project works in local without any problems. However, after building with AWS Amplify, an error such as the screenshot below occurs when problems occur when routing to other pages. (example "/" to "/page")
error
I don't know how to solve the above error because there is no problem in local.
"scripts": {
"start": "vite",
"build": "tsc && vite build",
"preview": "vite preview"
},
"dependencies": {
"#emotion/react": "^11.7.1",
"#emotion/styled": "^11.6.0",
"#ethersproject/providers": "^5.5.2",
"#mui/icons-material": "^5.4.1",
"#mui/material": "^5.2.8",
"#web3-react/core": "^6.1.9",
"#web3-react/injected-connector": "^6.0.7",
"bignumber.js": "^9.0.2",
"caver-js": "^1.6.8",
"moment": "^2.29.1",
"moment-timezone": "^0.5.34",
"react": "^18.0.0",
"react-device-detect": "^2.1.2",
"react-dom": "^18.0.0",
"react-ga": "^3.3.0",
"react-icons": "^4.3.1",
"react-loader-spinner": "^6.0.0-0",
"react-player": "^2.10.1",
"react-random-reveal": "^2.0.0",
"react-responsive": "^9.0.0-beta.8",
"react-router-dom": "^6.3.0",
"react-select": "^5.2.2",
"react-timer-hook": "^3.0.5",
"recoil": "^0.7.3-alpha.2",
"recoil-persist": "^4.0.0",
"styled-components": "^5.3.5",
"styled-reset": "^4.4.0",
"styled-system": "^5.1.5",
"swiper": "^8.1.5",
"usehooks-ts": "^2.4.0",
"vercel": "^24.2.3",
"web3": "^1.7.0"
},
"devDependencies": {
"#types/aos": "^3.0.4",
"#types/react": "^18.0.0",
"#types/react-dom": "^18.0.4",
"#types/react-responsive": "^8.0.5",
"#types/react-router-dom": "^5.3.3",
"#types/recoil": "^0.0.9",
"#types/styled-components": "^5.1.25",
"#types/styled-system": "^5.1.15",
"#types/swiper": "^6.0.0",
"#vitejs/plugin-react": "^1.3.0",
"aos": "^2.3.4",
"typescript": "^4.6.3",
"vite": "^2.9.9"
}

Aframe JS Error Could not load module '../GetIntrinsic'

After running npm start I receive the following error:
error: Processing of node_modules/aframe/dist/aframe-master.js failed. Error: Could not load module '../GetIntrinsic' from '/root/immerso-experience/node_modules/aframe/dist'. Make sure the file actually exists.
Here is the package.json
{
"name": "experience-engine",
"description": "Immerso Experience Engine",
"private": true,
"author": "Immerso",
"homepage": "https://immerso.io",
"version": "1.3.0",
"scripts": {
"start": "export DEVELOPMENT=true && brunch w -n -s -P 3000",
"build": "rm -rf public/ && brunch build --production && node -e 'require(\"./post-build.js\").readWriteSync()'",
"preinstall": "npx npm-force-resolutions || echo"
},
"jest": {
"globals": {
"$PROCESS_ENV_API_URL": "https://api.immersotours.com",
"$PROCESS_ENV_WS_API_URL": null,
"$PROCESS_ENV_RECAPTCHA_KEY": null,
"$PROCESS_ENV_PAYPAL_CLIENT_ID": "ARbzpX1BmPBEJ37OXso7sdXACVyufeAZ4ovJLziEILohedwfwNNvXIpelUJSG64U65QjDn_lfXHa4P3E",
"$PROCESS_ENV_AES_KEY": "secret-key",
"$PROCESS_ENV_DEVELOPMENT": true
}
},
"dependencies": {
"aframe": "^1.3.0",
"aframe-event-set-component": "^3.0.3",
"aframe-fit-texture-component": "^0.2.5",
"aframe-look-at-component": "1.0.0",
"aframe-particle-system-component": "^1.1.3",
"aframe-react": "^4.4.0",
"aframe-scene-look-controls": "^1.0.5",
"aframe-video-controls": "^0.3.0",
"animate.css": "^4.1.1",
"axios": "^0.21.1",
"bootstrap": "^4.6.0",
"braces": "^2.3.1",
"brunch": "^3.0.0",
"crypto-js": "^4.0.0",
"dotenv": "^8.2.0",
"howler": "^2.2.0",
"json": "^11.0.0",
"kill-port-process": "^2.3.0",
"prerender-node": "^3.2.5",
"process-env-brunch": "^1.4.6",
"prop-types": "^15.8.1",
"react": "^16.13.1",
"react-async-script-loader": "^0.3.0",
"react-bootstrap": "^1.4.3",
"react-device-detect": "^1.17.0",
"react-dom": "^16.14.0",
"react-ga": "^3.3.0",
"react-google-invisible-recaptcha": "^0.2.11",
"react-google-login": "^5.2.2",
"react-helmet": "^6.1.0",
"react-i18next": "^9.0.10",
"react-intl": "^5.12.1",
"react-modal": "^3.12.1",
"react-router-dom": "^5.2.0",
"react-scripts": "^4.0.0",
"react-share": "^4.4.0",
"react-tooltip": "^4.2.13",
"sass-brunch": "^3.0.0",
"socket.io": "^3.1.1",
"ssri": "^8.0.1",
"use-strict": "^1.0.1",
"websocket": "^1.0.31"
},
"devDependencies": {
"#babel/core": "^7.12.13",
"#babel/plugin-transform-runtime": "^7.12.15",
"#babel/plugin-transform-strict-mode": "^7.12.13",
"#babel/preset-env": "^7.12.13",
"#babel/preset-react": "^7.12.13",
"#babel/register": "^7.12.13",
"#babel/runtime-corejs2": "^7.12.13",
"auto-reload-brunch": "^2.7.1",
"babel-brunch": "^7.0.1",
"babel-jest": "^26.6.3",
"babel-preset-latest": "^6.24.1",
"babel-preset-react": "^6.24.1",
"clean-css-brunch": "^3.0.0",
"esm": "^3.2.25",
"express": "^4.17.1",
"fingerprint-brunch": "^2.0.7",
"fs": "0.0.1-security",
"npm-force-resolutions": "0.0.3",
"react-addons-test-utils": "^15.6.2",
"react-notifications-component": "^3.0.3",
"riteway": "^6.2.1",
"uglify-es-brunch": "^1.0.5"
},
"main": ".eslintrc.js",
"repository": {
"type": "git",
"url": "git+https://ImmersoTech#bitbucket.org/ImmersoTech/immerso-experience.git"
},
"license": "ISC"
}
NPM version 7.19.1
Node version 16.5.0
Note: I am using a deprecated library called react-aframe which may or may not affect it. I imagine it might since it is so old. I have tried looking in github and stackoverflow for similar issues but could not find it
I ran this command
grep GetIntrinsic node_modules/aframe/dist/aframe-master.js
to see where GetIntrinsic is used and it is imported a couple of times with require(). From looking at the function itself it seems to just get a value based off of a key from the INTRINSINCS object.

how to resolve dependency issue: "npm run dev" not working

I have a vue based application, I am trying to run that application by using command npm run dev but it is giving me the below error:
This dependency was not found:
These dependencies were not found:
* module in (webpack)/lib/node/NodeTargetPlugin.js
* webpack/lib/web/FetchCompileWasmTemplatePlugin in ./node_modules/worker-loader/dist/index.js
To install them, you can run: npm install --save module webpack/lib/web/FetchCompileWasmTemplatePlugin
Error from chokidar (C:\): Error: EBUSY: resource busy or locked, lstat 'C:\hiberfil.sys'
Error from chokidar (C:\): Error: EBUSY: resource busy or locked, lstat 'C:\pagefile.sys'
Error from chokidar (C:\): Error: EBUSY: resource busy or locked, lstat 'C:\swapfile.sys'
below is my package.json
{
"name": "app",
"version": "1.0.0",
"description": "ATS System",
"author": "N4TECH",
"private": true,
"scripts": {
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
"start": "node server.js",
"build:dev": "node build/dev.js",
"build:prod": "node build/build.js"
},
"dependencies": {
"axios": "^0.17.1",
"bootstrap": "^3.3.7",
"bootstrap-vue": "^1.4.0",
"chalk": "^2.0.1",
"chokidar": "^3.4.2",
"css-loader": "^0.28.8",
"debounce": "^1.1.0",
"express": "^4.16.3",
"express-static-gzip": "^0.3.2",
"jquery": "^3.3.1",
"lodash": "^4.17.5",
"moment": "^2.20.1",
"node-sass": "^4.7.2",
"pusher-js": "^4.3.1",
"raw-loader": "^0.5.1",
"sass-loader": "^6.0.6",
"tributejs": "^3.5.3",
"vee-validate": "^2.0.0-beta.17",
"vue": "^2.5.2",
"vue-html5-editor": "^1.1.1",
"vue-i18n": "^8.1.0",
"vue-pdf": "^3.2.0",
"vue-router": "^3.0.1",
"vue-scrollto": "^2.11.0",
"vue-social-sharing": "^2.3.3",
"vue-style-loader": "^3.0.3",
"vue-truncate-collapsed": "^1.3.0",
"vue2-datatable-component": "^2.1.26",
"vuedraggable": "^2.16.0",
"vuetify": "^1.2.4",
"vuex": "^3.0.1",
"vuex-persistedstate": "^2.4.2"
},
"devDependencies": {
"autoprefixer": "^7.1.2",
"babel-core": "^6.22.1",
"babel-helper-vue-jsx-merge-props": "^2.0.3",
"babel-loader": "^7.1.1",
"babel-plugin-syntax-jsx": "^6.18.0",
"babel-plugin-transform-runtime": "^6.22.0",
"babel-plugin-transform-vue-jsx": "^3.5.0",
"babel-preset-env": "^1.3.2",
"babel-preset-stage-2": "^6.22.0",
"chalk": "^2.0.1",
"compression-webpack-plugin": "^1.1.6",
"copy-webpack-plugin": "^4.0.1",
"css-loader": "^0.28.0",
"extract-text-webpack-plugin": "^3.0.0",
"file-loader": "^1.1.4",
"friendly-errors-webpack-plugin": "^1.6.1",
"html-webpack-plugin": "^2.30.1",
"node-notifier": "^5.1.2",
"optimize-css-assets-webpack-plugin": "^3.2.0",
"ora": "^1.2.0",
"portfinder": "^1.0.13",
"postcss-import": "^11.0.0",
"postcss-loader": "^2.0.8",
"postcss-url": "^7.2.1",
"rimraf": "^2.6.0",
"semver": "^5.3.0",
"shelljs": "^0.7.6",
"uglifyjs-webpack-plugin": "^1.1.1",
"url-loader": "^0.5.8",
"vue-loader": "^13.3.0",
"vue-style-loader": "^3.0.1",
"vue-template-compiler": "^2.5.2",
"webpack": "^3.12.0",
"webpack-bundle-analyzer": "^2.9.0",
"webpack-dev-server": "^2.9.1",
"webpack-merge": "^4.1.0",
"worker-loader": "^3.0.3"
},
"engines": {
"node": ">= 6.0.0",
"npm": ">= 3.0.0"
},
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 8"
]
}
I also tried by deleting node_modules folder, run clean cache i.e npm cache clean --force, and then reinstall but no luck. I am stuck on this issue. Any help would by highly appreciable.

npm ERR! 404 Not Found: #babel/preset-vue#^7.1.0

I am developing simple website by using Ruby on Rails and Vue.js and I having trouble with starting local server. When I run on the terminal npm run dev it gives me 2 errors:
This dependency was not found:
* /Users/muchacho/RoRProjects/crm/crm-vue/node_modules/webpack-dev-server/client/index.js?http://localhost:8080 in multi (webpack)-dev-server/client?http://localhost:8080 (webpack)/hot/dev-server.js ./src/main.js
and second one:
This relative module was not found:
* ./src/main.js in multi (webpack)-dev-server/client?http://localhost:8080 (webpack)/hot/dev-server.js ./src/main.js
I thought that there are some missing dependencies or packages, so I run on the terminal npm install, it gives me another error:
npm ERR! 404 Not Found: #babel/preset-vue#^7.1.0
I tried to install #babel/preset-vue, but there is no such package.
My question is how to fix this problem, is it problem with node.js, vue.js or with npm ?
If you need additional information or file - I can upload source code.
UPD
Here is my package.json file:
{"name": "crm-vue",
"version": "1.0.0",
"description": "Frontend to crm",
"author": "",
"private": true,
"scripts": {
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
"start": "npm run dev",
"unit": "cross-env BABEL_ENV=test karma start test/unit/karma.conf.js --single-run",
"test": "npm run unit",
"lint": "eslint --ext .js,.vue src test/unit",
"build": "node build/build.js"
},
"dependencies": {
"#babel/preset-react": "^7.0.0",
"#fortawesome/fontawesome-svg-core": "^1.2.4",
"#fortawesome/free-solid-svg-icons": "^5.3.1",
"#fortawesome/vue-fontawesome": "^0.1.1",
"axios": "^0.18.0",
"bootstrap-vue": "^2.0.0-rc.11",
"i": "^0.3.6",
"npm": "^6.4.1",
"vue": "^2.5.17",
"vue-axios": "^2.1.3",
"vue-router": "^3.0.1",
"vue-sweetalert2": "^1.5.3",
"vuejs-datepicker": "^1.5.3",
"vuejs-paginator": "^2.0.2",
"vuelidate": "^0.7.4",
"vuex": "^3.0.1",
"vuex-persistedstate": "^2.5.4"
},
"devDependencies": {
"#babel/core": "^7.1.2",
"#babel/preset-env": "^7.1.0",
"autoprefixer": "^9.1.5",
"babel-core": "^6.26.3",
"babel-eslint": "^10.0.1",
"babel-helper-vue-jsx-merge-props": "^2.0.3",
"babel-loader": "^8.0.4",
"babel-plugin-istanbul": "^5.0.1",
"babel-plugin-syntax-jsx": "^6.18.0",
"babel-plugin-transform-runtime": "^6.22.0",
"babel-plugin-transform-vue-jsx": "^3.5.0",
"babel-preset-env": "^1.7.0",
"babel-preset-stage-2": "^6.22.0",
"babel-preset-stage-3": "^6.24.1",
"babel-preset-vue": "^2.0.2",
"chai": "^4.2.0",
"chalk": "^2.0.1",
"copy-webpack-plugin": "^4.0.1",
"cross-env": "^5.0.1",
"css-loader": "^1.0.0",
"eslint": "^5.6.1",
"eslint-config-standard": "^12.0.0",
"eslint-friendly-formatter": "^4.0.1",
"eslint-loader": "^2.1.1",
"eslint-plugin-import": "^2.14.0",
"eslint-plugin-node": "^7.0.1",
"eslint-plugin-promise": "^4.0.1",
"eslint-plugin-standard": "^4.0.0",
"eslint-plugin-vue": "^4.7.1",
"extract-text-webpack-plugin": "^3.0.0",
"file-loader": "^2.0.0",
"friendly-errors-webpack-plugin": "^1.6.1",
"html-webpack-plugin": "^3.2.0",
"inject-loader": "^4.0.1",
"karma": "^3.0.0",
"karma-coverage": "^1.1.1",
"karma-mocha": "^1.3.0",
"karma-phantomjs-launcher": "^1.0.2",
"karma-phantomjs-shim": "^1.4.0",
"karma-sinon-chai": "^2.0.2",
"karma-sourcemap-loader": "^0.3.7",
"karma-spec-reporter": "0.0.32",
"karma-webpack": "^3.0.5",
"mocha": "^5.2.0",
"node-notifier": "^5.1.2",
"node-sass": "^4.9.3",
"optimize-css-assets-webpack-plugin": "^5.0.1",
"ora": "^3.0.0",
"phantomjs-prebuilt": "^2.1.14",
"portfinder": "^1.0.17",
"postcss-import": "^12.0.0",
"postcss-loader": "^3.0.0",
"postcss-url": "^8.0.0",
"rimraf": "^2.6.0",
"sass-loader": "^7.1.0",
"semver": "^5.5.1",
"shelljs": "^0.8.2",
"sinon": "^6.3.4",
"sinon-chai": "^3.2.0",
"uglifyjs-webpack-plugin": "^2.0.1",
"url-loader": "^1.1.1",
"vue-loader": "^15.4.2",
"vue-style-loader": "^4.1.2",
"vue-template-compiler": "^2.5.17",
"webpack": "^4.20.2",
"webpack-bundle-analyzer": "^3.0.2",
"webpack-cli": "^3.1.2",
"webpack-dev-server": "^3.1.9",
"webpack-merge": "^4.1.4"
},
"engines": {
"node": ">= 6.0.0",
"npm": ">= 3.0.0"
},
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 8"
]
}

In my point of view, there was internet connection trouble, so packages didn't downloaded properly. Issue was solved by reinstalling Vue.js and other packages.