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

[benbonnet]

It only happen within safari. I might not be advanced enough to find the correct workaround to avoid this; I'm using the default webpacker install, webpack-dev-server is @2.9.3

[joerodrig]

Is this error appearing from code you wrote? Importing a 3rd party package? An example would help a bit.

[vitexikora]

Happens to me too, when I wanted to Local-test a React app in Safari, however the local testing fired even more problems. Currently it is in webpack code:

eval("/* WEBPACK VAR INJECTION */(function(__resourceQuery) {\n\n/* global __resourceQuery WorkerGlobalScope self */\n/* eslint prefer-destructuring: off */\n\nconst url = __webpack_require__(\"./node_modules/url/url.js\"); .... ")

[p0wl]

Your babel configuration is probably wrong, so that it does not compile es6 to es5. Chrome is already supporting const, so it only breaks in safari.

can you show the content of your .babelrc?

[benbonnet]

It is actually the default one provided by webpacker:install :

{
  "presets": [
    [
      "env",
      {
        "modules": false,
        "targets": {
          "browsers": "> 1%",
          "uglify": true
        },
        "useBuiltIns": true
      }
    ],
    "react"
  ],
  "plugins": [
    "syntax-dynamic-import",
    "transform-object-rest-spread",
    [
      "transform-class-properties",
      {
        "spec": true
      }
    ]
  ]
}

I do use the following within nodejs apps, works well :

{
  "presets": [
    "es2015",
    "react",
    "stage-0"
  ],
  "plugins": ["transform-class-properties"]
}

Tried to add to the es2015 and stage-0 presets to the one within within rails (after adding the relevant packages), the error still persists. I clearly lack of understanding into this specific part; glad if it could be cleared

In case, the current state is basic.
Below is the package.json :

{
  "name": "app",
  "private": true,
  "dependencies": {
    "@rails/webpacker": "^3.0.2",
    "axios": "^0.17.0",
    "babel-preset-react": "^6.24.1",
    "coffeescript": "1.12.7",
    "flickity": "^2.0.10",
    "prop-types": "^15.6.0",
    "react": "^16.0.0",
    "react-color": "^2.13.8",
    "react-dom": "^16.0.0",
    "react-redux": "^5.0.6",
    "react-router": "^4.2.0",
    "react-router-dom": "^4.2.2",
    "react-sortable-hoc": "^0.6.8",
    "redux": "^3.7.2",
    "redux-logger": "^3.0.6",
    "redux-thunk": "^2.2.0",
    "webpacker-react": "^0.3.2"
  },
  "devDependencies": {
    "webpack-dev-server": "^2.9.3"
  }
}

The app/javascript/packs is this :

import App from "../apps/main/index"
document.addEventListener('DOMContentLoaded', () => {
  App.start()
})

and the app/javascript/apps/main/index is this :

const App = {
  start() {
    console.log("ok")
  }
}

export default App;

[joerodrig]

Babel has deprecated babel-preset-es2015, so you shouldn't need to use that anymore. babel-preset-env, which is the default preset handles versioning, so you may have to adjust your targets line in your babelrc file so it's compatible with a lower Safari version range.

Tried reproducing the error on Safari 11 from the code you submitted above and wasn't able to. The page appears to load fine. Here's the repo I tested with: https://github.com/joerodrig/safari-error. I created a new rails app using the webpack=react generator, then added the code you submitted above.

Is your version of safari less than 10? Versions 5.1 - 9.1 do not support using const in strict mode. Version 10 was the first to apparently have full support. See http://caniuse.com/#feat=const for reference

[benbonnet]

I'm 9.1, I guess that's the reason. many thx for your answer

[dsacramone]

@joerodrig So, I am using Safari 9.1 and getting the same error. Other than "upgrading" Safari, is there a workaround?

My env is targeting safari > 7, still getting the error.

["env", {
  "targets": {
    "browsers": ["last 2 versions", "safari >= 7"]
  }
}],

[eirikb]

@dsacramone have you excluded _node_modules_?
Perhaps a dependency uses const, and so you can't exclude anything.
Just a thought .

[burrack]

@eirikb where he should exclude node_modules ?

Thanks

[eirikb]

@burrack _not_ exclude them. It's not uncommon to do something like this:

     {
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/
      }

, but instead I suggest

     {
        test: /\.js$/,
        loader: 'babel-loader'
      }

. Not sure how relevant that is though, just a thought, since some imported packages also needs to be transpiled.

[whusterj]

Someone pointed this out elsewhere, but if you are seeing this issue when using the webpack dev server, you'll need to downgrade:

https://github.com/webpack/webpack-dev-server#caveats - Version 2.8.0 introduced a change which included ES6 keywords const and let, to support older browsers, downgrade to version 2.7.1

[gauravtiwari]

thanks @whusterj

Or upgrade to latest webpack-dev-server

[burrack]

I get this error on safari 9.
Maybe someone can help me ?

This is what i have:

.babelrc

{
  "presets" : [
    "es2015",
    "react",
    "stage-0"
  ],
  "plugins": [
    "syntax-dynamic-import"
  ]
}

webpack version: 2.3.3

part of webpack config

 module: {
    rules: [
      {
        test: /\.js?/,
        include: [path.resolve(paths.client.appDir), path.resolve(paths.shared.dir)],
        use: {
          loader: 'babel-loader',
          options: {
            plugins: ['syntax-dynamic-import']
          }
        }
      },

I don't use webpack-dev-server

[hiepnm]

I still get this error on iOS 9.3.5 and safari 9.0
"webpack-dev-server": "^3.1.2",

[maycrodrigues]

I still get this error on iOS 9.3.5 and safari 9.0

[francosalcedo]

Apparently there is no solution.