We Keep Coding

craco don't work with react-scripts#^5.0.1

it shows me this error:
yarn start  ✔  27s 
yarn run v1.22.19
$ craco start
Failed to compile.
For the selected environment is no default script chunk format available:
JSONP Array push can be chosen when 'document' or 'importScripts' is available.
CommonJs exports can be chosen when 'require' or node builtins are available.
Make sure that your 'browserslist' includes only platforms that support these features or select an appropriate 'target' to allow selecting a chunk format by default. Alternatively, specify the 'output.chunkFormat' directly.
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
And this is my Package.json
{
"name": "fly-with-zoki",
"version": "1.10.0",
"private": true,
"main": "dist/index.js",
"dependencies": {
"#babel/helper-define-polyfill-provider": "^0.3.2",
"#date-io/date-fns": "^1.3.13",
"#emotion/react": "^11.10.5",
"#emotion/styled": "^11.10.5",
"#fontsource/roboto": "^4.5.8",
"#material-ui/core": "^4.12.4",
"#material-ui/icons": "4.11.2",
"#material-ui/lab": "^4.0.0-alpha.61",
"#material-ui/pickers": "^3.3.10",
"#mui/icons-material": "^5.10.16",
"#mui/lab": "^5.0.0-alpha.114",
"#mui/material": "^5.10.17",
"#mui/styled-engine-sc": "^5.10.16",
"#reduxjs/toolkit": "^1.8.0",
"#stripe/react-stripe-js": "^1.8.0-0",
"#stripe/stripe-js": "^1.29.0",
"#types/dotenv": "^8.2.0",
"amadeus": "^7.1.0",
"axios": "^0.27.1",
"bootstrap": "^4.6.1",
"chartist": "0.10.1",
"classnames": "2.3.1",
"date-fns": "^2.28.0",
"dom-lib": "^3.1.5",
"font-awesome": "^4.7.0",
"history": "5.0.0",
"jquery": "^3.6.0",
"json-schema-to-typescript": "^11.0.2",
"lib": "^4.3.3",
"material-ui-dropzone": "^3.5.0",
"moment": "^2.29.3",
"node": "^16.13.0",
"notistack": "^1.0.10",
"perfect-scrollbar": "1.5.1",
"popper.js": "^1.16.1",
"prop-types": "15.7.2",
"react": "^18.2.0",
"react-chartist": "0.14.4",
"react-dom": "17.0.2",
"react-image-gallery": "^1.2.8",
"react-moment": "^1.1.2",
"react-redux": "^7.2.8",
"react-responsive-carousel": "^3.2.23",
"react-router-dom": "5.2.0",
"react-scripts": "^5.0.1",
"react-select": "^5.3.2",
"react-swipeable-views": "^0.14.0",
"redux": "^4.1.2",
"redux-devtools-extension": "^2.13.9",
"redux-persist": "^6.0.0",
"redux-thunk": "^2.4.1",
"styled-components": "^5.3.6"
},
"scripts": {
"lint": "eslint src",
"dev": "cross-env NODE_OPTIONS= next dev",
"start": "craco start",
"build": "craco build",
"test": "craco test",
"eject": "react-scripts eject",
"install:clean": "rm -rf node_modules/ && rm -rf package-lock.json && npm install && npm start",
"lint:check": "eslint . --ext=js,jsx; exit 0",
"lint:fix": "eslint . --ext=js,jsx --fix; exit 0",
"build-package-css": "cp src/assets/css/material-dashboard-react.css dist/material-dashboard-react.css",
"build-package": "npm run build-package-css && babel src --out-dir dist"
},
"keywords": [],
"optionalDependencies": {
"#babel/core": "7.14.0",
"typescript": "4.2.4"
},
"devDependencies": {
"#babel/eslint-parser": "^7.19.1",
"#babel/preset-react": "^7.18.6",
"#craco/craco": "^7.0.0",
"autoprefixer": "^10.4.13",
"eslint-plugin-react": "^7.31.11",
"eslint-plugin-react-hooks": "^4.6.0",
"gulp": "4.0.2",
"gulp-append-prepend": "1.0.9",
"postcss": "^8.4.21",
"react-error-overlay": "6.0.9",
"tailwindcss": "npm:#tailwindcss/postcss7-compat#^2.2.17"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": []
},
"resolutions": {
"react-error-overlay": "6.0.9"
}
}
I have tried to upgrade my react-scripts by using
npm ugdate react-scripts
npm upgrade react-scripts
yarn update react-scripts
yarn upgrade react-scripts
But no changes were applied :(

How to read DraftJS state from localStorage?

I have an issue with reading Draft.js raw content from localStorage.
I would like to use previously stored rawContent as my initialState for the reducer.
I think convertFromRaw function is my problem.
I does crush silently (does not log to the console) and I don't know how to troubleshoot this.
I'm persisting Draft.js raw content in localStorage:
const contentState = editorState.getCurrentContent();
const rawContent = convertToRaw(contentState);
window.localStorage.setItem(
"rawContent",
JSON.stringify(convertToRaw(rawContent))
);
And then wen I'm trying to restore it I'm facing my problem.
I think convertFromRaw.
const rawContent = window.localStorage.getItem("rawContent");
if (rawContent) {
this.state.editorState = EditorState.createWithContent(
convertFromRaw(JSON.parse(rawContent))
);
} else {
this.state.editorState = EditorState.createEmpty();
}
My temporary solution to this was to use a third party converter.
In my case I used stateToMarkdown / stateFromMarkdown from draft-js-export-markdown / draft-js-import-markdown
My package.json
{
"name": "react-boilerplate",
"version": "3.7.0",
"description": "A highly scalable, offline-first foundation with the best DX and a focus on performance and best practices",
"repository": {
"type": "git",
"url": "git://github.com/react-boilerplate/react-boilerplate.git"
},
"engines": {
"npm": ">=5",
"node": ">=8.10.0"
},
"author": "Max Stoiber",
"license": "MIT",
"scripts": {
"analyze:clean": "rimraf stats.json",
"preanalyze": "npm run analyze:clean",
"analyze": "node ./internals/scripts/analyze.js",
"extract-intl": "node ./internals/scripts/extract-intl.js",
"npmcheckversion": "node ./internals/scripts/npmcheckversion.js",
"preinstall": "npm run npmcheckversion",
"prebuild": "npm run build:clean",
"build": "cross-env NODE_ENV=production webpack --config internals/webpack/webpack.prod.babel.js --color -p --progress --hide-modules --display-optimization-bailout",
"build:clean": "rimraf ./build",
"start": "cross-env NODE_ENV=development node server",
"start:tunnel": "cross-env NODE_ENV=development ENABLE_TUNNEL=true node server",
"start:production": "npm run test && npm run build && npm run start:prod",
"start:prod": "cross-env NODE_ENV=production node server",
"presetup": "npm i chalk shelljs",
"setup": "node ./internals/scripts/setup.js",
"clean": "shjs ./internals/scripts/clean.js",
"clean:all": "npm run analyze:clean && npm run test:clean && npm run build:clean",
"generate": "plop --plopfile internals/generators/index.js",
"lint": "npm run lint:js",
"lint:css": "stylelint './app/**/*.js'",
"lint:eslint": "eslint --ignore-path .gitignore --ignore-pattern internals/scripts",
"lint:eslint:fix": "eslint --ignore-path .gitignore --ignore-pattern internals/scripts --fix",
"lint:js": "npm run lint:eslint -- . ",
"lint:staged": "lint-staged",
"pretest": "npm run test:clean && npm run lint",
"test:clean": "rimraf ./coverage",
"test": "cross-env NODE_ENV=test jest --coverage",
"test:watch": "cross-env NODE_ENV=test jest --watchAll",
"coveralls": "cat ./coverage/lcov.info | coveralls",
"prettify": "prettier --write"
},
"jest": {
"collectCoverageFrom": [
"app/**/*.{js,jsx}",
"!app/**/*.test.{js,jsx}",
"!app/app.js",
"!app/global-styles.js",
"!app/*/*/Loadable.{js,jsx}"
],
"coverageThreshold": {
"global": {
"statements": 50,
"branches": 40,
"functions": 50,
"lines": 50
}
},
"moduleDirectories": [
"node_modules",
"app"
],
"moduleNameMapper": {
".*\\.(css|less|styl|scss|sass)$": "<rootDir>/internals/mocks/cssModule.js",
".*\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/internals/mocks/image.js"
},
"setupTestFrameworkScriptFile": "<rootDir>/internals/testing/test-bundler.js",
"testRegex": "tests/.*\\.test\\.js$"
},
"lint-staged": {
"*.js": [
"npm run lint:eslint:fix",
"git add --force"
],
"*.json": [
"prettier --write",
"git add --force"
]
},
"pre-commit": "lint:staged",
"resolutions": {
"babel-core": "7.0.0-bridge.0"
},
"dependencies": {
"#babel/polyfill": "7.0.0",
"antd": "^3.13.1",
"axios": "^0.18.0",
"chalk": "2.4.1",
"compression": "1.7.3",
"connected-react-router": "4.5.0",
"cross-env": "5.2.0",
"draft-js": "^0.10.5",
"draft-js-export-html": "^1.3.3",
"draft-js-export-markdown": "^1.3.3",
"draft-js-import-html": "^1.3.3",
"draft-js-import-markdown": "^1.3.3",
"express": "4.16.4",
"fontfaceobserver": "2.0.13",
"history": "4.7.2",
"hoist-non-react-statics": "3.0.1",
"immutable": "3.8.2",
"intl": "1.2.5",
"invariant": "2.2.4",
"ip": "1.1.5",
"loadable-components": "2.2.3",
"lodash": "4.17.11",
"minimist": "1.2.0",
"prop-types": "15.6.2",
"react": "16.6.0",
"react-dom": "16.6.0",
"react-draft-wysiwyg": "^1.13.2",
"react-flexview": "^4.0.3",
"react-helmet": "5.2.0",
"react-intl": "2.7.2",
"react-logger-lib": "^1.0.5",
"react-rbac-guard": "0.0.3",
"react-redux": "5.0.7",
"react-router-dom": "4.3.1",
"redux": "4.0.1",
"redux-immutable": "4.0.0",
"redux-saga": "0.16.2",
"reselect": "4.0.0",
"sanitize.css": "4.1.0",
"styled-components": "4.0.2",
"warning": "4.0.2"
},
"devDependencies": {
"#babel/cli": "7.1.2",
"#babel/core": "7.1.2",
"#babel/plugin-proposal-class-properties": "7.1.0",
"#babel/plugin-syntax-dynamic-import": "7.0.0",
"#babel/plugin-transform-modules-commonjs": "7.1.0",
"#babel/plugin-transform-react-constant-elements": "7.0.0",
"#babel/plugin-transform-react-inline-elements": "7.0.0",
"#babel/preset-env": "7.1.0",
"#babel/preset-react": "7.0.0",
"#babel/register": "7.0.0",
"add-asset-html-webpack-plugin": "3.1.1",
"babel-core": "7.0.0-bridge.0",
"babel-eslint": "10.0.1",
"babel-loader": "8.0.4",
"babel-plugin-dynamic-import-node": "2.2.0",
"babel-plugin-import": "^1.11.0",
"babel-plugin-lodash": "3.3.4",
"babel-plugin-react-intl": "3.0.1",
"babel-plugin-react-transform": "3.0.0",
"babel-plugin-styled-components": "1.8.0",
"babel-plugin-transform-react-remove-prop-types": "0.4.19",
"circular-dependency-plugin": "5.0.2",
"compare-versions": "3.4.0",
"compression-webpack-plugin": "2.0.0",
"coveralls": "3.0.2",
"css-loader": "1.0.0",
"enzyme": "3.7.0",
"enzyme-adapter-react-16": "1.6.0",
"enzyme-to-json": "3.3.4",
"eslint": "5.7.0",
"eslint-config-airbnb": "17.1.0",
"eslint-config-airbnb-base": "13.1.0",
"eslint-config-prettier": "3.1.0",
"eslint-import-resolver-webpack": "0.10.1",
"eslint-plugin-import": "2.14.0",
"eslint-plugin-jsx-a11y": "6.1.2",
"eslint-plugin-prettier": "3.0.0",
"eslint-plugin-react": "7.11.1",
"eslint-plugin-redux-saga": "0.9.0",
"file-loader": "2.0.0",
"html-loader": "0.5.5",
"html-webpack-plugin": "3.2.0",
"image-webpack-loader": "^4.6.0",
"imports-loader": "0.8.0",
"jest-cli": "^24.5.0",
"jest-styled-components": "6.2.2",
"less": "^3.9.0",
"less-loader": "^4.1.0",
"lint-staged": "7.3.0",
"ngrok": "3.1.0",
"node-plop": "0.16.0",
"null-loader": "0.1.1",
"offline-plugin": "5.0.5",
"plop": "2.1.0",
"pre-commit": "1.2.2",
"prettier": "1.14.3",
"react-app-polyfill": "0.1.3",
"react-test-renderer": "16.6.0",
"rimraf": "2.6.2",
"shelljs": "0.8.2",
"style-loader": "0.23.1",
"stylelint": "^9.10.1",
"stylelint-config-recommended": "2.1.0",
"stylelint-config-styled-components": "0.1.1",
"stylelint-processor-styled-components": "1.5.0",
"svg-url-loader": "2.3.2",
"terser-webpack-plugin": "1.1.0",
"url-loader": "1.1.2",
"webpack": "4.23.1",
"webpack-cli": "3.1.2",
"webpack-dev-middleware": "3.4.0",
"webpack-hot-middleware": "2.24.3 ",
"webpack-pwa-manifest": "3.7.1",
"whatwg-fetch": "3.0.0"
}
}

Your code looks correct generally. But as I can see you are using convertToRaw twice.
const contentState = editorState.getCurrentContent();
const rawContent = convertToRaw(contentState); // <== convert to raw first time
window.localStorage.setItem(
"rawContent",
JSON.stringify(convertToRaw(rawContent)) // <== convert to raw again
);
Try to rewrite JSON.stringify(convertToRaw(rawContent)) to JSON.stringify(rawContent), I think it should fix your problem.
If that doesn't help you can check this jsFiddle which shows the common pattern how Draft.js works with local storage - https://jsfiddle.net/x2gsp6ju/4/
In this demo, you can see simple editor component, when you click on SAVE RAW CONTENT TO LOCAL STORAGE, we save current editor content as a string to local storage. We use convertToRaw and JSON.stringify for it:
saveRaw = () => {
var contentRaw = convertToRaw(this.state.editorState.getCurrentContent());
localStorage.setItem('draftRaw', JSON.stringify(contentRaw));
}
If after that you reload the page, your editor will be initialized with the content and styles what you save. Becouse of in constructor we read the appropriate local storage property, and with JSON.parse, convertFromRaw and createWithContent methods initialize editor with the previously stored content.
constructor(props) {
super(props);
let initialEditorState = null;
const storeRaw = localStorage.getItem('draftRaw');
if (storeRaw) {
const rawContentFromStore = convertFromRaw(JSON.parse(storeRaw));
initialEditorState = EditorState.createWithContent(rawContentFromStore);
} else {
initialEditorState = EditorState.createEmpty();
}
this.state = {
editorState: initialEditorState
};
}

npm install says cannot find file

I am cloning a repo and get the following error when running npm install
ENOENT:no such file or directory, rename '/Users/waston/Desktop/hm/STEMuli_MaterialUI/node_modules/.staging/client-6b05b6f7/node_modules/#babel/helper-module-imports' -> '/Users/waston/Desktop/hm/STEMuli_MaterialUI/node_modules/.staging/#babel/helper-module-imports-b86e8d76'
I thought maybe if I do npm install --save-dev #babel/helper-module-imports that may fix it, but even doing that gives me the same error.
package.json(server)
"dependencies": {
"azure-storage": "^2.10.2",
"bcryptjs": "^2.4.3",
"body-parser": "^1.18.2",
"cd": "^0.3.3",
"client": "file:client",
"concurrently": "^3.5.1",
"express": "^4.16.3",
"gravatar": "^1.6.0",
"install": "^0.12.2",
"into-stream": "^4.0.0",
"jsonwebtoken": "^8.2.0",
"mongoose": "^5.0.12",
"multer": "^1.4.1",
"multer-azure-storage": "^0.2.0",
"node-sass": "^4.10.0",
"npm": "^6.4.1",
"passport": "^0.4.0",
"passport-jwt": "^4.0.0",
"validator": "^9.4.1"
},
"scripts": {
"client-install": "npm install --prefix client",
"start": "node server.js",
"server": "nodemon server.js",
"client": "npm start --prefix client",
"dev": "concurrently \"npm run server\" \"npm run client\"",
"heroku-postbuild": "NPM_CONFIG_PRODUCTION=false npm install --prefix client && npm run build --prefix client"
}
Client package.json
"
dependencies": {
"#babel/runtime": "7.0.0-beta.55",
"#material-ui/core": "1.5.0",
"#material-ui/icons": "2.0.2",
"#types/googlemaps": "3.30.11",
"#types/markerclustererplus": "2.1.33",
"ajv": "6.5.2",
"axios": "^0.18.0",
"blueimp-file-upload": "^9.22.0",
"chartist": "0.10.1",
"cloudinary-jquery-file-upload": "^2.5.0",
"cloudinary-react": "^1.0.6",
"fullcalendar": "^3.0.0",
"fullcalendar-reactwrapper": "^1.0.7",
"fullcalendar-reactwrapper-scheduler": "^1.0.7",
"history": "4.7.2",
"install": "^0.12.2",
"jquery": "^3.3.1",
"jwt-decode": "^2.2.0",
"material-design-icons": "^3.0.1",
"moment": "^2.22.2",
"moment-timezone": "^0.5.21",
"node-sass-chokidar": "1.3.3",
"npm": "^6.4.1",
"npm-run-all": "4.1.3",
"perfect-scrollbar": "1.4.0",
"prop-types": "15.6.2",
"react": "^16.3.1",
"react-big-calendar": "^0.19.2",
"react-bootstrap": "^0.32.1",
"react-bootstrap-sweetalert": "4.4.1",
"react-chartist": "0.13.1",
"react-chat-widget": "^2.1.4-1",
"react-datetime": "2.15.0",
"react-dnd": "^5.0.0",
"react-dnd-html5-backend": "^5.0.1",
"react-dom": "^16.3.1",
"react-file-viewer": "^0.5.0",
"react-google-maps": "9.4.5",
"react-icons": "^3.0.5",
"react-jvectormap": "0.0.3",
"react-material-icons": "^1.0.3",
"react-moment": "^0.7.0",
"react-nouislider": "2.0.1",
"react-parallax": "^2.0.0",
"react-phone-number-input": "^2.2.14",
"react-player": "^1.6.6",
"react-redux": "^5.0.7",
"react-router-dom": "^4.2.2",
"react-scripts": "1.1.4",
"react-select": "^2.1.1",
"react-slick": "0.23.1",
"react-stepzilla": "^4.8.0",
"react-svg-icons": "^0.3.0",
"react-swipeable-views": "0.12.16",
"react-table": "6.8.6",
"react-tagsinput": "3.19.0",
"redux": "^3.7.2",
"redux-thunk": "^2.2.0",
"socket.io-client": "^2.1.1",
"video-react": "^0.13.0"
},
"devDependencies": {
"babel-cli": "^6.26.0",
"babel-plugin-module-resolver": "^3.1.1",
"babel-plugin-import-rename": "^1.0.1",
"babel-plugin-transform-object-rest-spread": "^6.26.0",
"babel-plugin-transform-react-jsx": "^6.24.1",
"babel-preset-es2015": "^6.24.1"
},
"optionalDependencies": {
"babel-eslint": "^7.2.3",
"eslint": "^4.19.1",
"eslint-config-prettier": "^2.9.0",
"eslint-plugin-prettier": "^2.6.2",
"eslint-plugin-react": "^7.10.0",
"prettier": "^1.13.7"
},
"scripts": {
"build-css": "node-sass-chokidar --include-path ./src --include-path ./node_modules src/ -o src/",
"watch-css": "npm run build-css && node-sass-chokidar --include-path ./src --include-path ./node_modules src/ -o src/ --watch --recursive",
"start-js": "react-scripts start",
"start": "npm-run-all -p watch-css start-js",
"build": "npm run build-css && react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject",
"lint:check": "eslint . --ext=js,jsx; exit 0",
"lint:fix": "eslint . --ext=js,jsx --fix; exit 0",
"install:clean": "rm -rf node_modules/ && rm -rf package-lock.json && npm install && npm start",
"build-package-css": "node-sass-chokidar src/materialComponents/assets/scss/material-kit-react.scss dist/material-kit-react.css",
"build-package": "npm run build-package-css && babel src --out-dir dist",
"deploy": "npm run build"
},

