tscizzle tscizzle -4 years ago 153
Javascript Question

Using create react app, and having ES6 dependencies

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.

Answer Source

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).

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download