parcel: 🐛 wrong babel usage

I don’t know is that a bug report or my mistake, but whole day today I’m struggling and get different behavior from time to time.

This is my .babelrc

{
  "presets": [
    "env",
    "stage-1",
    "react"
  ],
  "plugins": ["transform-react-jsx"],
  "ignore": [
    "node_modules"
  ]
}

and this is the message what I see

Server running at http://localhost:1234
🚨  /.../node_modules/attr-accept/dist/index.js: [BABEL] /.../node_modules/attr-accept/dist/index.js: Using removed Babel 5 option: /.../node_modules/attr-accept/.babelrc.stage - Check out the corresponding stag    at Logger.error (/.../node_modules/babel-core/lib/transformation/file/logger.js:41:11)
    at OptionManager.mergeOptions (/.../node_modules/babel-core/lib/transformation/file/options/option-manager.js:220:20)
    at OptionManager.init (/.../node_modules/babel-core/lib/transformation/file/options/option-manager.js:368:12)
    at File.initOptions (/.../node_modules/babel-core/lib/transformation/file/index.js:212:65)
    at new File (/.../node_modules/babel-core/lib/transformation/file/index.js:135:24)
    at JSAsset.getParserOptions (/.../node_modules/parcel-bundler/src/assets/JSAsset.js:60:20)
    at <anonymous>

that happens when I use react-dropzone package. Looks like that parcel/babel transpile node_modules as well?

here is my package.json

  "dependencies": {
    "prop-types": "15.6.0",
    "react": "16.1.0",
    "react-dom": "^16.2.0",
    "react-dropzone": "4.2.3",
    "react-pdf": "2.5.2"
  },
  "devDependencies": {
    "babel-core": "^6.26.0",
    "babel-plugin-add-module-exports": "0.2.1",
    "babel-plugin-transform-react-jsx": "^6.24.1",
    "babel-preset-env": "^1.6.1",
    "babel-preset-react": "6.24.1",
    "babel-preset-stage-1": "6.24.1",
    "cross-env": "^5.1.1",
    "enzyme-adapter-react-16": "^1.1.0",
    "eslint": "4.14.0",
    "eslint-config-airbnb": "16.1.0",
    "eslint-plugin-import": "2.8.0",
    "eslint-plugin-jsx-a11y": "6.0.3",
    "eslint-plugin-react": "7.5.1",
    "jest": "^21.2.1",
    "node-sass": "^4.7.2",
    "parcel-bundler": "^1.1.0",
    "prettier": "^1.9.1"
  }

as soon as I don’t use that package everything is ok.

 parcel --version
1.4.1

About this issue

Original URL
State: closed
Created 6 years ago
Reactions: 2
Comments: 15 (4 by maintainers)

Most upvoted comments

In v1.6.0, we no longer transpile node_modules by default. Closing.

devongovett on Feb 20, 2018

I’ve also encountered this problem. Im trying to create some starter app with react and material-ui. With the latest version parcel is working great. But when I want to use material-ui@next the problem with babelrc shows up. There are multiple packages in nodemodules that contains Babelrc file which parcel tries to ctranspile and this is causing crash preventing my app to run. After deleting all Babelrc files from modules app successfully starts up bit then there are some problem with importing components from material-ui 😦

stychu on Jan 11, 2018

@azz This is exactly the issue what I’m talking about here, and yep package react-input-autosize has .babelrc in module’s root folder.
it’s still not ok to transpile node_modules in my opinion.

Here is one more example

./node_modules/react-dropzone/dist/es/index.js: Unknown plugin "add-module-exports" specified in "./node_modules/react-dropzone/.babelrc.env.development" at 0, attempted to resolve relative to "./node_modules/react-dropzone"

It’s enough to check that the path of the current asset (asset.name) contains a node_modules substring. And if it contains then we do not need to transpile the asset.

I’ve tried to do something like that

async function shouldTransform(asset) {
  if (asset.name.indexOf('node_modules') !== -1) {
    return false;
  }

  if (asset.isES6Module) {
    return true;
  }

  if (asset.ast) {
    return !!asset.babelConfig;
  }

  if (asset.package && asset.package.babel) {
    return true;
  }

  let babelrc = await config.resolve(asset.name, ['.babelrc', '.babelrc.js']);
  return !!babelrc;
}

but it does not work somehow 😦

nnnikolay on Jan 5, 2018

Having a similar issue - is there a way to disable babel on node_modules?

Couldn't find preset "es2015" relative to directory ...

🚨  /Users/azz/code/npm-ui/node_modules/react-input-autosize/lib/AutosizeInput.js: Couldn't find preset "es2015" relative to directory "/Users/azz/code/npm-ui/node_modules/react-input-autosize"
    at /Users/azz/code/npm-ui/node_modules/babel-core/lib/transformation/file/options/option-manager.js:293:19
[1]     at Array.map (<anonymous>)
[1]     at OptionManager.resolvePresets (/Users/azz/code/npm-ui/node_modules/babel-core/lib/transformation/file/options/option-manager.js:275:20)
[1]     at OptionManager.mergePresets (/Users/azz/code/npm-ui/node_modules/babel-core/lib/transformation/file/options/option-manager.js:264:10)
[1]     at OptionManager.mergeOptions (/Users/azz/code/npm-ui/node_modules/babel-core/lib/transformation/file/options/option-manager.js:249:14)
[1]     at OptionManager.init (/Users/azz/code/npm-ui/node_modules/babel-core/lib/transformation/file/options/option-manager.js:368:12)
[1]     at File.initOptions (/Users/azz/code/npm-ui/node_modules/babel-core/lib/transformation/file/index.js:212:65)
[1]     at new File (/Users/azz/code/npm-ui/node_modules/babel-core/lib/transformation/file/index.js:135:24)
[1]     at JSAsset.getParserOptions (/Users/azz/code/npm-ui/node_modules/parcel-bundler/src/assets/JSAsset.js:60:20)
[1]     at <anonymous>

azz on Jan 5, 2018