Develop Reference

package.json dependency issue? - "Uncaught ReferenceError: react is not defined"

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"

Preact.js - How to start a auto re run server like React.js does

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.

Eslint - eslint-config-airbnb not find

I'm getting some errors module eslint-config-airbnb not found, when run command eslint **/*.jsx.
package.json file
{
"name": "reactapp",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"precommit": "npm test",
"start": "webpack-dev-server --hot"
},
"author": "",
"license": "ISC",
"dependencies": {
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"husky": "^0.14.3",
"react": "^15.6.1",
"react-dom": "^15.6.1",
"webpack": "^3.5.5",
"webpack-dev-server": "^2.7.1"
},
"devDependencies": {
"eslint-config-airbnb": "^15.1.0",
"eslint-plugin-import": "^2.7.0",
"eslint-plugin-jsx-a11y": "^5.1.1",
"eslint-plugin-react": "^7.3.0"
}
}
eslintrc file
{
"extends": "airbnb"
}

Check to see if your eslint has been installed / installed correctly.
Also reinstall your node_modules folder as well, if eslint has been configured.
Since eslint isn't in your devDependencies, I assumed you've got it set up globally?
I've copied your package.json set up, but tested it with a local eslint and it's working for me.
"scripts":
{
"precommit": "npm test",
"start": "webpack-dev-server --hot",
"lint": "eslint **/*.jsx --fix"
}
...
"devDependencies":
{
"eslint": "^4.5.0",
"eslint-config-airbnb": "^15.1.0",
"eslint-plugin-import": "^2.7.0",
"eslint-plugin-jsx-a11y": "^5.1.1",
"eslint-plugin-react": "^7.3.0"
}

npm install -D rimraf prettier babel-eslint eslint-plugin-react eslint-plugin-jsx-a11y eslint-plugin-import eslint-config-prettier eslint-config-airbnb eslint-plugin-react-hooks
npm run build
Try running this, worked for me.

Error: Couldn't find preset "react-hmre" relative to directory

I have the following library https://github.com/codyc4321/react-data-components-updated
I installed it in my React project like npm i ~/react-data-components-updated
Now running my node server I get:
ERROR in /Users/cchilders/react-data-components-updated/lib/index.js
Module build failed: Error: Couldn't find preset "react-hmre" relative to directory "/Users/cchilders/react-data-components-updated"
at /Users/cchilders/work_projects/myproject/node_modules/babel-core/lib/transformation/file/options/option-manager.js:293:19
at Array.map (native)
at OptionManager.resolvePresets (/Users/cchilders/work_projects/myproject/node_modules/babel-core/lib/transformation/file/options/option-manager.js:275:20)
at OptionManager.mergePresets (/Users/cchilders/work_projects/myproject/node_modules/babel-core/lib/transformation/file/options/option-manager.js:264:10)
at OptionManager.mergeOptions (/Users/cchilders/work_projects/myproject/node_modules/babel-core/lib/transformation/file/options/option-manager.js:249:14)
at OptionManager.init (/Users/cchilders/work_projects/myproject/node_modules/babel-core/lib/transformation/file/options/option-manager.js:368:12)
at File.initOptions (/Users/cchilders/work_projects/myproject/node_modules/babel-core/lib/transformation/file/index.js:212:65)
at new File (/Users/cchilders/work_projects/myproject/node_modules/babel-core/lib/transformation/file/index.js:135:24)
at Pipeline.transform (/Users/cchilders/work_projects/myproject/node_modules/babel-core/lib/transformation/pipeline.js:46:16)
at transpile (/Users/cchilders/work_projects/myproject/node_modules/babel-loader/lib/index.js:46:20)
# ./client/components/tables/MyDataTable.js 64:16-56
# ./client/controllers/MyController.js
# ./client/main.js
# multi webpack-hot-middleware/client ./client/main.js
In my library I have
.babelrc
{
"presets": [
"es2015",
"react",
"stage-1",
"react-hmre"
]
}
package.json
{
"name": "react-data-components-updated",
"version": "0.1.0",
"description": "React data components updated with some fixes",
"keywords": [
"pagination",
"react",
"react-component",
"table"
],
"license": "MIT",
"main": "./lib/index",
"files": [
"css",
"lib",
"dist",
"src"
],
"repository": {
"type": "git",
"url": "https://github.com/codyc4321/react-data-components-updated"
},
"dependencies": {
"babel-plugin-transform-decorators-legacy": "^1.3.4",
"lodash": "^4.13.1",
"prop-types": "^15.5.10"
},
"peerDependencies": {
"react": "^0.14.0 || ^15.0.0-0"
},
"devDependencies": {
"babel-cli": "^6.10.1",
"babel-core": "^6.10.4",
"babel-eslint": "^7.0.0",
"babel-jest": "^20.0.3",
"babel-loader": "^7.1.1",
"babel-plugin-lodash": "^3.2.4",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.5.0",
"babel-preset-stage-1": "^6.5.0",
"eslint": "^4.1.1",
"eslint-plugin-react": "^7.1.0",
"flow-bin": "^0.49.1",
"husky": "^0.14.1",
"jest": "^20.0.4",
"lint-staged": "^4.0.0",
"lodash-webpack-plugin": "^0.11.4",
"prettier": "^1.5.2",
"react": "^15.1.0",
"react-addons-test-utils": "^15.1.0",
"react-dom": "^15.1.0",
"react-redux": "^4.4.5",
"react-test-renderer": "^15.6.1",
"redux": "^3.5.2",
"rimraf": "^2.4.3",
"webpack": "^3.1.0",
"webpack-dev-server": "^2.5.0"
},
"scripts": {
"build": "webpack && babel src -d lib",
"check": "flow check",
"clean": "rimraf lib dist coverage",
"lint": "eslint src",
"precommit": "lint-staged",
"prepublish": "npm run clean && npm run build",
"start": "webpack-dev-server -d --config example/webpack.config.js",
"test": "npm run lint && npm run check && jest"
},
"lint-staged": {
"*.js": [
"prettier --write --single-quote --trailing-comma all",
"git add"
]
},
"jest": {
"roots": [
"src"
]
}
}
How can I fix this react-hmre error?

You have missed the package, please install it by click it babel-preset-react-hmre

babel-runtime missing interop-require-default

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.