ReactJS randomly Unexpected token '<' - javascript

Project was created with create-react-app. Did not eject. There are no webpack configs. Default "react-scripts": "^3.4.0". On dev version there is no error. But on production when user stays long on one page and clicks the link it shows white page, and after updating the site(deploying new version). This error randomly appears. Output on console
Unexpected token '<'
and no other information.
There is my package.json
{
"name": "project-name",
"version": "2.0.0",
"description": "description",
"private": true,
"dependencies": {
"#bugsnag/js": "^6.5.0",
"#bugsnag/plugin-react": "^6.5.0",
"#glidejs/glide": "^3.4.1",
"#material-ui/core": "^4.4.1",
"#sentry/browser": "^5.11.2",
"#sentry/cli": "^1.49.0",
"#types/jest": "^25.1.3",
"#types/node": "^13.7.4",
"#types/rc-switch": "^1.9.0",
"#types/react": "^16.9.22",
"#types/react-dom": "^16.9.5",
"axios": "^0.19.0",
"chart.js": "^2.9.1",
"classnames": "2.2.6",
"debounce-promise": "^3.1.2",
"formik": "^1.5.8",
"jquery": "^3.4.1",
"logrocket": "^1.0.6",
"logrocket-react": "^4.0.1",
"moment": "2.24.0",
"moment-timezone": "^0.5.27",
"orgchart": "^2.1.5",
"prop-types": "^15.7.2",
"purgecss": "^1.4.0",
"rc-switch": "^1.9.0",
"react": "^16.9.0",
"react-autosuggest": "^9.4.3",
"react-chartjs-2": "^2.7.6",
"react-circular-progressbar": "^2.0.2",
"react-contextmenu": "^2.11.0",
"react-data-export": "^0.6.0",
"react-datepicker": "^2.9.6",
"react-dom": "^16.9.0",
"react-dropzone-component": "^3.2.0",
"react-intl": "2.4.0",
"react-perfect-scrollbar": "^1.5.3",
"react-redux": "7.1.1",
"react-router-dom": "^5.0.1",
"react-scripts": "^3.4.0",
"react-select": "^3.0.4",
"react-select-async-paginate": "^0.3.10",
"react-table": "latest",
"react-transition-group": "^4.3.0",
"reactstrap": "^8.0.1",
"redux": "^4.0.4",
"redux-saga": "^1.0.5",
"styled-components": "^5.0.0",
"tailwindcss": "^1.1.2",
"typescript": "^3.8.2",
"xlsx": "^0.15.5",
"yup": "^0.27.0"
},
"scripts": {
"start": "yarn run tailwind && react-scripts start",
"build": "yarn run tailwind && node ./purge-tailwindcss.js && cross-env react-scripts build",
"tailwind": "./node_modules/.bin/tailwind build ./src/assets/css/vendor/tailwind.base.css -c ./tailwind.js -o ./src/assets/css/vendor/tailwind.css",
"test": "react-scripts test --env=node",
"crt": "bash create-component.sh",
"eject": "react-scripts eject",
"lint": "eslint src/**/*.js"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": [
">0.2%",
"not dead",
"not ie <= 11",
"not op_mini all"
],
"devDependencies": {
"babel-plugin-import": "^1.13.0",
"cross-env": "^5.2.0",
"eslint": "^6.8.0",
"eslint-config-airbnb": "^18.0.1",
"eslint-plugin-import": "^2.20.0",
"eslint-plugin-jsx-a11y": "^6.2.3",
"eslint-plugin-react": "^7.18.0",
"eslint-plugin-react-hooks": "^1.7.0",
"node-sass": "^4.12.0",
}
}

Don't know how. But after enabling sourcemap this error doesn't shown.
I removed this command from yarn build:
GENERATE_SOURCEMAP=false

Related

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",
},
},

Nextjs fatal production only error after adding new package

