No idea how to go about fixing this error. Did some google searching and followed what people recommended. Even removed node_modules and reinstalled but nothing works
I am getting this error:
Error: Cannot find module 'babel-runtime/helpers/interop-require-default' (While processing preset: "/Users/bli1/Development/node_modules/babel-preset-es2015/index.js")
package.json:
{
"name": "braddy",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "npm-run-all --parallel testApp:watch testServer:watch open:src lint:watch",
"open:src": "babel server/server.js",
"testApp": "mocha --reporter nyan tests/testSetup.js \"app/**/*.test.js\"",
"testApp:watch": "npm run testApp -- --watch",
"testServer": "mocha --reporter progress tests/testSetup.js \"server/**/*.test.js\"",
"testServer:watch": "npm run testServer -- --watch",
"lint": "node_modules/.bin/esw webpack.config.* app server tests",
"lint:watch": "npm run lint -- --watch"
},
"author": "",
"license": "ISC",
"dependencies": {
"babel": "^6.5.2",
"babel-cli": "^6.18.0",
"babel-core": "^6.18.2",
"babel-loader": "^6.2.8",
"babel-register": "^6.18.0",
"babel-runtime": "^6.18.0",
"express": "^4.14.0",
"jquery": "^3.1.1",
"react": "^15.4.1",
"react-dom": "^15.4.1",
"react-router": "^3.0.0",
"redux": "^3.6.0",
"redux-thunk": "^2.1.0"
},
"devDependencies": {
"babel-preset-react": "^6.16.0",
"babel-runtime": "^6.18.0",
"cheerio": "^0.22.0",
"eslint": "^3.11.1",
"eslint-plugin-import": "^2.2.0",
"eslint-plugin-react": "^6.8.0",
"eslint-watch": "^2.1.14",
"eventsource-polyfill": "^0.9.6",
"extract-text-webpack-plugin": "^1.0.1",
"jsdom": "^9.8.3",
"loglevel": "^1.4.1",
"mocha": "^3.2.0",
"npm-run-all": "^3.1.2",
"open": "0.0.5",
"react-hot-loader": "^1.3.1",
"webpack": "^1.13.3",
"webpack-dev-middleware": "^1.8.4",
"webpack-dev-server": "^1.16.2",
"webpack-hot-middleware": "^2.13.2"
}
}
The plugin babel-preset-es2015 is missing in your package.json, and not installed when you do npm install. Add it, and install again.
Related
I'm running into an issue where my build works fine on master branch, but on a sub-branch it is producing an error of "Uncaught ReferenceError: react is not defined". The package.json for both branches are a little different, but I'm still unsure why the sub-branch is showing that error as React is listed as a dependency for both.
master-branch:
{
"name": "master-branch",
"version": "0.0.1",
"description": "master-branch",
"main": "lib/index.js",
"pre-commit": [
"test"
],
"peerDependencies": {
"antd": "3.x",
"react": "16.x",
"react-dom": "16.x"
},
"scripts": {
"build": "rm -rf lib && NODE_ENV=production webpack --progress --config webpack.config.js ",
"docs:clean": "rm -rf docs/dist",
"docs:deploy": "yarn docs && gh-pages -d docs/dist",
"docs": "esdoc && yarn test:coverage && node docs/post-doc",
"test": "NODE_ENV=test jest",
"test:coverage": "jest --coverage",
"test:watch": "jest --watch",
"watch": "watch-run -p 'src/**' yarn build",
"storybook": "start-storybook -p 6006",
"storybook:watch": "concurrently \"yarn watch\" \"yarn storybook\"",
"storybook:build": "build-storybook -c .storybook -o build-stories"
},
"babel": {
"presets": [
"es2015",
"stage-0",
"react"
],
"plugins": [
"transform-class-properties",
"transform-custom-element-classes",
"transform-es2015-classes",
"transform-export-extensions"
]
},
"jest": {
"coverageDirectory": "docs/dist/coverage"
},
"dependencies": {
"antd": "3.6.5",
"async": "^2.6.0",
"axios": "^0.19.0",
"chance": "^1.0.13",
"classnames": "^2.2.5",
"jquery": "^3.2.1",
"lodash": "^4.17.15",
"md5": "^2.2.1",
"react-jss": "^8.4.0",
"store": "^2.0.12"
},
"devDependencies": {
"#storybook/addon-actions": "^5.2.5",
"#storybook/addon-links": "^5.2.5",
"#storybook/react": "^5.2.5",
"babel-cli": "^6.26.0",
"babel-core": "^6.26.3",
"babel-loader": "^7.1.4",
"babel-plugin-transform-class-properties": "^6.24.1",
"babel-plugin-transform-custom-element-classes": "^0.1.0",
"babel-plugin-transform-es2015-classes": "^6.24.1",
"babel-plugin-transform-export-extensions": "^6.22.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"babel-preset-stage-0": "^6.24.1",
"esdoc": "^1.0.3",
"esdoc-ecmascript-proposal-plugin": "^1.0.0",
"esdoc-react-plugin": "^1.0.1",
"esdoc-standard-plugin": "^1.0.0",
"gh-pages": "^1.0.0",
"jest": "^23.6.0",
"pre-commit": "^1.2.2",
"react": "^16.3.2",
"react-dom": "^16.3.2",
"react-test-renderer": "^16.0.0",
"url-loader": "^1.1.1",
"watch-run": "^1.2.5",
"webpack": "^3.8.1",
"webpack-cli": "^2.0.4"
},
"author": "",
"homepage": "",
"license": "MIT",
"repository": "",
"keywords": [
"react-component"
]
}
sub-branch:
{
"name": "sub-branch",
"version": "0.0.1",
"description": "sub-branch",
"main": "lib/index.js",
"pre-commit": [
"test"
],
"peerDependencies": {
"antd": "3.6.5",
"classnames": "^2.2.6",
"prop-types": "^15.7.2",
"react": "16.8",
"react-dom": "^16.9.0",
"react-jss": "^8.6.1"
},
"scripts": {
"build": "rm -rf lib && NODE_ENV=production webpack --mode production --progress --config webpack.config.js ",
"docs:clean": "rm -rf docs/dist",
"docs:deploy": "yarn docs && gh-pages -d docs/dist",
"docs": "esdoc && yarn test:coverage && node docs/post-doc",
"test": "NODE_ENV=test jest",
"test:coverage": "jest --coverage",
"test:watch": "jest --watch",
"watch": "watch-run -p 'src/**' yarn build",
"storybook": "start-storybook -p 6006",
"storybook:watch": "concurrently \"yarn watch\" \"yarn storybook\""
},
"jest": {
"coverageDirectory": "docs/dist/coverage"
},
"dependencies": {
"#storybook/addon-storysource": "^5.2.0",
"antd": "^3.23.3",
"axios": "^0.16.2",
"chance": "^1.0.13",
"classnames": "^2.2.6",
"lodash": "^4.17.4",
"md5": "^2.2.1",
"prop-types": "^15.7.2",
"react": "16.8",
"react-dom": "16.8",
"react-jss": "^8.6.1",
"store": "^2.0.12"
},
"devDependencies": {
"#babel/cli": "^7.6.0",
"#babel/core": "^7.6.0",
"#babel/plugin-proposal-class-properties": "^7.5.5",
"#babel/plugin-proposal-export-default-from": "^7.5.2",
"#babel/plugin-syntax-export-extensions": "^7.0.0-beta.32",
"#babel/plugin-transform-classes": "^7.5.5",
"#babel/preset-env": "^7.6.0",
"#babel/preset-react": "^7.0.0",
"#storybook/addon-actions": "^5.2.0",
"#storybook/addon-notes": "^5.2.1",
"#storybook/react": "^5.2.0",
"babel-loader": "^8.0.6",
"esdoc": "^1.0.3",
"esdoc-ecmascript-proposal-plugin": "^1.0.0",
"esdoc-react-plugin": "^1.0.1",
"esdoc-standard-plugin": "^1.0.0",
"flexbox-react": "^4.4.0",
"gh-pages": "^1.0.0",
"jest": "^24.9.0",
"pre-commit": "^1.2.2",
"react-popper-tooltip": "^2.8.3",
"react-test-renderer": "^16.9.0",
"react-textarea-autosize": "^7.1.0",
"simplebar-react": "^1.3.0-alpha.1",
"storybook-addon-react-docgen": "^1.2.18",
"url-loader": "^1.1.1",
"watch-run": "^1.2.5",
"webpack": "^4.40.2",
"webpack-cli": "^3.3.8"
},
"author": "",
"homepage": "",
"license": "MIT",
"repository": "",
"keywords": [
"react-component"
]
}
on master-branch react is defined as "devDependency", but on sub-branch as "dependency". I belive on sub-branch it also should be defined as "devDependency"
I want to build my application but I got this error message:
ERROR in ./src/index.js
Module build failed: Error: Couldn't find preset "#babel/env" relative to directory "/Users/mohammadmehdi/Documents/Work/sevenapp"
at /Users/mohammadmehdi/Documents/Work/sevenapp/node_modules/babel-core/lib/transformation/file/options/option-manager.js:293:19
at Array.map (<anonymous>)
at OptionManager.resolvePresets (/Users/mohammadmehdi/Documents/Work/sevenapp/node_modules/babel-core/lib/transformation/file/options/option-manager.js:275:20)
at OptionManager.mergePresets (/Users/mohammadmehdi/Documents/Work/sevenapp/node_modules/babel-core/lib/transformation/file/options/option-manager.js:264:10)
at OptionManager.mergeOptions (/Users/mohammadmehdi/Documents/Work/sevenapp/node_modules/babel-core/lib/transformation/file/options/option-manager.js:249:14)
at OptionManager.init (/Users/mohammadmehdi/Documents/Work/sevenapp/node_modules/babel-core/lib/transformation/file/options/option-manager.js:368:12)
at File.initOptions (/Users/mohammadmehdi/Documents/Work/sevenapp/node_modules/babel-core/lib/transformation/file/index.js:212:65)
at new File (/Users/mohammadmehdi/Documents/Work/sevenapp/node_modules/babel-core/lib/transformation/file/index.js:135:24)
at Pipeline.transform (/Users/mohammadmehdi/Documents/Work/sevenapp/node_modules/babel-core/lib/transformation/pipeline.js:46:16)
at transpile (/Users/mohammadmehdi/Documents/Work/sevenapp/node_modules/babel-loader/lib/index.js:50:20)
at Object.module.exports (/Users/mohammadmehdi/Documents/Work/sevenapp/node_modules/babel-loader/lib/index.js:173:20)
my package.json:
{
"name": "sevenapp",
"version": "0.1.0",
"private": true,
"dependencies": {
"axios": "^0.18.0",
"babel-preset-react": "^6.24.1",
"bootstrap": "^4.0.0",
"html-webpack-plugin": "^3.2.0",
"jquery": "^3.3.1",
"rc-pagination": "^1.16.4",
"react": "^16.2.0",
"react-countup": "^3.0.3",
"react-dom": "^16.2.0",
"react-paginate": "^5.2.3",
"react-player": "^1.6.4",
"react-popup": "^0.9.3",
"react-redux": "^5.0.7",
"react-router": "^4.2.0",
"react-router-dom": "^4.2.2",
"react-scripts": "1.1.1",
"redux": "^4.0.0"
},
"scripts": {
"start": "webpack-dev-server --mode development --open",
"build": "webpack --mode production",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
},
"description": ":D",
"main": "index.js",
"devDependencies": {
"#babel/preset-env": "^7.0.0-beta.51",
"babel-core": "^6.26.0",
"babel-loader": "^7.1.4",
"babel-preset-env": "^1.7.0",
"babel-preset-stage-3": "^6.24.1",
"css-loader": "^0.28.11",
"jshint": "^2.9.5",
"jshint-loader": "^0.8.4",
"style-loader": "^0.21.0",
"url-loader": "^1.0.1",
"webpack": "^4.6.0",
"webpack-cli": "^2.0.15"
},
"author": "MM",
"license": "ISC"
}
my .babelrc file:
{
"presets": [
"#babel/env",
"#babel/preset-react",
[
"#babel/preset-stage-3",
{
"decoratorsLegacy": true
}
]
]
}
what is my wrong?
my OS is macOS highSierra version 10.13.3 node js version 10 react version 16.2
nodejs version 10
webpack version 4
npm version 6.0.1
but couldn't find preset "#babel/env"
How to solve this problem???
This is the problem with your presets definition in your .babelrc. The correct preset name is preset-env, not env.
Update your .babelrc from #babel/env to #babel/preset-env will solve the problem.
I would like to use a development server just like React does with npm start. But, with Preact when I use the same command it opens a static server and I have to restart it manually each time when I want to see some change in my project.
My package.json:
{
"name": "yagoazedias-site",
"version": "0.0.0",
"description": "Ready-to-go Preact starter project powered by webpack.",
"scripts": {
"dev": "cross-env NODE_ENV=development webpack-dev-server --inline --hot --progress",
"start": "serve build -s -c 1",
"prestart": "npm run build",
"build": "cross-env NODE_ENV=production webpack --progress",
"prebuild": "mkdirp build && ncp src/assets build/assets",
"test": "npm run -s lint && jest --coverage",
"test:watch": "npm run -s test -- --watch",
"lint": "eslint src test"
},
"keywords": [
"preact",
"boilerplate",
"webpack"
],
"license": "MIT",
"author": "Jason Miller <jason#developit.ca>",
"jest": {
"setupFiles": [
"./test/setup.js"
],
"testURL": "http://localhost:8080",
"moduleFileExtensions": [
"js",
"jsx"
],
"moduleDirectories": [
"node_modules"
],
"moduleNameMapper": {
"\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__mocks__/fileMock.js",
"\\.(css|less)$": "identity-obj-proxy",
"^react$": "preact-compat",
"^react-dom$": "preact-compat"
},
"collectCoverageFrom": [
"src/**/*.{js,jsx}"
]
},
"devDependencies": {
"autoprefixer": "^7.0.1",
"babel": "^6.5.2",
"babel-core": "^6.24.0",
"babel-eslint": "^7.2.2",
"babel-jest": "^20.0.0",
"babel-loader": "^7.0.0",
"babel-plugin-transform-decorators-legacy": "^1.3.4",
"babel-plugin-transform-react-jsx": "^6.8.0",
"babel-preset-es2015": "^6.24.0",
"babel-preset-stage-0": "^6.5.0",
"babel-register": "^6.24.0",
"babel-runtime": "^6.11.6",
"chai": "^4.0.2",
"copy-webpack-plugin": "^4.0.1",
"core-js": "^2.4.1",
"cross-env": "^5.0.1",
"css-loader": "^0.28.0",
"eslint": "^4.1.0",
"eslint-plugin-jest": "^20.0.0",
"eslint-plugin-react": "^7.0.0",
"extract-text-webpack-plugin": "^3.0.0",
"file-loader": "^0.11.1",
"html-webpack-plugin": "^2.28.0",
"identity-obj-proxy": "^3.0.0",
"jest": "^20.0.0",
"json-loader": "^0.5.4",
"less": "^2.7.1",
"less-loader": "^4.0.3",
"mkdirp": "^0.5.1",
"ncp": "^2.0.0",
"offline-plugin": "^4.7.0",
"postcss-loader": "^2.0.3",
"preact-jsx-chai": "^2.2.1",
"raw-loader": "^0.5.1",
"regenerator-runtime": "^0.10.3",
"replace-bundle-webpack-plugin": "^1.0.0",
"script-ext-html-webpack-plugin": "^1.3.4",
"sinon": "^2.1.0",
"sinon-chai": "^2.9.0",
"source-map-loader": "^0.2.1",
"style-loader": "^0.18.1",
"url-loader": "^0.6.1",
"webpack": "^3.0.0",
"webpack-dev-server": "^2.4.4"
},
"dependencies": {
"preact": "^8.1.0",
"preact-compat": "^3.15.0",
"preact-render-to-string": "^3.6.0",
"preact-router": "^2.5.1",
"promise-polyfill": "^6.0.2",
"proptypes": "^1.0.0",
"serve": "^6.0.0"
},
"main": "webpack.config.babel.js",
"directories": {
"test": "test"
}
}
Relevant links:
https://preactjs.com/
https://github.com/developit/preact
Use the dev script instead?
$ npm run dev
Your start script is doing serve build -s -c 1. React CRA's start script will boot up a webpack dev server which is what your dev script is doing.
npm start is short for npm run start. npm run <command> is just a small proxy that looks up the different commands you have listed in package.json.
Read more about npm scripts here.
I've been struggling with a weird bug. I'm trying to install project dependencies on my server with a simple npm i but it does not create any node_modules folder.
Also, I've tried all of the probable solutions like npm init in order to make a new package.json file or I deleted package-lock.json file.
However, the package.json file works smoothly on my local environment.
here is my package.json file:
{
"name": "expressmvc",
"version": "1.0.0",
"description": "Webpack and Express backend boilerplate Edit",
"main": "app.babel.js",
"dependencies": {
"axios": "^0.16.2",
"babel-runtime": "^6.23.0",
"bcrypt": "^1.0.3",
"bluebird": "^3.5.0",
"body-parser": "~1.16.0",
"connect-mongo": "^1.3.2",
"cookie-parser": "~1.4.3",
"cron": "^1.3.0",
"debug": "~2.6.0",
"express": "~4.14.1",
"express-session": "^1.15.5",
"gmail-api-sync": "^1.2.8",
"gmail-sender-oauth": "^1.0.5",
"googleapis": "^21.3.0",
"moment": "^2.18.1",
"mongoose": "^4.9.2",
"morgan": "~1.7.0",
"node-cron": "^1.2.1",
"nodemon": "^1.11.0",
"passport": "^0.4.0",
"passport-google-oauth20": "^1.0.0",
"pug": "~2.0.0-beta10",
"serve-favicon": "~2.3.2"
},
"devDependencies": {
"babel-cli": "^6.24.0",
"babel-core": "^6.26.0",
"babel-eslint": "^8.0.0",
"babel-loader": "^7.1.2",
"babel-polyfill": "^6.26.0",
"babel-preset-env": "^1.6.0",
"babel-preset-es2015": "^6.24.0",
"babel-preset-es2016": "^6.22.0",
"babel-preset-stage-2": "^6.24.1",
"babel-register": "^6.26.0",
"mocha": "^3.5.0",
"prettier-eslint": "^8.1.0",
"webpack": "^3.5.5"
},
"scripts": {
"test": "mocha 'app/**/*.test.js' --compilers js:babel-core/register --recursive",
"start": "NODE_ENV=production node ./build/backend.js",
"run-dev": "DEBUG=express:* nodemon ./app.js --exec babel-node",
"build": "rm -f -r build && NODE_ENV=production webpack --config ./webpack.config.js --progress --profile --colors"
},
"repository": {
"type": "git",
"url": "git+https://github.com/PedramMarandi/express-js-boilerplate.git"
},
"keywords": [
"expressjs",
"boilerplate",
"es6",
"javascript",
"MVC"
],
"author": "Pedram Marandi",
"license": "ISC",
"bugs": {
"url": "https://github.com/PedramMarandi/express-js-boilerplate/issues"
},
"homepage": "https://github.com/PedramMarandi/express-js-boilerplate#readme"
}
NPM version 3.10.10
Node version 6.10.3
This issue is mainly due to permission problem on Linux machine . You can try after changing the write permission of your deployment folder using this command
sudo chmod -R 777 /home/nodejsAppFloder
I am using React 15.6.1 and trying to insert some Microdata into my text:
<div itemScope itemType="http://schema.org/VideoGame">
But I keep seeing the following warning in the console:
Warning: Unknown DOM property itemscope. Did you mean itemScope?
According to this, it should work.
Anyone could help me and figure out what is wrong?
Is my version of React too old or do I have to define a flag somewhere to get it to work ?
This is my package.json: (I am using npm start to debug, and npm run build to deploy)
{
"name": "P",
"version": "0.1.0",
"description": ".",
"private": true,
"devDependencies": {
"babel-plugin-react-html-attrs": "^2.0.0",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-polyfill": "^6.23.0",
"babel-preset-stage-2": "^6.24.1",
"babili-webpack-plugin": "^0.1.2",
"compression-webpack-plugin": "^1.0.0",
"react-hot-loader": "^1.3.1",
"react-scripts": "1.0.10",
"serve-favicon": "^2.4.3",
"webpack-dev-server": "^2.5.1",
"webpack-hot-middleware": "^2.18.2"
},
"dependencies": {
"axios": "^0.16.2",
"babel-core": "^6.25.0",
"babel-loader": "^7.1.1",
"babel-plugin-transform-class-properties": "^6.24.1",
"babel-plugin-transform-decorators-legacy": "^1.3.4",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-polyfill": "^6.23.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"babel-preset-stage-0": "^6.24.1",
"babel-preset-stage-2": "^6.3.13",
"circular-dependency-plugin": "^3.0.0",
"classnames": "^2.2.5",
"clean-webpack-plugin": "^0.1.16",
"copy-webpack-plugin": "^4.0.1",
"css-loader": "^0.28.4",
"dotenv": "^4.0.0",
"es6-promise": "^4.1.1",
"file-loader": "^0.11.2",
"firebase": "^4.1.3",
"history": "^4.6.3",
"immutable": "^3.8.1",
"invariant": "^2.2.2",
"isomorphic-fetch": "^2.2.1",
"jsdom": "^11.1.0",
"jsonwebtoken": "^7.4.1",
"konva": "^1.6.3",
"less-loader": "^4.0.5",
"react": "^15.6.1",
"react-addons-css-transition-group": "^15.6.0",
"react-async-script": "^0.9.1",
"react-async-script-loader": "^0.3.0",
"react-bootstrap": "^0.31.1",
"react-dnd": "^2.4.0",
"react-dnd-html5-backend": "^2.4.1",
"react-dom": "^15.6.1",
"react-fontawesome": "^1.6.1",
"react-ga": "^2.2.0",
"react-google-recaptcha": "^0.9.6",
"react-gravatar": "^2.6.3",
"react-helmet": "^5.1.3",
"react-input-range": "^1.2.1",
"react-konva": "^1.1.3",
"react-modal": "^2.2.2",
"react-page-click": "^4.0.1",
"react-recaptcha": "^2.3.2",
"react-redux": "^5.0.5",
"react-router": "^3.0.2",
"react-router-redux": "^4.0.0",
"redux": "^3.7.2",
"redux-form": "^7.0.1",
"redux-logger": "^2.3.2",
"redux-thunk": "^2.2.0",
"rimraf": "^2.6.1",
"single-module-instance-webpack-plugin": "0.0.4",
"style-loader": "^0.18.2",
"superagent": "^3.5.2",
"webpack": "^3.3.0",
"webpack-bundle-analyzer": "^2.9.0",
"xml2js": "^0.4.17",
"xmldom": "^0.1.27",
"xpath": "0.0.24"
},
"scripts": {
"start": "node devServer.js --progress --verbose",
"clean": "rimraf ./dist",
"dev": "webpack -d --watch --progress --display-error-details --display-reasons",
"start1": "webpack-dev-server --config ./webpack.config.comphotdeploy -d --progress --colors --host localhost --port 28080 --hot --inline --content-base src",
"builddev": "webpack -d --progress --display-error-details --display-reasons",
"build": "webpack -p --progress --verbose",
"dist": "rimraf ./dist&&webpack -d --display-error-details --display-reasons",
"start-react": "SET PORT=9999&&SET DEVTOOL=source-map&&react-scripts start",
"build-react": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "./node_modules/react-scripts/config/eslint.js"
}
}
Finally found the problem, one of the itemScope was declared as itemscope.
I did not see it because it was outside of the editor window as part of a long string.