BABEL_ENV issue when running npm test in React App - reactjs

I have the following script in the scripts block of my package.json, this requires babel via babel-register- and sets the NODE_ENV to development in order to do so.
"test": "set NODE_ENV=development&&mocha --watch --require babel-register --require jsdom-global/register --require ignore-styles --require src/tests/helpers.js src/tests/**/*.js"
I am however getting this error:
Error: 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.
I have tried many combinations of uninstalling, reinstalling, altering the order of requirements within my script and several other steps mentioned in the main git issue for this error.
Can anyone see any glaring error in my method here? Full package below:
"dependencies": {
"prop-types": "^15.6.2",
"react": "^16.4.1",
"react-dom": "^16.4.1",
"react-scripts": "1.1.4",
"tslib": "^1.9.3",
"typescript": "^3.0.1"
},
"scripts": {
"build-css": "node-sass-chokidar src/ -o src/",
"watch-css": "node-sass-chokidar src/ -o src/ --watch --recursive",
"start-js": "react-scripts start",
"build-ts": "set NODE_ENV=development tsc || exit 0",
"watch-ts": "tsc --watch",
"build": "react-scripts build",
"start": "npm-run-all -p build-* watch-* start-js",
"test": "set NODE_ENV=development&&mocha --watch --require babel-register --require jsdom-global/register --require ignore-styles --require src/tests/helpers.js src/tests/**/*.js",
"eject": "react-scripts eject"
},
"babel": {
"presets": [
"es2015",
"react",
"react-app"
],
"plugins": [
"transform-object-rest-spread"
]
},
"devDependencies": {
"babel-cli": "^6.26.0",
"babel-plugin-transform-object-rest-spread": "^6.26.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-stage-2": "^6.24.1",
"chai": "^4.1.2",
"enzyme": "^3.4.1",
"enzyme-adapter-react-16": "^1.2.0",
"ignore-styles": "^5.0.1",
"jsdom": "^11.12.0",
"jsdom-global": "^3.0.2",
"mocha": "^5.2.0",
"node-sass-chokidar": "^1.3.3",
"npm-run-all": "^4.1.3",
"sinon": "^6.1.5"
}

You're currently using set to specify your NODE_ENV variable which results in it not being available to child processes, i.e. the next command chained after the && operator, which is mocha.
If you use export instead, you'll ensure it's available to child processes.
Change the beginning of your test script to the following:
"test": "export NODE_ENV=development && mocha --watch ..."
Cross-patform:
export will only work in Bash environments. For a cross-platform solution consider utilizing cross-env to set the environment variables instead. Example:
"test": "cross-env NODE_ENV=development mocha --watch ..."
Note: export has been replaced with cross-env and the && operator is not necessary.

Related

React js error TypeError: React.memo is not a function

I am new in react js just now I have a install data-table component using npm install react-data-table-component styled-components and apply its basic example but its give me error TypeError: React.memo is not a function I have try to google its but all solutions about the redux currently I am using this my package.json file
{
"private": true,
"scripts": {
"dev": "npm run development",
"start": "react-scripts start",
"development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"watch": "npm run development -- --watch",
"watch-poll": "npm run watch -- --watch-poll",
"hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
"prod": "npm run production",
"production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
},
"devDependencies": {
"#babel/preset-react": "^7.0.0",
"axios": "^0.19",
"bootstrap": "^4.1.0",
"cross-env": "^5.1",
"jquery": "^3.2",
"laravel-mix": "^4.0.7",
"lodash": "^4.17.13",
"popper.js": "^1.12",
"react": "^16.2.0",
"react-dom": "^16.2.0",
"resolve-url-loader": "^2.3.1",
"sass": "^1.15.2",
"sass-loader": "^7.1.0"
},
"dependencies": {
"mui-datatables": "^2.12.4",
"react-data-table-component": "^3.9.0",
"react-notifications-component": "^2.2.3",
"react-router-dom": "^5.1.2",
"styled-components": "^4.4.1"
}
}
Thanks
You are using react 16.2 but React.memo was released in 16.6. The library you are using requires the newer version of React.

setting up lint-staged for jest

