Nuxt.js: Unexpected token '...'. Expected a property name in Safari

[yariksav]

Version

v2.4.3

Reproduction link

http://prntscr.com/mn65uj
https://codesandbox.io/s/jk63v43ww

Steps to reproduce

Please help to get clarity of problem. Application falls down at loading

What is expected ?

Safari doesn't support spread in destructuring

What is actually happening?

1) @nuxt/webpack uses extract-css-chunks-webpack-plugin version 3.3.2
2) extract-css-chunks-webpack-plugin uses normalize-url package
3) normalize-url/index.js has untransposed destruction operator
{
...options
}
4) If I comment "...options" in file
./node_modules/extract-css-chunks-webpack-plugin/node_modules/normalize-url/index.js at 22 line everything works ok

https://github.com/sindresorhus/normalize-url/blob/b4201b4dc647cfb6dc3f70acd7d38630ecf18d3e/index.js#L22

Additional comments?

Maybe package extract-css-chunks-webpack-plugin shuldn't get to vendors.app.js?
Thank you for helping!

_{This bug report is available on Nuxt community (#c8688)}

[yariksav]

[manniL]

extract-css-chunks-webpack-plugin should never be part of your bundle (in production) as it is a webpack plugin 🤔

Do you see the issue in prod or only in dev?

[yariksav]

Thank you, @manniL for answering. I have this bug in dev mode
I even don't realize how this module was added to vendor.
If you need to see addition information, configuration or files - let me know

[manniL]

@yariksav Can you spin up a reproduction CodeSandbox? (via https://template.nuxtjs.org/)

[yariksav]

@manniL Seems to I've reproduced this bug in codesandbox
https://codesandbox.io/s/jk63v43ww
Just use latest nuxt 2.4.3 and mode: spa, and open it in Safari

My Safari version is 11.0 (13604.1.38.1.6)

[clarkdo]

@manniL extract-css-chunks-webpack-plugin may be partially in the bundle since it needs some code to inject the style, but only in dev

@yariksav You can try to add extract-css-chunks-webpack-plugin in transpile

[yariksav]

@clarkdo , thanks for answer. Can you show example how to add extract-css-chunks-webpack-plugin in transpile
because if i put it to nuxt.config.js to

  build: {
    transpile: ['extract-css-chunks-webpack-plugin']
     ...  
  }

It totally crashes application

[clarkdo]

@yariksav Your config should be fine, could you provide a repo ?

You could also try transpile: ['normalize-url']

[yariksav]

@clarkdo repo - https://codesandbox.io/s/6jryy5pyvn

And transpile: ['normalize-url'] also is not working :(

[clarkdo]

@yariksav It's a conflict that babel preset useBuiltIns: usage make normalize-url a harmony module and webpack runtime module doesn't work with harmony module.

You can use babel.preset to set useBuiltIns: 'entry' by:

    babel: {
      presets: ({ isServer }) => {
        return [[
          '@nuxt/babel-preset-app',
          {
            buildTarget: isServer ? 'server' : 'client', // for auto import polyfill
            useBuiltIns: 'entry'
          }
        ]]
      }
    },
    transpile: ['normalize-url']

It would be better that open an issue in extract-css-chunks-webpack-plugin or turn off extractCSS in dev mode

[javialon26]

I have the same issue with the wpapi package. If I don't use the babel config provided by @clarkdo, the code added to the vendor app file has the spread operator and fail in many browsers.

This behavior started with NuxtJs 2.4.3. With 1.4 this just works out of the box.

[husayt]

I have the same in 2.4.3 and 2.4.5, causing issues on IE11

[clarkdo]

Fixed in extract-css-chunks-webpack-plugin, dependency has been upgraded in dev branch, I’ll pick it into next patch release

[drewbaker]

Did this get put into a release of Nuxt? I'm seeing the same error on Safari 10.1. Perhaps not related extract-css-chunks-webpack-plugin, it's hard to test exclusively via browserstack.

[clarkdo]

@drewbaker It has been fixed since https://github.com/faceyspacey/extract-css-chunks-webpack-plugin/releases/tag/v3.3.3 , could you double confirm the package version in node_moudles, if it’s correct, could you provide a reproducible repo ?

[drewbaker]

Yes, I created a code sandbox here: https://zqxk0lw813.sse.codesandbox.io/

See screenshot from Safari 10.1.2 via browserstack. You get two errors, the first one in start.js is maybe a browserstack JS error based on their code inspector tools, but the second unexpected token error is seems related to Nuxt in some way. I'm trying to find a computer in the wild running 10.1.2 of Safari, a client is reporting errors on a site we built, and I think this is the error.

[clarkdo]

Sorry that I cannot look into this unit next week since my laptop is broken and I’m using mobile for commenting.

I’ll try to get back to you ASAP.

BTY, could you try latest nuxt-edge, there is another safari fix on it which hasn’t been released yet.

[drewbaker]

Yes, just tried nuxt-edge and get the same errors: https://meqns.sse.codesandbox.io/

[clarkdo]

I suppose it may be related your dependency which includes spread operator, if you can find it, then add it into transpile should fix the problem.

[drewbaker]

Thanks @clarkdo but those code sandboxes have no code from me, those are just the default installs. So it's no dependency from me.

[clarkdo]

OK, could find which package is the error source code from ?

[drewbaker]

I attached two screenshots with the two errors.

[clarkdo]

Which package is using deepMerge and localContentScripts ?

[drewbaker]

No idea, I'm guessing localContentScripts is a browserstack thing (based on it being part of a script that looks to be related to firebug - which is weird on Safari), so maybe don't worry about that one yet.

deepMerge I have no idea, I don't know Nuxt core construction that well.

[clarkdo]

OK, I’ll look into it as soon as my device gets repaired

[drewbaker]

Thanks @clarkdo I submitted a paid-support ticket for this too, I'll let you know if that gets fixed sooner.

[pi0]

Upgrading to [email protected] should fix it for you @drewbaker. (nuxt/http#61)

IMPORTANT: Other users facing this problem, that may not be this bug. Any untranspiled lib can be a reason. As a general fix, you may to add incompatible lib to build.transpile:

{
  build: {
        transpile: [
            'package name'
        ]
  }
}