Delete your package-lock.json and the node_modules folder, then run npm install

Non deterministic behavior on dependencies - nodejs

I would solve a warning: when I run yarn install all dependencies are installed but I receive this warning:
warning Pattern ["esprima-fb#~3001.0001.0000-dev-harmony-fb"] is
trying to unpack in the same destination
"/Users/Me/Library/Caches/Yarn/v1/npm-esprima-fb-3001.1.0-dev-harmony-fb-b77d37abcd38ea0b77426bb8bc2922ce6b426411"
as pattern ["esprima-fb#~3001.1.0-dev-harmony-fb"]. This could result
in a non deterministic behavior, skipping.
If I delete node_modules folder and I run yarn install I don't receive the warning, when I re-execute yarn install I receive it again.
I suppose the problem is in yarn-lock file.
package.json
{
"name": "n1",
"version": "1.0.0",
"description": "none ",
"author": "none",
"main": "src/index.js",
"private": false,
"engines": {
"node": ">=7.6",
"yarn": "*"
},
"scripts": {
"precommit": "yarn lint",
"prestart": "yarn docs",
"start": "cross-env NODE_ENV=production pm2 start ./src/index.js",
"dev": "nodemon ./src/index.js",
"lint": "eslint **/*.js --ignore-path .gitignore --ignore-pattern internals/scripts",
"lint:fix": "yarn lint -- --fix",
"lint:watch": "yarn lint -- --watch",
"test": "cross-env NODE_ENV=test nyc --reporter=html --reporter=text mocha --timeout 20000 --recursive src/api/tests",
"test:unit": "cross-env NODE_ENV=test mocha src/api/tests/unit",
"test:integration": "cross-env NODE_ENV=test mocha --timeout 20000 src/api/tests/integration",
"test:watch": "cross-env NODE_ENV=test mocha --watch src/api/tests/unit",
"coverage": "nyc report --reporter=text-lcov | coveralls",
"postcoverage": "opn coverage/lcov-report/index.html",
"validate": "yarn lint && yarn test",
"postpublish": "git push --tags",
"docs": "apidoc -i src -o docs",
"postdocs": "opn docs/index.html"
},
"dependencies": {
"bcryptjs": "^2.4.3",
"blubird": "^0.0.1-security",
"bluebird": "^3.5.1",
"body-parser": "^1.18.2",
"chalk": "^2.3.0",
"color": "^2.0.1",
"compression": "^1.7.1",
"cookie-parser": "^1.4.3",
"cors": "^2.8.4",
"cross-env": "^5.1.3",
"dotenv-safe": "^4.0.4",
"espree": "^3.5.2",
"esprima": "^4.0.0",
"express": "^4.16.2",
"express-validation": "^1.0.2",
"express-winston": "^2.4.0",
"helmet": "^3.9.0",
"http-status": "^1.0.1",
"joi": "^10.6.0",
"jwt-simple": "^0.5.1",
"lodash": "^4.17.4",
"method-override": "^2.3.10",
"moment": "^2.20.1",
"moment-timezone": "^0.5.14",
"mongoose": "^4.13.7",
"morgan": "^1.9.0",
"morgan-body": "^2.0.2",
"mysql": "^2.15.0",
"mysql2": "^1.5.1",
"nedb": "^1.8.0",
"node-geocoder": "^3.21.1",
"only": "0.0.2",
"passport": "^0.4.0",
"passport-jwt": "^3.0.1",
"pm2": "^2.9.1",
"readline-sync": "^1.4.7",
"request-promise": "^4.2.2",
"sequelize": "^4.28.6",
"serve-favicon": "^2.4.5",
"winston": "^2.4.0",
"yarn": "^1.3.2"
},
"devDependencies": {
"apidoc": "^0.17.5",
"chai": "^4.1.2",
"chai-as-promised": "^7.1.1",
"coveralls": "^2.13.1",
"eslint": "^4.13.1",
"eslint-config-airbnb-base": "^12.1.0",
"eslint-plugin-import": "^2.8.0",
"husky": "^0.14.3",
"mocha": "^3.5.3",
"nodemon": "^1.14.1",
"nyc": "^11.4.1",
"opn-cli": "^3.1.0",
"sinon": "^3.3.0",
"sinon-chai": "^2.14.0",
"supertest": "^3.0.0"
},
"license": "MIT"
}
yarn-lock
https://pastebin.com/vTrLHWff

