CODEWITHSUNDEEP
javascriptnode.jsreactjsnpmbabeljs
Uri
Uri

Reputation: 26966

How to use babel with npm package that will be used by react

Trying to do what I thought was a simple thing.

I have a node package that uses advanced js syntax. I want to depend on it in a react project.

So I installed babel packages via --save-dev, and added a .babelrc:

{
  "presets": ["env"],
  "plugins": ["transform-object-rest-spread"]
}

That was not enough so I added an npm script under install to trigger the compilation. Then I had to include the compiled target lib/index.js as my entry point via main. So in the end my package.json looks something like this:

{
  "name": "bla",
  "version": "1.0.0",
  "scripts": {
    "postinstall": "babel src --out-dir lib"
  },  
  "main": "lib/index.js",
  "dependencies": {},  
  "devDependencies": {
    "babel-cli": "^6.26.0",
    "babel-plugin-transform-object-rest-spread": "^6.26.0",
    "babel-preset-env": "^1.6.1",
    "babel-preset-react-native": "^4.0.0"
  }
}

When I run npm install locally on this project, it builds properly. However when react scripts build this (the dep is from github), I get an error: sh: 1: babel: not found.

Why is this so difficult? What am I doing wrong?

Upvotes: 3

Views: 2181

Answers (3)

deiga
deiga

Reputation: 1637

I am not sure I understand the need here correctly, but could you not just run the babel call in prepare or prepublish scripts? That way only local npm install calls would pick that up.

See more about npm scripts lifecycle: https://docs.npmjs.com/misc/scripts

Upvotes: 0

Uri
Uri

Reputation: 26966

This hack worked instead of the postinstall:

...
"preinstall": "npm install --ignore-scripts && babel src --out-dir lib",
...

Source: https://github.com/Financial-Times/structured-google-docs-client/commit/891180db742ed00cace0139b201850f79d337098

Also relevant: https://github.com/npm/npm/issues/10366

Upvotes: 0

jake
jake

Reputation: 488

sh: 1: babel: not found is from your shell not finding the babel binary file (normally under ./node_modules/.bin/babel)

You'd want to compile before you publish to npm, so anyone who installs your package has the built files. But, for Github try something like:

"postinstall": "npx babel src --out-dir lib"

Upvotes: 1

Related Questions