Parcel: Cannot read property '__esModule' of null

Created on 2 Mar 2018  路  10Comments  路  Source: parcel-bundler/parcel

Choose one: 馃悰 bug report

馃帥 Configuration (.babelrc, package.json, cli command)

{
  "presets": [
    ["env", {
      "targets": {
        "browsers": ["last 2 versions"]
      }
    }]
  ],
  "plugins": [
    ["transform-react-jsx", { "pragma": "h" }]
  ]
}

馃 Expected Behavior

when i edit my source codes it should be rebuild successfully (but not).

馃槸 Current Behavior

yarn example
yarn run v1.3.2
$ parcel example/index.html --no-cache
Server running at http://localhost:1234
馃毃  /Users/willin/Documents/w2fs/i18n/src/index.js: Cannot read property '__esModule' of null
    at Function.normalisePlugin (/Users/willin/Documents/w2fs/i18n/node_modules/babel-core/lib/transformation/file/options/option-manager.js:142:21)
    at /Users/willin/Documents/w2fs/i18n/node_modules/babel-core/lib/transformation/file/options/option-manager.js:184:30
    at Array.map (<anonymous>)
    at Function.normalisePlugins (/Users/willin/Documents/w2fs/i18n/node_modules/babel-core/lib/transformation/file/options/option-manager.js:158:20)
馃毃  /Users/willin/Documents/w2fs/i18n/src/index.js: Cannot read property '__esModule' of null    at Function.normalisePlugin (/Users/willin/Documents/w2fs/i18n/node_modules/babel-core/li
b/transformation/file/options/option-manager.js:142:21)    at /Users/willin/Documents/w2fs/i18n/node_modules/babel-core/lib/transformation/file/opti
ons/option-manager.js:184:30    at Array.map (<anonymous>)
    at Function.normalisePlugins (/Users/willin/Documents/w2fs/i18n/node_modules/babel-core/lib/transformation/file/options/option-manager.js:158:20)
馃毃  /Users/willin/Documents/w2fs/i18n/src/index.js: Cannot read property '__esModule' of null    at Function.normalisePlugin (/Users/willin/Documents/w2fs/i18n/node_modules/babel-core/li
b/transformation/file/options/option-manager.js:142:21)
    at /Users/willin/Documents/w2fs/i18n/node_modules/babel-core/lib/transformation/file/opti
ons/option-manager.js:184:30    at Array.map (<anonymous>)
    at Function.normalisePlugins (/Users/willin/Documents/w2fs/i18n/node_modules/babel-core/lib/transformation/file/options/option-manager.js:158:20)
    at OptionManager.mergeOptions (/Users/willin/Documents/w2fs/i18n/node_modules/babel-core/lib/transformation/file/options/option-manager.js:234:36)
    at OptionManager.init (/Users/willin/Documents/w2fs/i18n/node_modules/babel-core/lib/tran
sformation/file/options/option-manager.js:368:12)
    at File.initOptions (/Users/willin/Documents/w2fs/i18n/node_modules/babel-core/lib/transformation/file/index.js:212:65)
    at new File (/Users/willin/Documents/w2fs/i18n/node_modules/babel-core/lib/transformation/file/index.js:135:24)
    at JSAsset.getParserOptions (/Users/willin/Documents/w2fs/i18n/node_modules/parcel-bundler/src/assets/JSAsset.js:69:20)
    at <anonymous>

馃拋 Possible Solution

Perhaps it's connected to:

export default {
  // xxx
}

馃捇 Code Sample

ref: https://github.com/willin/i18n/tree/561e4703c23e95709337abdfdbba3903a5061fa3

馃實 Your Environment

| Software | Version(s) |
| ---------------- | ---------- |
| Parcel | 1.6.2 |
| Node | 9.7 |
| npm/Yarn | 1.3.2 |
| Operating System | osx 10.13 |

Bug Confirmed Bug
Source
picture willin
👍4

Most helpful comment

@mischnic @konsumer placing babel config into .babelrc instead of package.json resolves the issue.

picture slmgc on 10 Mar 2018
👍7

All 10 comments

The example repo has the structure:

root
  |- example
    |- index.html
    |- index.js
  | package.json

package.json contains:

{
  "babel": {
    "presets": "env"
  }
}

Removing this part solves the issue. (Seems like an issue with parcel)

mischnic picture mischnic on 2 Mar 2018

I get same error, with this in my package.json:

"babel": {
    "presets": [
      "stage-3",
      "react-hmre",
      "react"
    ]
  }
konsumer picture konsumer on 6 Mar 2018

@mischnic @konsumer placing babel config into .babelrc instead of package.json resolves the issue.

slmgc picture slmgc on 10 Mar 2018
👍7