We have a NextJs app that is running for couple of years in production.
Recently I added storybook-addon-pseudo-states addon ran the code locally and tested and pushed to production. The app was running perfectly locally. believe it or not after pushing to production, production entirely went down with this weird error.
{"statusCode":500,"code":"MODULE_NOT_FOUND","error":"Internal Server Error","message":"Cannot find module 'react-is'\nRequire stack:\n- /opt/webapp/node_modules/styled-components/dist/styled-components.cjs.js\n- /opt/webapp/.next/server/pages/_document.js\n- /opt/webapp/node_modules/next/dist/next-server/server/require.js\n- /opt/webapp/node_modules/next/dist/next-server/server/load-components.js\n- /opt/webapp/node_modules/next/dist/next-server/server/api-utils.js\n- /opt/webapp/node_modules/next/dist/next-server/server/next-server.js\n- /opt/webapp/node_modules/next/dist/server/next.js\n- /opt/webapp/server.js"}
This is our package.json.
{
"license": "UNLICENSED",
"private": true,
"scripts": {
"dev": "NODE_ENV=development yarn server-remove-types && yarn server-watch",
"build": "yarn server-remove-types && yarn server-compile && yarn server-copy && next build",
"server-remove-types": "flow-remove-types --all --pretty src/server --out-dir .untyped/server",
"server-compile": "ncc build .untyped/server/index.js --out .dist --minify --external next --external grpc",
"server-copy": "node ./util/copy.js --from .dist/index.js --to server.js",
"server-watch": "yarn server-watch-remove-types & yarn server-watch-compile & yarn server-watch-nodemon",
"server-watch-nodemon": "node .dist/index.js",
"server-watch-remove-types": "node util/watch-flow-remove-types.js --from src/server --to .untyped/server",
"server-watch-compile": "yarn server-compile --watch",
"lint-javascript": "eslint src",
"format": "eslint src --fix",
"type-install": "flow-typed install",
"type-upgrade": "flow-typed update",
"type-check": "flow check --color=always --show-all-errors",
"test-unit": "NODE_ENV=test jest --config ./config/jest.unit.config.js --colors",
"test-unit-watch": "yarn test-unit --watchAll --coverage false",
"test-unit-update-snapshots": "yarn test-unit --updateSnapshot",
"test-endpoints": "NODE_ENV=test jest --config ./config/jest.endpoints.config.js src/test/endpoints.spec.js",
"test-bdd": "echo 'Not implemented.'",
"test-contract": "echo 'Not implemented.'",
"test-e2e": "echo 'Not implemented.'",
"test-e2e-debug": "echo 'Not implemented.'",
"storybook": "start-storybook -p 3001",
"build-storybook": "build-storybook -o ./src/stories/storybook"
},
"engines": {
"node": ">=12"
},
"browserslist": [
"extends #dpgr/browserslist-config"
],
"dependencies": {
"#dpgr/browserslist-config": "^1.1.0",
"#dpgr/react-components": "^3.7.0",
"#sentry/browser": "6.10.0",
"#sentry/node": "6.10.0",
"#sentry/tracing": "6.10.0",
"#tippy.js/react": "^2.2.3",
"#vercel/ncc": "^0.31",
"axios": "0.18.1",
"babel-plugin-superjson-next": "^0.3.1",
"chart.js": "^2.9.4",
"chokidar": "^3.3.1",
"color": "^3.1.0",
"convert-array-to-csv": "^1.0.9",
"cookie": "^0.4.0",
"date-fns": "^2.4.1",
"dompurify": "^2.0.2",
"draft-js": "^0.11.0",
"draft-js-export-html": "^1.3.3",
"draft-js-import-html": "^1.3.3",
"fastify": "^2.0.0",
"fastify-cookie": "^3.0.2",
"flow-remove-types": "^2.115.0",
"focus-visible": "^5.0.0",
"formik": "^1.3.2",
"fs": "^0.0.1-security",
"google-protobuf": "^3.14.0",
"grpc": "^1.24.4",
"grpc-web": "^1.2.1",
"http-status-codes": "^1.3.0",
"iban": "^0.0.14",
"jsonwebtoken": "^8.5.1",
"lodash": "^4.17.11",
"minimist": "^1.2.0",
"mkdirp": "^0.5.1",
"next": "^10.0.0",
"next-cookies": "^2.0.3",
"next-redux-wrapper": "^7.0.0",
"node-xlsx": "^0.15.0",
"nodemon": "^2.0.2",
"nprogress": "^0.2.0",
"openid-client": "^3.13.0",
"p-queue": "^6.2.1",
"path-to-regexp": "^6.2.0",
"re-reselect": "^3.0.0",
"react": "^17.0.1",
"react-aria-modal": "^4.0.0",
"react-chartjs-2": "^2.11.1",
"react-copy-to-clipboard": "^5.0.1",
"react-datepicker": "^3.0",
"react-dom": "^17.0.1",
"react-paginate": "^6.3.0",
"react-redux": "^7.2.2",
"react-select": "^3.0.8",
"redux": "^4.0.0",
"redux-saga": "^1.1.1",
"regenerator-runtime": "^0.13.3",
"reselect": "^4.0.0",
"styled-components": "^5.0.0",
"styled-reboot": "^4.0.1",
"superjson": "^1.7.5",
"uuid": "^3.3.2",
"xlsx": "^0.17.1",
"yup": "^0.28.0"
},
"devDependencies": {
"#babel/core": "^7.13.15",
"#babel/eslint-parser": "^7.13.14",
"#babel/helper-builder-react-jsx": "^7.15.4",
"#babel/helper-builder-react-jsx-experimental": "^7.12.11",
"#babel/plugin-transform-flow-strip-types": "^7.4.4",
"#storybook/addon-actions": "6.3.12",
"#storybook/addon-controls": "^6.3.12",
"#storybook/addon-essentials": "6.3.12",
"#storybook/addon-links": "6.3.12",
"#storybook/react": "6.3.12",
"#testing-library/jest-dom": "^5.11.9",
"#testing-library/react": "12.0.0",
"#testing-library/react-hooks": "7.0.1",
"#wojtekmaj/enzyme-adapter-react-17": "^0.4.1",
"babel-loader": "^8.0.5",
"babel-plugin-inline-react-svg": "^1.1.1",
"babel-plugin-module-resolver": "^4.0",
"babel-plugin-styled-components": "^1.10.0",
"css-loader": "6.4.0",
"enzyme": "^3.11.0",
"enzyme-to-json": "^3.6.1",
"eslint": "^7.24.0",
"eslint-config-airbnb": "^18.0.1",
"eslint-import-resolver-babel-module": "^5.3.0",
"eslint-plugin-flowtype": "^4.3.0",
"eslint-plugin-import": "^2.14.0",
"eslint-plugin-jest": "^23.1.1",
"eslint-plugin-jsx-a11y": "^6.0.3",
"eslint-plugin-react": "^7.11.1",
"eslint-plugin-react-hooks": "^4.2",
"fastify-http-proxy": "^2.1.0",
"flow-bin": "^0.110.0",
"flow-typed": "^2.4.0",
"jest": "^26.6.3",
"jest-styled-components": "^7.0.5",
"mockdate": "^2.0.5",
"pretty": "^2.0.0",
"redux-devtools-extension": "^2.13.9",
"redux-mock-store": "^1.5.3",
"redux-saga-test-plan": "^4.0.1",
"redux-testkit": "^1.0.6",
"storybook-addon-designs": "6.2.0",
"storybook-addon-next-router": "3.0.8",
"style-loader": "3.3.0",
"supertest": "^6.1.6"
},
"peerDependencies": {}
}
These are the only changes made to package.json, plus few small changes in storybook stories.
Changes to package.json
Any idea what is the root cause for this fatal production only error?
The error says you're missing the library react-is and based on your package.json it doesn't appear to be installed.
The two scenarios that come to mind to explain erroring after package install / only in production.
Scenario 1
Someone could have manually deleted react-is from the package.json at some point in time after the last package manager sync and prior to your screenshot.
Package managers sync the changes in package.json when performing installs, updates, and uninstalls. Meaning, when you added the storybook plugin it removed the react-is package because it was no longer listed in the package.json file.
Scenario 2
Since it's only happening in production the app might not be using react-is but it is still included in a file.
import ReactIs from 'react-is'
Search your app for react-is - if it's not used, remove the unused statements - if it's used you need to install the package.

