Updating to v2.0.0 breaks building of a create-react-app application

[koox00]

Updating to v2.0.0 breaks the production build of an app created with create-react-app.

Failed to minify the code from this file:

        ./node_modules/subscribe-ui-event/dist-es/lib/listen.js:28

Read more here: http://bit.ly/2tRViJ9

[redonkulus]

Related issue yahoo/react-stickynode#111

[houkanshan]

Hi, I just updated to 2.0.2 but still caught the error of using const in IE 10, Chrome < 41 and Safari 9

I believe these 2 files index.es.js and index.js should also be transpiled with Babel?

[redonkulus]

The index.es.js file should only be used by browsers that support ES6 features. Older browsers should use index.js. Compiling index.es.js to ES5 defeats the purpose of the file itself. How is the index.es.js file being loaded in older browsers? What is your compile step like?

[houkanshan]

Thanks for response. I created a demo to show it: https://gist.github.com/houkanshan/8b2734c61b4b1ef7055a951a082db020

1. In my config for babel-loader, node_modules & bower_components is excluded for improving performance according to the doc.
2. webpack choose to import index.es.js by pkg.module

According to the rollup's doc：

pkg.module will point to a module that has ES2015 module syntax but otherwise only syntax features that the target environments support.

and the discussion on webpack, I believe currently the pkg.module is only for ES2015 module syntax, the rest of the code is still suggested that be precompiled to ES5. As for pure ES6 code, maybe we can use other name like pkg.esnext in the future according to 2ality's proposal?

[azu]

webpack use "module" field by default.
Because, default resolve.mainFields's value is ['browser', 'module', 'main'].

(I've used react-stickynode. it break old browser for the above reason)

Currently, I've used a workaround for this issue.

webpack.config.js:

module.exports = {
    // ...cut...
    alias: {
        'subscribe-ui-event': path.join(__dirname, `node_modules/subscribe-ui-event/index.js`)
    )
  }
}

[houkanshan]

@azu , yes, Webpack use "module" field by default because they are following the Rollup's proposal about pkg.module.

But I had checked node_modules/subscribe-ui-event/index.js and it's still using the const keyword. So I'm not sure how this alias fixed that problem.

Anyway, this is my workaround:

{
  loader: 'babel-loader',
  test: /\.jsx?$/,
  exclude: {
    test: [
      path.resolve(__dirname, '../node_modules'),
      path.resolve(__dirname, '../bower_components'),
    ],
    exclude: /subscribe-ui-event/,
  },
},

It informs the developers that "subscribe-ui-event has ES6 code, Babel should handle it".

[stefensuhat]

is this fixed?. It happen on my project too. Can't build the project.

[kelly-tock]

I had to downgrade react-stickynode because of this.

[kelly-tock]

what about adding a browser field with no const in it?

[kelly-tock]

@houkanshan tried code above, did not change that const was still in the file.

[redonkulus]

@roderickhsiao can this be closed now? or we still have an issue?

[roderickhsiao]

It seems like the build error is gone, now the issue is the const part for old browser.

I think we could just replace const from https://github.com/yahoo/subscribe-ui-event/blob/master/index.js

[kelly-tock]

Yes please

[roderickhsiao]

@redonkulus could close this :)