Just hit the same bug with the latest version. The bug happens only when Babel config is placed in package.json instead of .babelrc.

alexeyraspopov picture alexeyraspopov on 30 Mar 2018

Since all other babel tooling can use either (including babel-register, babel-cli, webpack with babel-loader, etc) it might make sense for parcel to follow suit. Putting my babel-config in package.json is a nice way to cut down on the number of config files in a project, and simplify configuration. I do this with everything that supports it (for example with jest, eslint, etc) and it means that I only have one file for all the meta/build info for a project. It's a small thing, but coupled with webpack's new sensible defaults, it made me move away from parcel for new projects, and back to webpack, in it's no-config setup. This seems related to (or maybe a duplicate of) #762

konsumer picture konsumer on 30 Mar 2018
👍4

Would be nice if this was supported. I'm using a very minimal setup for a project and the only dotfile hanging around is .babelrc.

ghost picture ghost on 29 Apr 2018
👍3

I'm also getting this error even with my babel config in .babelrc.

I'm running parcel version 1.8.1 and npm 6.0.0 with babel-core 6.26.3, babel-preset-env 1.7.0 on node v10.

I followed the instructions exactly at https://parceljs.org/transforms.html#babel as well.

jketcham picture jketcham on 17 May 2018

I'm getting this error as well. I've tried using parcel build, watch and serve, all seem to have the error at some point.

.../app/index.js: Cannot read property '__esModule' of null
    at Function.normalisePlugin (.../node_modules/babel-core/lib/transformation/file/options/option-manager.js:142:21)
    at .../node_modules/babel-core/lib/transformation/file/options/option-manager.js:184:30
    at Array.map (<anonymous>)
    at Function.normalisePlugins (.../node_modules/babel-core/lib/transformation/file/options/option-manager.js:158:20)
    at OptionManager.mergeOptions (.../node_modules/babel-core/lib/transformation/file/options/option-manager.js:234:36)
    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:72:20)

I do have my babel config in the package.json, but it looks like this is supported by parcel in v1.8.1 which I'm using (but not on master?):

https://github.com/parcel-bundler/parcel/blob/v1.8.1/src/transforms/babel.js#L205-L207

I'm working on an open source project, and the error occurs in this tree:

https://github.com/sj26/notygems/tree/parcel-bundler-parcel-issues-927

(The setup is derived from of a combination of create-react-app-parcel 馃挬, and react-parcel-example.)

(Parcel is amazing, thank you! 馃挅)

sj26 picture sj26 on 20 May 2018

Getting a little further, it looks like the babel plugin list is changing on recompilation. My compile works fine the first time, but breaks on subsequent recompiles (using watch, etc).

The first time, the plugin list reported from here looks like:

[ [ [Function], { spec: false, loose: false } ],
  [ [Function], { spec: false, loose: false } ],
  [ [Function], { spec: false, loose: false } ],
  [ [Function], { spec: false, loose: false } ],
  [ [Function], { spec: false, loose: false } ],
  [ [Function], { spec: false, loose: false } ],
  [ [Function], { spec: false, loose: false } ],
  [ [Function], { spec: false, loose: false } ],
  [ [Function], { spec: false, loose: false } ],
  [ [Function], { spec: false, loose: false } ],
  [ [Function], { spec: false, loose: false } ],
  [ [Function], { spec: false, loose: false } ],
  [ [Function], { spec: false, loose: false } ],
  [ [Function], { spec: false, loose: false } ],
  [ [Function], { spec: false, loose: false } ],
  [ [Function], { spec: false, loose: false } ],
  [ { __esModule: true, default: [Function] },
    { spec: false, loose: false } ],
  [ [Function], { polyfills: [Array], regenerator: true } ] ]

Next time, it's:

