Vue-cli and iOS 9 SyntaxError: Unexpected keyword 'const'. Const declarations are not supported in strict mode

vue-cli

#1

Hello,

I have a bug with a vue-cli project on iOS 9.
To reproduce:

clone: https://github.com/francoisromain/vue-cli-io9-bug
or follow the steps:

  • create a bare new project with vue-cli.
  • add one npm dependency like email-regex
  • modify browserslist to work in iOS 9 : "iOS >= 9"
  • add an index.js with an express server to serve the dist directory

Build and start the express server with npm run build && node ./index.js.

Problem

On iOS 9 there is an error:

SyntaxError: Unexpected keyword 'const'. 
Const declarations are not supported in strict mode.

The const keyword comes from the email-regex lib wich is not tranformed by babel.
Why?

Thank you


#2

To fix it I added the email-regex module which need to transpile in vue.config.js: transpileDependencies: ["email-regex"] like explained here: https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/babel-preset-app#polyfills

Then I had another error: TypeError: Cannot assign to read only property.

I fixed this one with sourceType: “unambiguous”`` in the babel config like explained here. https://github.com/webpack/webpack/issues/4039#issuecomment-419284940

Is that correct?


#3

A solution that doesnt require messing with Babel sourceType setting is to simply use require() to import such a module.

The package you import is a commonjs module, primarily meant to be used in node, but works in. The browser.

However when transpiling it while using import to import it, the error you saw will often arise.


#4

If I require the module there is still the same error: TypeError: Attempted to assign to readonly property.

About the const error, do I have to add every module I import to the transpileDependencies?


#5

Only those that use JS features that you have to transpile.

Hm. Worked for me, usually.


#6

ok thank you @LinusBorg