Try removing both node_modules and yarn.lock:
rm -rf node_modules and rm yarn.lock
And then try running:
npm run rebuild which seem to help to resolve the issue.

Module build failed: ReferenceError: [BABEL] Unknown option: base.stage

I upgraded my react/webpack app using ncu and it updated babelify to 7.2.0 (and hence babel to 6.0.0). Now I am getting the following error:
ERROR in ./app/main.js
Module build failed: ReferenceError: [BABEL] /home/ben/simple-webpack-react-starter/app/main.js: Unknown option: base.stage
Ive looked through a bunch of stack overflow posts with the same or similar errors and have done everything suggested. I'm pretty stuck! Please help. Here are the relevant files i think:
My package.json file:
{
"name": "MODA",
"version": "1.0.0",
"description": "Online Annotations",
"main": "server/index.js",
"scripts": {
"dev-server": "nodemon server/index.js --watch server",
"dev-web": "webpack-dev-server --config ./webpack-dev.config.js --hot --progress --colors --content-base build",
"dev": "nodemon server/index.js --watch server & webpack-dev-server --config ./webpack-dev.config.js --hot --progress --colors --content-base build",
"build": "rm build/*; webpack --config ./webpack-prod.config.js --progress --colors",
"start": "node server/index.js",
"test": "karma start",
"testing": "karma start --single-run=false"
},
"license": "MIT",
"dependencies": {
"compression": "^1.5.0",
"cors": "^2.7.1",
"express": "^4.13.3",
"body-parser": "*",
"ejs": "*",
"aws-sdk": "*"
},
"engines": {
"node": "5.0.0",
"npm": "2.14.9"
},
"devDependencies": {
"autoprefixer-loader": "^3.2.0",
"babel-core": "^6.2.1",
"babel-loader": "^6.2.0",
"babel-preset-es2015": "^6.1.18",
"babel-preset-react": "^6.3.13",
"babel-preset-stage-0": "^6.0.15",
"babelify": "^7.2.0",
"bootstrap": "^3.3.5",
"css-loader": "^0.23.1",
"expect": "^1.6.0",
"file-loader": "^0.8.4",
"html-webpack-plugin": "^2.8.1",
"image-webpack-loader": "^1.6.1",
"jquery": "^2.1.4",
"json-fs": "^1.1.1",
"karma": "^0.13.19",
"karma-chrome-launcher": "^0.2.2",
"karma-cli": "0.1.2",
"karma-mocha": "^0.2.1",
"karma-sinon": "^1.0.4",
"karma-sourcemap-loader": "^0.3.5",
"karma-webpack": "^1.5.1",
"mocha": "^2.2.5",
"node-libs-browser": "^1.0.0",
"node-sass": "^3.2.0",
"nodemon": "^1.3.7",
"react": "^0.14.7",
"react-dom": "^0.14.7",
"react-draggable": "^1.1.3",
"react-hot-loader": "^1.2.7",
"react-resizable-box": "^0.1.7",
"sass-loader": "^3.1.2",
"sinon": "^1.15.3",
"style-loader": "^0.13.0",
"webpack": "^1.9.11",
"webpack-dev-server": "^1.9.0"
}
}
And the relevant part of my webpack-common.config
{
test: /\.jsx?$/,
exclude: /(node_modules | bower_components)/,
loader: "babel",
query: {
presets:['es2015','stage-0', "react"]
},
},

I had this problem and I fixed it by eliminating the query in the config file and instead making a .babelrc file at project root like so:
{
"passPerPreset": true,
"presets": [
{
"plugins": [
"./build/babelRelayPlugin"
]
},
"react",
"es2015",
"stage-0"
]
}