SCSS variable export not imported in React

After a general package upgrade on my React project, SCSS variable imports in JavaScript stopped working. Imports themselves are still working, but variables exported from SCSS never appear in JavaScript.
Here's what I'm doing:
_variables.scss:
$akt-dark-teal: #035164;
$akt-light-blue: #007FAA;
:export {
primaryMain: $akt-dark-teal;
secondaryMain: $akt-light-blue;
}
In React:
import scss from './scss/parts/_variables.scss';
console.log(scss); // [object Object]
console.log(scss.primaryMain); // undefined
console.log(scss.secondaryMain); // undefined
This used to work before the package upgrade. The path to the imported SCSS file is correct, I verified it. Besides similar exports fail the same way with other files, no matter where they are or what is their name.
I think the problem lies somewhere in the packages:
The current package.json:
{
"name": "js-dashboard",
"version": "0.0.1",
"private": true,
"homepage": "/public/",
"dependencies": {
"#date-io/moment": "^2.10.8",
"#material-ui/core": "^4.11.3",
"#material-ui/icons": "^4.11.2",
"#material-ui/lab": "^4.0.0-alpha.57",
"#material-ui/pickers": "^3.3.10",
"#reduxjs/toolkit": "^1.5.1",
"#stripe/react-stripe-js": "^1.4.0",
"#stripe/stripe-js": "^1.13.2",
"#testing-library/jest-dom": "^5.11.10",
"#testing-library/react": "^11.2.6",
"#testing-library/user-event": "^13.1.5",
"#types/react-redux": "^7.1.16",
"axios": "^0.21.1",
"chart.js": "^3.1.1",
"cryptr": "^6.0.2",
"css-loader": "^5.2.4",
"draft-js": "^0.11.7",
"draftjs-to-html": "^0.9.1",
"eslint": "^7.24.0",
"firebase": "^8.4.1",
"history": "^5.0.0",
"html-react-parser": "^1.2.6",
"http": "0.0.1-security",
"https": "^1.0.0",
"immer": "^9.0.1",
"json-loader": "^0.5.7",
"libphonenumber-js": "^1.9.16",
"lodash": "^4.17.21",
"material-ui-phone-number": "^2.2.6",
"moment": "^2.29.1",
"nanoid": "^3.1.22",
"node-sass": "^5.0.0",
"prop-types": "^15.7.2",
"react": "^17.0.2",
"react-beautiful-dnd": "^13.1.0",
"react-chartjs-2": "^3.0.2",
"react-csv": "^2.0.3",
"react-dom": "^17.0.2",
"react-redux": "^7.2.3",
"react-router-dom": "^5.2.0",
"react-scripts": "^4.0.3",
"react-to-pdf": "0.0.13",
"redux": "^4.0.5",
"redux-thunk": "^2.3.0",
"reselect": "^4.0.0",
"sass": "^1.32.11"
},
"scripts": {
"start": "set PORT=3001 && react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"eslint-plugin-import": "^2.20.2",
"eslint-plugin-jsx-a11y": "^6.2.3",
"eslint-plugin-react": "^7.19.0",
"eslint-plugin-react-hooks": "^2.5.1"
}
}
The old package.json before the package upgrade:
{
"name": "js-dashboard",
"version": "0.0.1",
"private": true,
"homepage": "/public/",
"dependencies": {
"#date-io/moment": "^1.3.13",
"#material-ui/core": "^4.11.2",
"#material-ui/icons": "^4.9.1",
"#material-ui/lab": "^4.0.0-alpha.54",
"#material-ui/pickers": "^3.2.10",
"#reduxjs/toolkit": "^1.5.0",
"#stripe/react-stripe-js": "^1.1.2",
"#stripe/stripe-js": "^1.11.0",
"#testing-library/jest-dom": "^4.2.4",
"#testing-library/react": "^9.3.2",
"#testing-library/user-event": "^7.1.2",
"#types/react-redux": "^7.1.11",
"axios": "^0.21.1",
"chart.js": "^2.9.4",
"cryptr": "^6.0.2",
"draft-js": "^0.11.7",
"draftjs-to-html": "^0.9.1",
"eslint": "^6.6.0",
"firebase": "^7.23.0",
"history": "^5.0.0",
"html-react-parser": "^0.14.2",
"immer": "^7.0.15",
"json-loader": "^0.5.7",
"libphonenumber-js": "^1.9.4",
"lodash": "^4.17.20",
"material-ui-phone-number": "^2.2.6",
"moment": "^2.29.1",
"nanoid": "^3.1.18",
"node-sass": "^4.14.1",
"react": "^16.13.1",
"react-beautiful-dnd": "^13.0.0",
"react-chartjs-2": "^2.11.1",
"react-csv": "^2.0.3",
"react-dom": "^16.13.1",
"react-redux": "^7.2.2",
"react-router-dom": "^5.2.0",
"react-scripts": "^3.4.3",
"react-to-pdf": "0.0.13",
"redux": "^4.0.5",
"redux-thunk": "^2.3.0",
"reselect": "^4.0.0"
},
"scripts": {
"start": "set PORT=3001 && react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
Update: fixed on CRA v5.0.0
This is a bug that appeared with the version 4 of create-react-app. Here is the issue about it on Github. It has been fixed since then and the fix should be available in the next release.
In the meantime, if you use something to override the webpack config of CRA you can fix it yourself by setting the compileType of css-loader to 'icss' as explained in this answer.

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.

Categories