I wrote an npm package blokus which use ES6 syntax.

I used create-react-app to start a project web-blokus, which depends on blokus.

I can run npm start with no errors, and view my web-blokus app in my browser, and it has all the functionality from using the blokus package.

The problem is that I get an UglifyJS error when running npm build.

static/js/main.8afd34e2.js from UglifyJs
SyntaxError: Name expected [./~/blokus/blokus/blokus.js:3,0]

It appears there is a known situation with UglifyJS not supporting ES6 dependencies (a few relevant issue threads here and here). But I read through these threads as well as a handful of others and I was left pretty confused as to what was planning to be updated and what people were doing as workarounds.

So I wanted to

1) confirm that create-react-app will not work out of the box (once you go to npm build) if your app has any ES6 dependencies

2) ask what people are doing to fix / bypass the issue (do I have to eject, and swap something in for UglifyJS?)

Since create-react-app and ES6 are now so popular, I assume I'm either misunderstanding the limitation, or a standard method of dealing with this limitation is discussed and known.

I wrote an npm package blokus which use ES6 syntax.

I used create-react-app to start a project web-blokus, which depends on blokus.

I can run npm start with no errors, and view my web-blokus app in my browser, and it has all the functionality from using the blokus package.

The problem is that I get an UglifyJS error when running npm build.

static/js/main.8afd34e2.js from UglifyJs
SyntaxError: Name expected [./~/blokus/blokus/blokus.js:3,0]

It appears there is a known situation with UglifyJS not supporting ES6 dependencies (a few relevant issue threads here and here). But I read through these threads as well as a handful of others and I was left pretty confused as to what was planning to be updated and what people were doing as workarounds.

So I wanted to

1) confirm that create-react-app will not work out of the box (once you go to npm build) if your app has any ES6 dependencies

2) ask what people are doing to fix / bypass the issue (do I have to eject, and swap something in for UglifyJS?)

Since create-react-app and ES6 are now so popular, I assume I'm either misunderstanding the limitation, or a standard method of dealing with this limitation is discussed and known.

• javascript
• reactjs
• uglifyjs
• create-react-app

1 Answer 1

You can't use ES6 code with create-react-app, or most build systems.

npm packages shouldn't result in ES6 code because of existing tooling, and to a lesser extent, older node versions.

To set up your package, assuming the ES6 code is in the src directory:

npm install --save-dev babel-core babel-cli babel-preset-latest

.babelrc

{
  "presets": ["latest"]
}

package.json

  "main": "./lib",
  "scripts": {
    "build": "babel src --out-dir lib"
  }

Then do npm run build before publishing.

Create a .gitignore with 'lib' in it, and a .npmignore that's empty. The .npmignore needs to exist.

You can run your tests on the src directory (or lib, doesn't much matter).