[ 'transform-class-properties',
  [ null, { spec: false, loose: false } ],
  [ null, { spec: false, loose: false } ],
  [ null, { spec: false, loose: false } ],
  [ null, { spec: false, loose: false } ],
  [ null, { spec: false, loose: false } ],
  [ null, { spec: false, loose: false } ],
  [ null, { spec: false, loose: false } ],
  [ null, { spec: false, loose: false } ],
  [ null, { spec: false, loose: false } ],
  [ null, { spec: false, loose: false } ],
  [ null, { spec: false, loose: false } ],
  [ null, { spec: false, loose: false } ],
  [ null, { spec: false, loose: false } ],
  [ null, { spec: false, loose: false } ],
  [ null, { spec: false, loose: false } ],
  [ null, { spec: false, loose: false } ],
  [ null, { spec: false, loose: false } ],
  [ null, { spec: false, loose: false } ],
  [ null, { spec: false, loose: false } ],
  [ { __esModule: true }, { spec: false, loose: false } ],
  [ null, { spec: false, loose: false } ],
  [ null, { spec: false, loose: false } ],
  [ null, { spec: false, loose: false } ],
  [ null, { polyfills: [Array], regenerator: true } ],
  [ null, { pragma: 'React.createElement' } ],
  [ null, { spec: false, loose: false } ],
  [ null, { spec: false, loose: false } ],
  [ null, { spec: false, loose: false } ],
  [ null, { spec: false, loose: false } ],
  [ null, { spec: false, loose: false } ],
  [ null, { spec: false, loose: false } ],
  [ null, { spec: false, loose: false } ],
  [ null, { spec: false, loose: false } ],
  [ null, { spec: false, loose: false } ],
  [ null, { spec: false, loose: false } ],
  [ null, { spec: false, loose: false } ],
  [ null, { spec: false, loose: false } ],
  [ null, { spec: false, loose: false } ],
  [ null, { spec: false, loose: false } ],
  [ null, { spec: false, loose: false } ],
  [ null, { spec: false, loose: false } ],
  [ null, { spec: false, loose: false } ],
  [ null, { spec: false, loose: false } ],
  [ null, { spec: false, loose: false } ],
  [ { __esModule: true }, { spec: false, loose: false } ],
  [ null, { spec: false, loose: false } ],
  [ null, { spec: false, loose: false } ],
  [ null, { spec: false, loose: false } ],
  [ null, { polyfills: [Array], regenerator: true } ],
  [ null, { pragma: 'React.createElement' } ],
  [ [Function], { spec: false, loose: false } ],
  [ [Function], { spec: false, loose: false } ],
  [ [Function], { spec: false, loose: false } ],
  [ [Function], { spec: false, loose: false } ],
  [ [Function], { spec: false, loose: false } ],
  [ [Function], { spec: false, loose: false } ],
  [ [Function], { spec: false, loose: false } ],
  [ [Function], { spec: false, loose: false } ],
  [ [Function], { spec: false, loose: false } ],
  [ [Function], { spec: false, loose: false } ],
  [ [Function], { spec: false, loose: false } ],
  [ [Function], { spec: false, loose: false } ],
  [ [Function], { spec: false, loose: false } ],
  [ [Function], { spec: false, loose: false } ],
  [ [Function], { spec: false, loose: false } ],
  [ [Function], { spec: false, loose: false } ],
  [ [Function], { spec: false, loose: false } ],
  [ [Function], { spec: false, loose: false } ],
  [ [Function], { spec: false, loose: false } ],
  [ { __esModule: true, default: [Function] },
    { spec: false, loose: false } ],
  [ [Function], { spec: false, loose: false } ],
  [ [Function], { spec: false, loose: false } ],
  [ [Function], { spec: false, loose: false } ],
  [ [Function], { polyfills: [Array], regenerator: true } ],
  [ [Function], { pragma: 'React.createElement' } ],
  [ [Function], { spec: false, loose: false } ],
  [ [Function], { spec: false, loose: false } ],
  [ [Function], { spec: false, loose: false } ],
  [ [Function], { spec: false, loose: false } ],
  [ [Function], { spec: false, loose: false } ],
  [ [Function], { spec: false, loose: false } ],
  [ [Function], { spec: false, loose: false } ],
  [ [Function], { spec: false, loose: false } ],
  [ [Function], { spec: false, loose: false } ],
  [ [Function], { spec: false, loose: false } ],
  [ [Function], { spec: false, loose: false } ],
  [ [Function], { spec: false, loose: false } ],
  [ [Function], { spec: false, loose: false } ],
  [ [Function], { spec: false, loose: false } ],
  [ [Function], { spec: false, loose: false } ],
  [ [Function], { spec: false, loose: false } ],
  [ [Function], { spec: false, loose: false } ],
  [ [Function], { spec: false, loose: false } ],
  [ [Function], { spec: false, loose: false } ],
  [ { __esModule: true, default: [Function] },
    { spec: false, loose: false } ],
  [ [Function], { spec: false, loose: false } ],
  [ [Function], { spec: false, loose: false } ],
  [ [Function], { spec: false, loose: false } ],
  [ [Function], { polyfills: [Array], regenerator: true } ],
  ... 1 more item ]

is the babel config being reparsed against itself, and keeps appending or something? Maybe this is trouble in the preset?

sj26 picture sj26 on 20 May 2018

Fixed by #1515

devongovett picture devongovett on 6 Jan 2019
Was this page helpful?
0 / 5 - 0 ratings

Related issues

oliger picture oliger  路  3Comments
mnn picture mnn  路  3Comments
will-stone picture will-stone  路  3Comments
dotdash picture dotdash  路  3Comments
Niggler picture Niggler  路  3Comments