I have to try to set up a husky with lint-staged. Initially, I was trying to set up like the following but that does not work.
"lint-staged": {
"*.js": [
"prettier --write",
"eslint src/ --fix",
"npm run test",
"git add"
]
}
then I after some searching I changed my setting to the following but thats again reported diff error
"lint-staged": {
"*.js": [
"prettier --write",
"eslint src/ --fix",
"jest --bail --findRelatedTests",
"git add"
]
}
Error description
Jest encountered an unexpected token
This usually means that you are trying to import a file which Jest cannot parse, e.g. it's not plain JavaScript.
By default, if Jest sees a Babel config, it will use that to transform your files, ignoring "node_modules".
Here's what you can do:
• To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.
• If you need a custom transformation to specify a "transform" option in your config.
• If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option.
when I run npm run test in terminal it works fine. So why it is not working with `lint-staged. Am I doing something wrong here?
my package.json
{
"name": "myproject",
"version": "0.1.0",
"private": true,
"dependencies": {
"axios": "^0.18.0",
"react": "^16.8.4",
"react-dom": "^16.8.4",
"react-redux": "^6.0.1",
"react-router-dom": "^5.0.0",
"react-scripts": "2.1.8",
"redux": "^4.0.1",
"redux-thunk": "^2.3.0",
"standard-http-error": "^2.0.1",
"styled-components": "^4.1.3"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": [
">0.2%",
"not dead",
"not ie <= 11",
"not op_mini all"
],
"devDependencies": {
"eslint-config-airbnb": "^17.1.0",
"eslint-config-prettier": "^4.1.0",
"eslint-plugin-import": "^2.16.0",
"eslint-plugin-jsx-a11y": "^6.2.1",
"eslint-plugin-prettier": "^3.0.1",
"eslint-plugin-react": "^7.12.4",
"husky": "^1.3.1",
"install": "^0.12.2",
"lint-staged": "^8.1.5",
"prettier": "1.16.4"
},
"husky": {
"hooks": {
"pre-commit": "lint-staged"
}
},
"lint-staged": {
"*.js": [
"prettier --write",
"eslint src/ --fix",
"jest --bail --findRelatedTests",
"git add"
]
}
}
Your lint-staged glob pattern is only set to run on *.js files on root. You have to change it to **/*.js to include ALL *.js files in your project.
"lint-staged": {
"**/*.js": [
"prettier --write",
"eslint src/ --fix",
"jest --bail --findRelatedTests",
"git add"
]
}
Using a Create React App means that you have to test using the react-scripts because they have the babel configuration that jest alone is missing.
There is a work around to set husky lint-staged using react-scripts test and avoid ejecting and configuring your own babel and jest.
Use the package cross-env that will allow us to configure a CI environment variable in whatever environment we’re currently in.
Install using:
yarn add --dev cross-env
or
npm install cross-env --save-dev
Then on your package.json you should have something like this:
{
"scripts" {
...,
"lint": "eslint src --fix"
"test": "cross-env CI=true react-scripts test --env=jsdom",
},
"husky": {
"hooks": {
"pre-commit": "lint-staged"
}
},
"lint-staged": {
"**/*.js": [
"yarn lint",
"yarn test"
]
},
}
If you are using npm you can change yarn test for npm run test, same for lint.
Hope it helps ;).
Main source of this answer: here

sass not working in create-react-app

Sass does not compiling in create-react-app. The current package.json structure is
{
"name": "create-app",
"version": "0.1.0",
"private": true,
"dependencies": {
"react": "^16.3.1",
"react-dom": "^16.3.1",
"react-scripts": "1.1.4"
},
"dependencies": {
"node-sass-chokidar": "^1.2.2",
"npm-run-all": "^4.1.2",
"react": "^16.3.1",
"react-dom": "^16.3.1",
"react-redux": "^5.0.7",
"react-router-dom": "^4.2.2",
"react-scripts": "^1.1.4",
"redux": "^3.7.2",
"redux-logger": "^3.0.6",
"redux-thunk": "^2.2.0"
},
"scripts": {
"build-css": "node-sass-chokidar src/ -o src/",
"watch-css": "npm run build-css && node-sass-chokidar src/ -o src/ --watch --recursive",
"start-js": "react-scripts start",
"start": "npm-run-all -p watch-css start-js",
"build-js": "react-scripts build",
"build": "npm-run-all build-css build-js",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
}
}
Repo: https://github.com/athimannil/create-app
It is working fine, npm start watch your .scss files and output .css files as expected.
Make sure to require the .css files in your components.
Since src/App.js still imports src/App.css, the styles become a part of your application. You can now edit src/App.scss, and src/App.css will be regenerated.
Also since .css files are now generated, you should remove them from your SCM.
At this point you might want to remove all CSS files from the source control, and add src/**/*.css to your .gitignore file.
doc
The 2. version of create-react-app supports Sass now. Install node-sass (e.g. npm install node-sass) to enable it. Checkout this application's Navigation component.

React storybook not reloading on changes

I have a react application I created with create-react-app and I have added storybook to it. When I run yarn run storybook it does not reload when I change files.
My application is laid out like
src
->components
--->aComponent.js
->stories
--->index.js
->index.js
Here is my package.json
{
"name": "my-app",
"version": "0.1.0",
"private": true,
"dependencies": {
"immutable": "^3.8.2",
"react": "^16.2.0",
"react-dom": "^16.2.0",
"react-scripts": "1.1.1"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject",
"storybook": "start-storybook -p 9009 -s public",
"build-storybook": "build-storybook -s public"
},
"devDependencies": {
"#storybook/addon-actions": "^3.3.14",
"#storybook/addon-links": "^3.3.14",
"#storybook/addons": "^3.3.14",
"#storybook/react": "^3.3.14",
"babel-core": "^6.26.0",
"flow-bin": "^0.67.1"
}
}
I have no custom web pack config. What do I need to do to get hot module reloading working?
You must increase your watch count
echo fs.inotify.max_user_watches=524288 | sudo tee -a /etc/sysctl.conf && sudo sysctl -p
Had the same issue, should pass module as a 2nd argument for storiesOf
// V Won't hot reload with `module`
storiesOf('Welcome', module).add('to Storybook', () => <Welcome showApp={linkTo('Button')} />);
I had this problem too,
my environment was:
ubuntu 18.04
"react": "^16.10.1",
"react-dom": "^16.10.1",
"react-scripts": "3.1.2",
"#storybook/react": "^5.2.1"
I solved this problem with running as the sudo user like this:
sudo yarn run storybook

How can I run a build of React app?

I did a build for a React app using npm run-script build and I need to run it. Using npm run webpack is returning an error. Excuse my being very new to React but I really need to know how to run this app. I hope you can help!
My package.json:
{
"name": "dashboard",
"version": "0.1.0",
"private": true,
"dependencies": {
"axios": "^0.16.2",
"downloadjs": "^1.4.7",
"fast-memoize": "^2.2.8",
"flow-bin": "^0.52.0",
"lodash": "^4.17.4",
"mapbox-gl": "^0.39.1",
"material-ui": "^0.18.7",
"moment": "^2.18.1",
"node-sass-chokidar": "^0.0.3",
"react": "^15.6.1",
"react-dom": "^15.6.1",
"react-mapbox-gl": "^2.5.0",
"react-redux": "^5.0.5",
"react-router": "^4.1.2",
"react-router-dom": "^4.1.2",
"react-router-redux": "next",
"react-tap-event-plugin": "^2.0.1",
"redux": "^3.7.2",
"redux-thunk": "^2.2.0"
},
"devDependencies": {
"react-emotion": "^7.2.2",
"react-scripts": "1.0.10",
"styled-components": "^2.1.2"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject",
"flow": "flow"
}
Here are the folders and files of the built app
As I mentioned in comments.
npm run build uses react-scripts to create a build for you
To run in production:
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject",
"flow": "flow",
"start:prod": 'node dist/app.js'
}
By looking at "react-scripts": "1.0.10", it seems you created the app using create-react-app.
create-react-app is using yarn by default. So you can run yarn then yarn build (same as npm install and then npm run build)
If you need change webpack configuration. The app have eject first. You can do it by yarn eject. And then you can edit the webpack config file.
Does this help?
Are you using create-react-app? If yes then run "npm run build" in your root folder. This command will run your app

Resources