Related
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] ] } }
This error occurs when I attempt to test my React native code with Jest
The error code suggests the following steps, and I've tried both suggestions to no avail.
"Add #babel/preset-react (https://git.io/JfeDR) to the 'presets' section of your Babel config to enable transformation.
If you want to leave it as-is, add #babel/plugin-syntax-jsx (https://git.io/vb4yA) to the 'plugins' section to enable parsing."
Here are my config files:
//babel.config.js
module.exports = function(api) {
api.cache(true);
return {
presets: ['babel-preset-expo','#babel/preset-env','#babel/preset-react'],
plugins: ['react-native-reanimated/plugin','#babel/plugin-syntax-jsx']
};
};
//.babelrc
{
"plugins": [
"module:react-native-dotenv",
"#babel/plugin-syntax-jsx"
],
"presets": [
"#babel/preset-env",
"#babel/preset-react"
]
}
//package.json
"dependencies":
{
...
"react": "17.0.1",
"react-native": "^0.64.3",
...
},
"devDependencies": {
"#babel/core": "^7.12.9",
"#babel/plugin-syntax-jsx": "^7.16.7",
"#babel/preset-env": "^7.16.11",
"#babel/preset-react": "^7.16.7",
"#redux-devtools/core": "^3.11.0",
"#testing-library/react-native": "^9.1.0",
"#types/react-native": "~0.64.12",
"babel-jest": "^27.5.1",
"jest": "^26.6.3",
"mockdate": "^3.0.5",
"react-native-debugger": "^1.1.0",
"react-test-renderer": "^18.0.0",
"redux-devtools-extension": "^2.13.9",
"remote-redux-devtools": "^0.5.16",
"typescript": "~4.3.5"
},
I currently have a react app which is not running / rendering in IE, I think due to an ES5 / ES6 problem.
The error I get is this: Syntax error.
On the line highlighted below.
if(process.env.NODE_ENV == 'production') {
=> module.exports = require('./cjs/react.production.min.js');
} else {
module.exports = require('./cjs/react.development.js');
At the top of index.js prior to compilation:
import 'babel-polyfill';
import 'react-app-polyfill/ie11';
import 'react-app-polyfill/stable';
package.json:
{
"name": "reactapp",
"version": "0.1.0",
"private": true,
"dependencies": {
"#babel/polyfill": "^7.8.3",
"#material-ui/core": "^3.9.3",
"#material-ui/icons": "^3.0.2",
"#sentry/browser": "^5.10.2",
"adblockdetect": "0.0.2",
"animatewithsass": "^3.2.1",
"axios": "^0.18.1",
"babel-polyfill": "^6.26.0",
"core-js": "^3.6.5",
"date-fns": "^2.10.0",
"detectrtc": "^1.4.0",
"easy-peasy": "^3.2.0",
"formik": "^2.0.3",
"google-map-react": "^1.1.5",
"js-cookie": "^2.2.1",
"lodash": "^4.17.15",
"material-design-icons": "^3.0.1",
"material-icons": "^0.3.1",
"node-sass": "^4.13.0",
"platform": "^1.3.5",
"query-string": "^6.10.1",
"react": "^16.11.0",
"react-albus": "^2.0.0",
"react-app-polyfill": "^1.0.6",
"react-color": "^2.18.0",
"react-confirm-alert": "^2.4.1",
"react-dom": "^16.11.0",
"react-dropzone": "^11.1.0",
"react-loader-spinner": "^3.1.5",
"react-media-recorder": "^1.2.0",
"react-paginate": "^6.3.2",
"react-router-dom": "^5.1.2",
"react-rtc-real": "^1.11.22",
"react-scripts": "2.1.8",
"react-select": "^3.1.0",
"react-simple-line-icons": "^1.0.8",
"react-spring": "^8.0.27",
"react-stripe-elements": "^5.1.0",
"react-stripe-script-loader": "^1.0.16",
"react-switch": "^5.0.1",
"react-toastify": "^5.4.0",
"react-toggle": "^4.1.1",
"react-tooltip": "^3.11.2",
"regenerator-runtime": "^0.13.5",
"semantic-ui-css": "^2.4.1",
"semantic-ui-react": "^0.88.2",
"styled-components": "^4.4.1",
"sweetalert2-react": "^0.8.3",
"videojs": "^1.0.0",
"videojs-record": "^4.0.0",
"webfontloader": "^1.6.28",
"webrtc-adapter": "^7.5.1",
"yup": "^0.27.0"
},
"scripts": {
"start": "react-app-rewired start",
"build": "set NODE_ENV=production && react-app-rewired build",
"test": "react-app-rewired test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all",
"IE 11"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version",
"IE 11"
]
},
"devDependencies": {
"animate-sass": "^0.8.2",
"es-check": "^5.1.1",
"react-app-rewired": "^2.1.6"
}
}
Inside .babelrc
{
"presets": ["#babel/env","#babel/preset-react",["#babel/preset-env", { "targets": "defaults" }]],
"plugins" : ["#babel/plugin-syntax-dynamic-import"]
}
Can anyone guide me in the right direction as to how to get babel to compile things properly for ES5? You'll notice here instead of ejecting, I'm using react-app-rewired, I don't think that should cause issues, so any help appreciated.
Update:
"Object doesn't support property or method 'repeat'" - when running in development mode. How do I polyfill this? I think this may be the problem.
This is very similar to this Github issue in core-js
As suggested in that thread, you might add this to your preset config
{ modules: false,
useBuiltIns: 'entry',
corejs: 3 }
Or import the function directly
import 'core-js/features/string/repeat';
First In the index.js file the import is for import 'babel-polyfill'; think should be #babel/polyfill. But that would not resolve IE 11 issues.
We had a similar issue, had to switch to core-js for bundling - which you already have. But you will need #babel/core and #babel/runtime-corejs3 as dev dependencies.
Your preset needs to be changed
presets: [
[
"#babel/preset-env", {
"useBuiltIns": "usage",
corejs: { version: 3, proposals: true }
}
]
]
And then replace the code in index.js
imports babel/polyfill;
with
import 'core-js/stable';
If you can use typescript then I'll suggest that you can transform your tsconfig.js file and change target to es5.
If not then create .babelrc file and inside it add this:
{
"presets": [
[
"#babel/preset-env",
{
"useBuiltIns": "entry",
"forceAllTransforms": true,
"corejs": "3.0.0",
"targets": {
"ie": "11"
}
}
]
]
}
In the project that I work at the moment, we use browserify. I have done npm i into my console.
Then when I wanted to generate the js with the command
browserify src/scripts/jsx/SignUp/signUp-twoPages/App.jsx -o src/scripts/jsx/SignUp/signUp-twoPages/app.js
it throw an error
preset not found #babel/react
Like every developer I went online and did a search for #babel/react but nothing came up. I have seen variations as #babel/preset-react and tried to use them but it didn't solve my problem.
At that point, my package.json locked like:
{
...
"browserify": {
"transform": [
[
"babelify",
{
"presets": [
"es2015",
"react",
"stage-1"
],
"plugins": [
"transform-object-rest-spread"
]
}
]
]
},
"babel": {
"presets": [
"react",
"es2015",
"stage-1"
]
},
"scripts": {
"build-js": "browserify src/scripts/jsx/SignUp/signUp-twoPages/App.jsx -o src/scripts/jsx/SignUp/signUp-twoPages/app.js",
"buildSignUp": "npm run build-js",
...
},
"author": "",
"license": "ISC",
"dependencies": {
"#ungap/url-search-params": "^0.1.2",
"babel-polyfill": "^6.22.0",
"babel-preset-es2015": "^6.22.0",
"babel-preset-react": "^6.16.0",
"babelify": "^7.3.0",
"braintree-web": "^3.17.0",
"form-serialize": "^0.7.1",
"jest-junit": "^6.3.0",
"nock": "^10.0.6",
"object-assign": "^4.1.1",
"react": "^15.4.2",
"react-accessible-dropdown": "^1.0.2",
"react-animate-height": "^0.10.8",
"react-dom": "^15.4.2",
"react-dropdown": "^1.2.0",
"react-modal": "^3.8.1",
"react-redux": "^5.0.6",
"react-responsive-modal": "^1.9.4",
"react-scroll": "^1.4.7",
"react-select": "^2.1.2",
"react-slick": "^0.24.0",
"react-swipeable": "^5.4.0",
"redux": "^3.7.2",
"redux-thunk": "^2.2.0",
"slick-carousel": "^1.8.1",
"validator": "^6.2.1"
},
"devDependencies": {
"babel-core": "6.26.3",
"babel-jest": "^23.6.0",
"babel-plugin-transform-es3-member-expression-literals": "^6.22.0",
"babel-plugin-transform-es3-property-literals": "^6.22.0",
"babel-plugin-transform-object-rest-spread": "^6.26.0",
"babel-preset-env": "1.7.0",
"babel-preset-react": "6.24.1",
"babel-preset-stage-0": "^6.22.0",
"babel-preset-stage-1": "^6.24.1",
"babelify": "^7.3.0",
"browserify": "^13.3.0",
"core-js": "^2.5.3",
"envify": "^4.1.0",
"enzyme": "^3.7.0",
"enzyme-adapter-react-15": "^1.2.0",
"jest": "^23.6.0",
"react-test-renderer": "^15.6.2",
"redux-logger": "^3.0.6",
"redux-mock-store": "^1.5.3",
"redux-test-utils": "^0.3.0",
"uglify-js": "^3.3.9",
"uglifyify": "^4.0.5"
},
"-vs-binding": {
"ProjectOpened": [
"build"
]
},
"jest": {
"setupFiles": [
"<rootDir>/test-setup.js"
],
"moduleFileExtensions": [
"js",
"jsx"
],
"testMatch": [
"**/tests/*.js?(x)"
],
"reporters": [
"default",
"jest-junit"
],
"testPathIgnorePatterns": [
"<rootDir>/node_modules/",
"<rootDir>/obj/"
],
"coveragePathIgnorePatterns": [
"<rootDir>/node_modules/",
"<rootDir>/obj/"
]
}
}
What to install or what to change in order to fix this problem?
The solution in my case was to extend the preset of the package.json
Because the node module extends and evolves from one version to another one there a lot of cases when they are not compatible.
I had deleted my node_module.
Run npm i again.
Added babel-preset-react to my package.json without installing anything, browserify worked properly. My package.json locked like this.
{
"main": "App.jsx",
"browserify": {
"transform": [
[
"babelify",
{
"presets": [
"es2015",
"react",
"babel-preset-react",
"stage-1"
],
"plugins": [
"transform-object-rest-spread"
]
}
]
]
},
"babel": {
"presets": [
"react",
"es2015",
"babel-preset-react",
"stage-1"
]
},
"scripts": {
...
}
}
This solved my problem. Please let me know if it works for you as well.
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",