Error building with Webpack 2's UglifyJsPlugin

[insin]

I'm trying to run a --preact build while testing nwb's Webpack 2 upgrade and getting the following error:

ERROR  in vendor.db2641fb.js from UglifyJs
SyntaxError: Unexpected token: punc ()) [./~/preact-compat/src/index.js:31,0][ve
ndor.db2641fb.js:1557,24]

jsnext:main and module are pointing to src/index.js, which contains some untranspiled ES6 (which UglifyJS can't currently handle) - it's my understanding that the current approach which needs to be used with these package.json configs is to create a build which transpiles everything except ES6 module syntax back to ES5 and point to that.

[developit]

I think there is another open issue for this from @piuccio. Personally I think it's silly to only transpile ES Modules, we should be transpiring es2016 in its entirety since that's the spec :(

That said I do want to support this and I'm not wanting anyone to use es2015 in prod just because of me. We should merge that PR I think.

[ctrlplusb]

FYI, temporary workaround in webpack config is to remove the 'jsnext:main' option from the mainFields. i.e.

    ...
    resolve: {
      mainFields: ['main', 'web'],
      ...

[piuccio]

I made it work turning on babel on node_modules/preact

[ctrlplusb]

Aha thats much better! I assume you meant preact-compat though, and not preact. 😉

For clarities' sake, an example:

        {
          test: /\.jsx?$/,
          loader: 'babel-loader',
          include: [
            path.resolve(appRootPath, './src'),
            path.resolve(appRootPath, './node_modules/preact-compat'),
          ],
          query: {
            presets: [
              // JSX
              'react',
              // All the latest JS goodies, except for ES6 modules which
              // webpack has native support for.
              ['latest', { modules: false }],
            ],
          },
        },

[developit]

@ctrlplusb going to test this out with Webpack 2 now :)

[piuccio]

Yeah something like that. I actually included all node modules and excluded the ones that don't work.

You might have to include proptypes as well, can't remember, sorry

[ctrlplusb]

@developit 100% working. I have the config in my repo with all the latest goodies. :)

[astericky]

wow! Thanks for this solution @ctrlplusb . I still don't quite understand why it works yet but thanks.

[BANG88]

Another option is using the build version,I try to replace React with Preact-Compat have the same issue as @insin , But i use TypeScript instead of babel ,It works well and my config is:

'alias': {
      'react': 'preact-compat/dist/preact-compat',
      'react-dom': 'preact-compat/dist/preact-compat'
 }

[rubencodes]

I came across this as well—solved using the "include" syntax mentioned above. I think it would be worthwhile to document this under Usage with Webpack—I could submit a pull request if it's helpful!

[developit]

Readme would be okay, but I'd prefer to not require a workaround. Need to produce an ES Modules bundle and point modules at it.

[developit]

FWIW I showed another solution to this on Twitter - it involves running babel-loader on modules from node_modules that declare jsnext:main/modules entrypoints. I'd still like to pre-bundle preact and preact-compat though, there is a size savings there.

[developit]

Just realized this is a duplicate of #155, which was closed perhaps a little prematurely. Let's move discussion there :)