Develop Reference

After npm eject in CRA environment variables receive undefined

I started new project with npx create-react-app and after that npm eject. But when everything completed, in the beginning of each file I get this eslint error:
Parsing error: [BABEL] /Users/admin/Desktop/Work/practise/todo-blockchain/scripts/start.js: Using `babel-preset-react-app` requires that you specify `NODE_ENV` or `BABEL_ENV` environment variables. Valid values are "development", "test", and "production". Instead, received: undefined. (While processing: "/Users/admin/Desktop/Work/practise/todo-blockchain/node_modules/babel-preset-react-app/index.js")
I've surfed the net a lot but did not found any answers. I tried to change the babel presets, add plugins but nothing helped.
I'm using MacOS and looking forward to your help
This is my package.json:
{
"name": "todo-blockchain",
"version": "0.1.0",
"private": true,
"dependencies": {
"#babel/core": "^7.16.0",
"#pmmmwh/react-refresh-webpack-plugin": "^0.5.3",
"#svgr/webpack": "^5.5.0",
"#testing-library/jest-dom": "^5.16.4",
"#testing-library/react": "^13.2.0",
"#testing-library/user-event": "^13.5.0",
"babel-jest": "^27.4.2",
"babel-loader": "^8.2.3",
"babel-plugin-named-asset-import": "^0.3.8",
"babel-preset-react-app": "^10.0.1",
"bfj": "^7.0.2",
"browserslist": "^4.18.1",
"camelcase": "^6.2.1",
"case-sensitive-paths-webpack-plugin": "^2.4.0",
"css-loader": "^6.5.1",
"css-minimizer-webpack-plugin": "^3.2.0",
"dotenv": "^10.0.0",
"dotenv-expand": "^5.1.0",
"eslint": "^8.3.0",
"eslint-config-react-app": "^7.0.1",
"eslint-webpack-plugin": "^3.1.1",
"file-loader": "^6.2.0",
"fs-extra": "^10.0.0",
"html-webpack-plugin": "^5.5.0",
"identity-obj-proxy": "^3.0.0",
"jest": "^27.4.3",
"jest-resolve": "^27.4.2",
"jest-watch-typeahead": "^1.0.0",
"mini-css-extract-plugin": "^2.4.5",
"postcss": "^8.4.4",
"postcss-flexbugs-fixes": "^5.0.2",
"postcss-loader": "^6.2.1",
"postcss-normalize": "^10.0.1",
"postcss-preset-env": "^7.0.1",
"prompts": "^2.4.2",
"react": "^18.1.0",
"react-app-polyfill": "^3.0.0",
"react-dev-utils": "^12.0.1",
"react-dom": "^18.1.0",
"react-refresh": "^0.11.0",
"resolve": "^1.20.0",
"resolve-url-loader": "^4.0.0",
"sass-loader": "^12.3.0",
"semver": "^7.3.5",
"source-map-loader": "^3.0.0",
"style-loader": "^3.3.1",
"tailwindcss": "^3.0.2",
"terser-webpack-plugin": "^5.2.5",
"tonweb": "^0.0.40",
"web-vitals": "^2.1.4",
"webpack": "^5.64.4",
"webpack-dev-server": "^4.6.0",
"webpack-manifest-plugin": "^4.0.2",
"workbox-webpack-plugin": "^6.4.1"
},
"scripts": {
"start": " node scripts/start.js",
"build": "node scripts/build.js",
"test": "node scripts/test.js"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"jest": {
"roots": [
"<rootDir>/src"
],
"collectCoverageFrom": [
"src/**/*.{js,jsx,ts,tsx}",
"!src/**/*.d.ts"
],
"setupFiles": [
"react-app-polyfill/jsdom"
],
"setupFilesAfterEnv": [
"<rootDir>/src/setupTests.js"
],
"testMatch": [
"<rootDir>/src/**/__tests__/**/*.{js,jsx,ts,tsx}",
"<rootDir>/src/**/*.{spec,test}.{js,jsx,ts,tsx}"
],
"testEnvironment": "jsdom",
"transform": {
"^.+\\.(js|jsx|mjs|cjs|ts|tsx)$": "<rootDir>/config/jest/babelTransform.js",
"^.+\\.css$": "<rootDir>/config/jest/cssTransform.js",
"^(?!.*\\.(js|jsx|mjs|cjs|ts|tsx|css|json)$)": "<rootDir>/config/jest/fileTransform.js"
},
"transformIgnorePatterns": [
"[/\\\\]node_modules[/\\\\].+\\.(js|jsx|mjs|cjs|ts|tsx)$",
"^.+\\.module\\.(css|sass|scss)$"
],
"modulePaths": [],
"moduleNameMapper": {
"^react-native$": "react-native-web",
"^.+\\.module\\.(css|sass|scss)$": "identity-obj-proxy"
},
"moduleFileExtensions": [
"web.js",
"js",
"web.ts",
"ts",
"web.tsx",
"tsx",
"json",
"web.jsx",
"jsx",
"node"
],
"watchPlugins": [
"jest-watch-typeahead/filename",
"jest-watch-typeahead/testname"
],
"resetMocks": true
},
"babel": {
"presets": [
"react-app"
]
}
}

Just to close the question
As mentioned in this link https://github.com/facebook/create-react-app/issues/12070#issuecomment-1086568526
It's an issue related to create-react-app that will probably be fixed in the next version.
Adding the code below to the eslintrc.js resolves the issue for now
"parserOptions": { "babelOptions": { "presets": [ ["babel-preset-react-app", false] ] } }

Why tests fail with an error SyntaxError: Unexpected token {?

Good day!
The project uses webpack 5, the tests themselves were written before the transition.
There is clearly a problem with babel, although the config was written according to jest documentation
I tried everything and looked up a lot over the forums and Github, but i couldnt find a solution. everything i try doesnt seem to work. I need help please!
Thank you!
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import { shallowMount, mount, createLocalVue } from '#vue/test-utils';
^
SyntaxError: Unexpected token {
at Runtime.createScriptFromCode (../../node_modules/jest-runtime/build/index.js:1350:14)
package.json
"devDependencies": {
"#babel/plugin-syntax-dynamic-import": "^7.8.3",
"#babel/plugin-transform-regenerator": "^7.12.13",
"#babel/preset-env": "^7.13.12",
"#babel/runtime": "^7.13.10",
"#mdi/js": "^5.9.55",
"#mdi/svg": "^5.9.55",
"#vue/babel-preset-app": "^4.5.12",
"#vue/test-utils": "^1.1.4",
"babel-core": "^7.0.0-bridge.0",
"babel-jest": "^26.6.3",
"babel-loader": "^8.2.2",
"clean-webpack-plugin": "^3.0.0",
"copy-webpack-plugin": "^8.1.1",
"css-loader": "^5.2.0",
"eslint-plugin-jest": "^24.3.6",
"husky": "^6.0.0",
"jest": "^26.6.3",
"postcss-loader": "^5.2.0",
"postcss-preset-env": "^6.7.0",
"sass": "^1.32.8",
"sass-loader": "^11.0.1",
"style-loader": "^2.0.0",
"vue-inline-svg": "^2.0.0",
"vue-jest": "^3.0.7",
"vue-loader": "^15.9.6",
"vue-style-loader": "^4.1.3",
"vue-template-compiler": "^2.6.12",
"vuetify-loader": "^1.7.2",
"webpack": "^5.30.0",
"webpack-cli": "^4.6.0",
"webpack-dev-server": "^3.11.2",
"webpack-merge": "^5.7.3"
},
"dependencies": {
"axios": "^0.21.1",
"core-js": "^3.10.0",
"izitoast": "^1.4.0",
"regenerator-runtime": "^0.13.7",
"vue": "^2.6.12",
"vue-axios": "^3.2.4",
"vue-click-outside": "^1.1.0",
"vue-select": "^3.11.2",
"vuelidate": "^0.7.6",
"vuetify": "^2.4.8",
"vuex": "^3.6.2"
},
"jest": {
"transform": {
"\\.js$": "babel-jest",
"^.+\\.vue$": "vue-jest"
},
"moduleFileExtensions": [
"js",
"json",
"vue"
],
"transformIgnorePatterns": [
"/node_modules/"
],
"moduleNameMapper": {
"common/vue/mixins/": "<rootDir>/__mocks__/jsFileMock.js",
"common/vue/components/ns-servers": "<rootDir>/__mocks__/jsFileMock.js"
}
},
.babelrc
{
"presets": [["#babel/env", { "modules": false }]],
"env": {
"test": {
"presets": [["#babel/env", { "targets": { "node": "current" } }]]
}
}
}

this is usually a parsing error, you have to tell Jest how you want to parse your test files and their dependencies. To help you properly I need to see your jest.config file (or your package.json depending on where you decide to set up your jest implementation).
Here are some basic settings to guide you:
// .babelrc
{
"presets": [
[
"#babel/preset-env",
{
"targets": {
"esmodules": true
}
}
],
"vue"
]
}
// package.json
{
"jest": {
"moduleFileExtensions": ["js", "json", "vue"],
"transform": {
"^.+\\.js$": "babel-jest",
"^.+\\.vue$": "vue-jest"
}
}
}
Remember to install first npm install -D babel-preset-vue
Have a nice day!

Babel Syntax Error when building React components (with flow typing)

I have written a set of React components which I wish to publish. However when I try to build them to commonjs format with babel before publishing I get the following error which I cannot find a resolution to.
The project is created and ejected from create-react-app
SyntaxError: src/packages/core/src/MyAppBar/MyAppBar.js: Unexpected token, expected ; (20:5)
18 | import {isEmpty} from "lodash";
19 |
> 20 | type MyAppBarPropsType = {
| ^
21 | position?: string,
22 | commandBarActions?: Array<React$Element<React$ElementType>>,
23 | title?: string,
The build line in my npm scripts is
"build:commonjs": "cross-env NODE_ENV=production babel ./src/packages/core/src --out-dir ./lib --ignore spec.js"
I would have thought that #babel/preset-flow would have been sufficient to deal with flow types in my code.
The presets from my babel.config.js file are as follows
presets: ['#babel/preset-flow', '#babel/preset-react', ['#babel/preset-env', {modules: 'commonjs'}]],
For completeness my full package.json and babel.config.js are as follows
package.json
{
"name": "react-ccl",
"version": "0.2.0-alpha",
"description": "Common component library based on xyz look and feel guidelines",
"private": true,
"dependencies": {
"#babel/core": "7.6.0",
"#material-ui/core": "3.9.2",
"#material-ui/icons": "3.0.2",
"#material-ui/lab": "3.0.0-alpha.30",
"#material-ui/styles": "3.0.0-alpha.10",
"#svgr/webpack": "4.3.2",
"#typescript-eslint/eslint-plugin": "^2.2.0",
"#typescript-eslint/parser": "^2.2.0",
"babel-eslint": "10.0.3",
"babel-jest": "^24.9.0",
"babel-loader": "8.0.6",
"babel-plugin-named-asset-import": "^0.3.4",
"babel-preset-react-app": "^9.0.2",
"camelcase": "^5.2.0",
"case-sensitive-paths-webpack-plugin": "2.2.0",
"css-loader": "2.1.1",
"dotenv": "6.2.0",
"dotenv-expand": "5.1.0",
"eslint": "^6.6.0",
"eslint-config-react-app": "^5.0.2",
"eslint-loader": "3.0.0",
"eslint-plugin-flowtype": "3.13.0",
"eslint-plugin-import": "2.18.2",
"eslint-plugin-jsx-a11y": "6.2.3",
"eslint-plugin-react": "7.16.0",
"eslint-plugin-react-hooks": "^1.6.1",
"file-loader": "3.0.1",
"fs-extra": "7.0.1",
"highlight": "^0.2.4",
"highlight.js": "^9.10.0",
"html-webpack-plugin": "4.0.0-beta.5",
"identity-obj-proxy": "3.0.0",
"is-wsl": "^1.1.0",
"lodash": "^4.17.15",
"mini-css-extract-plugin": "0.8.0",
"optimize-css-assets-webpack-plugin": "5.0.3",
"pnp-webpack-plugin": "1.5.0",
"postcss-flexbugs-fixes": "4.1.0",
"postcss-loader": "3.0.0",
"postcss-normalize": "7.0.1",
"postcss-preset-env": "6.7.0",
"postcss-safe-parser": "4.0.1",
"react": "^16.10.0",
"react-addons-test-utils": "15.5.1",
"react-app-polyfill": "^1.0.3",
"react-dev-utils": "^9.0.4",
"react-dom": "^16.10.0",
"react-test-renderer": "16.10.0",
"resolve": "1.12.0",
"resolve-url-loader": "3.1.0",
"sass-loader": "7.2.0",
"semver": "6.3.0",
"style-loader": "1.0.0",
"terser-webpack-plugin": "1.4.1",
"ts-pnp": "1.1.4",
"url-loader": "2.1.0",
"webpack": "4.40.2",
"webpack-dev-server": "3.2.1",
"webpack-manifest-plugin": "2.0.4",
"workbox-webpack-plugin": "4.3.1"
},
"devDependencies": {
"#babel/cli": "7.7.7",
"#babel/node": "7.7.7",
"#babel/plugin-proposal-class-properties": "7.2.1",
"#babel/plugin-syntax-dynamic-import": "7.2.0",
"#babel/plugin-transform-object-assign": "7.2.0",
"#babel/plugin-transform-react-constant-elements": "7.6.0",
"#babel/plugin-transform-runtime": "7.6.2",
"#babel/preset-env": "7.7.7",
"#babel/preset-flow": "7.7.4",
"#babel/preset-react": "7.7.4",
"#babel/register": "7.0.0",
"babel-cli": "^6.26.0",
"chokidar": "1.6.1",
"cpx": "^1.5.0",
"cross-env": "^6.0.3",
"enzyme": "^3.10.0",
"enzyme-adapter-react-16": "^1.15.1",
"enzyme-to-json": "^3.4.3",
"flow-bin": "0.113.0",
"flow-typed": "^2.6.2",
"jest": "24.9.0",
"jest-environment-jsdom-fourteen": "1.0.1",
"jest-resolve": "24.9.0",
"jest-watch-typeahead": "0.4.0",
"lerna": "3.16.4",
"npm-run-all": "4.0.2",
"prop-types": "15.7.2",
"rimraf": "3.0.0",
"react-docgen": "3.0.0"
},
"scripts": {
"prestart": "npm run gen:docs",
"start": "npm-run-all --parallel start:docs gen:docs-watch",
"start:docs": "node scripts/start.js",
"gen:docs": "node scripts/generateComponentData.js",
"gen:docs-watch": "npm run gen:docs -- --watch",
"build:docs": "node scripts/build.js",
"test": "node scripts/test.js",
"predeploy:docs": "npm run build:docs",
"deploy:docs": "gh-pages -d build",
"flow": "flow",
"build:commonjs": "cross-env NODE_ENV=production babel ./src/packages/core/src --out-dir ./lib --ignore spec.js"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"jest": {
"roots": [
"<rootDir>/src/packages/core"
],
"collectCoverageFrom": [
"src/**/*.{js,jsx,ts,tsx}",
"!src/**/*.d.ts"
],
"setupFiles": [
"react-app-polyfill/jsdom"
],
"setupFilesAfterEnv": [
"<rootDir>/jest-test-setup.js"
],
"testMatch": [
"<rootDir>/src/**/__tests__/**/*.{js,jsx,ts,tsx}",
"<rootDir>/src/**/*.{spec,test}.{js,jsx,ts,tsx}"
],
"testEnvironment": "jest-environment-jsdom-fourteen",
"transform": {
"^.+\\.(js|jsx|ts|tsx)$": "<rootDir>/node_modules/babel-jest",
"^.+\\.css$": "<rootDir>/config/jest/cssTransform.js",
"^(?!.*\\.(js|jsx|ts|tsx|css|json)$)": "<rootDir>/config/jest/fileTransform.js"
},
"transformIgnorePatterns": [
"[/\\\\]node_modules[/\\\\].+\\.(js|jsx|ts|tsx)$",
"^.+\\.module\\.(css|sass|scss)$"
],
"modulePaths": [],
"moduleNameMapper": {
"^react-native$": "react-native-web",
"^.+\\.module\\.(css|sass|scss)$": "identity-obj-proxy"
},
"moduleFileExtensions": [
"web.js",
"js",
"web.ts",
"ts",
"web.tsx",
"tsx",
"json",
"web.jsx",
"jsx",
"node"
],
"watchPlugins": [
"jest-watch-typeahead/filename",
"jest-watch-typeahead/testname"
]
}
}
babel.config.js
const productionPlugins = [
'#babel/plugin-transform-react-constant-elements',
['babel-plugin-react-remove-properties', { properties: ['data-mui-test'] }],
[
'babel-plugin-transform-react-remove-prop-types',
{
mode: 'unsafe-wrap',
},
],
];
module.exports = {
presets: ['#babel/preset-flow', '#babel/preset-react', ['#babel/preset-env', {modules: 'commonjs'}]],
plugins: [
['#babel/plugin-proposal-class-properties', { loose: true }],
['#babel/plugin-proposal-object-rest-spread', { loose: true }],
'#babel/plugin-transform-runtime',
// for IE 11 support
'#babel/plugin-transform-object-assign',
],
ignore: [/#babel[\\|/]runtime/], // Fix a Windows issue.
env: {
cjs: {
plugins: productionPlugins,
},
},
};

Evidently preset-flow was not enough for babel to transpile a flow type defined within a JS file. When I added the following line to devDependencies in my package.json the build worked perfectly.
"babel-plugin-react-remove-properties": "^0.3.0",

Use es7 decorator in jest

I use decorators in my project, but it seems the babel-jest do not support this new experiment feature
I find some support from this github issue ===> which replace babel-jest with webpack-babel-jest, and it fix the decorator problem. But a new problem comes in when i run npm run test ==> "ReferenceError: regeneratorRuntime is not defined"
It seems we need regenerator-runtime.(I use redux-saga in my project) I can't get a way to fix this.
package.json {
"babel-core": "^6.7.6",
"babel-eslint": "^7.2.3",
"babel-jest": "^21.2.0",
"babel-loader": "^6.2.4",
"babel-plugin-module-resolver": "^2.7.1",
"babel-plugin-transform-class-properties": "^6.24.1",
"babel-plugin-transform-decorators-legacy": "^1.3.4",
"babel-plugin-transform-react-jsx-source": "^6.22.0",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-polyfill": "^6.23.0",
"babel-preset-es2015": "^6.6.0",
"babel-preset-react": "^6.5.0",
"babel-preset-stage-0": "^6.5.0",
"css-loader": "^0.23.1",
"enzyme": "^3.1.0",
"enzyme-adapter-react-15.4": "^1.0.3",
"jest": "^21.2.1",
"node-sass": "^3.4.2",
"react-addons-test-utils": "^15.4.2",
"regenerator-runtime": "^0.11.0" }
.babelrc {
{
"presets": [
"es2015",
"react",
"stage-0"
],
"plugins": [
"transform-decorators-legacy",
"transform-react-jsx-source",
"transform-class-properties",
["transform-runtime", {
"polyfill": false,
"regenerator": true
}
],
"env": {
"development": {
"presets": [
"react-hmre"
]
},
"test": {
"presets": [
"es2015",
"react",
"stage-0"
]
}
}
}
}

I can't get a way to fix this.
This is well-known issue of regenerator-transform babel plugin, which is commonly used for transpiling code with sagas.
See verbose explanation here: Unable to export generator functions

Babel module build failed when passing multiple presets into create-react app package.json

I have the following package.json config(babel options are at the bottom):
{
"name": "react-tea-timer",
"version": "0.2.0",
"private": false,
"devDependencies": {
"autoprefixer": "6.7.2",
"babel-core": "6.22.1",
"babel-eslint": "7.1.1",
"babel-jest": "18.0.0",
"babel-loader": "6.2.10",
"babel-preset-mobx": "^1.0.1",
"babel-preset-react-app": "^2.2.0",
"babel-runtime": "^6.20.0",
"case-sensitive-paths-webpack-plugin": "1.1.4",
"chalk": "1.1.3",
"connect-history-api-fallback": "1.3.0",
"cross-spawn": "4.0.2",
"css-loader": "0.26.1",
"detect-port": "1.1.0",
"dotenv": "2.0.0",
"enzyme": "^2.7.1",
"eslint": "3.16.1",
"eslint-config-react-app": "^0.6.2",
"eslint-loader": "1.6.0",
"eslint-plugin-flowtype": "2.21.0",
"eslint-plugin-import": "2.0.1",
"eslint-plugin-jsx-a11y": "4.0.0",
"eslint-plugin-react": "6.4.1",
"extract-text-webpack-plugin": "1.0.1",
"file-loader": "0.10.0",
"flow-bin": "^0.42.0",
"fs-extra": "0.30.0",
"html-webpack-plugin": "2.24.0",
"http-proxy-middleware": "0.17.3",
"jest": "^19.0.2",
"json-loader": "0.5.4",
"object-assign": "4.1.1",
"postcss-loader": "1.2.2",
"promise": "7.1.1",
"react-addons-test-utils": "^15.4.2",
"react-dev-utils": "^0.5.2",
"sinon": "^2.1.0",
"style-loader": "0.13.1",
"url-loader": "0.5.7",
"webpack": "1.14.0",
"webpack-dev-server": "1.16.2",
"webpack-manifest-plugin": "1.1.0",
"whatwg-fetch": "2.0.2"
},
"dependencies": {
"mobx": "^3.1.9",
"mobx-react": "^4.1.8",
"rc-slider": "^6.3.1",
"react": "^15.4.2",
"react-blur-image-loader": "^0.2.2",
"react-dom": "^15.4.2",
"react-router": "^3.0.2"
},
"scripts": {
"start": "node scripts/start.js",
"build": "node scripts/build.js",
"test": "node scripts/test.js --env=jsdom",
"predeploy": "npm run build",
"deploy": "gh-pages -d build",
"flow": "flow"
},
"jest": {
"collectCoverageFrom": [
"src/**/*.{js,jsx}"
],
"setupFiles": [
"<rootDir>/config/polyfills.js"
],
"testPathIgnorePatterns": [
"<rootDir>[/\\\\](build|docs|node_modules|scripts)[/\\\\]"
],
"testEnvironment": "node",
"testURL": "http://localhost",
"transform": {
"^.+\\.(js|jsx)$": "<rootDir>/node_modules/babel-jest",
"^.+\\.css$": "<rootDir>/config/jest/cssTransform.js",
"^(?!.*\\.(js|jsx|css|json)$)": "<rootDir>/config/jest/fileTransform.js"
},
"transformIgnorePatterns": [
"[/\\\\]node_modules[/\\\\].+\\.(js|jsx)$"
],
"moduleNameMapper": {
"^react-native$": "react-native-web"
}
},
"babel": {
"presets": [
"react-app",
"mobx"
]
},
"eslintConfig": {
"extends": "react-app"
},
"homepage": "https://shooshte.github.io/teaTimer/"
}
Now according to the babel docs this is the correct way to pass in multiple presets, but I am still getting the following error when running npm run start:
Error in ./src/Stores/timerStore.js Module build failed:
ReferenceError: [BABEL]
/Users/shooshte/PersonalProjects/teaTimer/src/Stores/timerStore.js:
Unknown option:
/Users/shooshte/PersonalProjects/teaTimer/node_modules/mobx/lib/mobx.js.extras.
Check out http://babeljs.io/docs/usage/options/ for more information
about options.
A common cause of this error is the presence of a configuration
options object without the corresponding preset name. Example:
Invalid: { presets: [{option: value}] } Valid: { presets:
[['presetName', {option: value}]] }
For more detailed information on preset configuration, please see
http://babeljs.io/docs/plugins/#pluginpresets-options. (While
processing preset:
"/Users/shooshte/PersonalProjects/teaTimer/node_modules/mobx/lib/mobx.js")
at Array.map (native) # ./src/index.js 15:18-48