Application does not render in IE/Edge

[chelfenbein]

After installing the Ping CRM demo application according to the documentation it works as expected in Firefox and Google Chrome browsers, but when trying to access it in IE/Edge the application does not render and the Javascript console shows the following error:

"SCRIPT1028: SCRIPT1028: Expected identifier, string or number" app.js (522, 1)

"use strict";
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var axios__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! axios */ \"./node_modules/axios/index.js\");\n/* harmony import */ var […]

I've experienced the same issue with another application I've migrated to InertiaJS so it might be a general issue with InertiaJS.

[reinink]

Hmm, interesting. Some quick Google search seems to suggest this is a trailing comma issue. For example:

var obj = {
   id: 123,
   name: 'bla',  <--
}

I'll have to test this manually and see if I can track down the issue.

[zappzerapp]

+1

Stunning library by the way, but unfortunately a gamebreaker for me, as long as it's not running in IE 11.
Maybe this is an issue of webpack (?)

[chelfenbein]

Any updates on this issue?

I would really appreciate to use this amazing library in the software I'm currently working on.
But the planned release date is in august 2019 and it has to run in every current browser.

Anyway, keep up the excellent work. :)

[dd10-e]

Adding this code into webpack.mix.js worked well for me. (checked on Edge only)

    module: {
      rules: [{
        test: /\.js?$/,
        use: [{
          loader: 'babel-loader',
          options: mix.config.babel()
        }]
      }]
    },

[zappzerapp]

@Elod10, I'm not sure what I did wrong, but if I add in .webpackConfig after resolve: {...}, I can't compile it anymore.

fail.txt
webpack.mix.js.txt

[chelfenbein]

@Elod10
Thank you very much. Your solution helped me with slightly modifications to solve the rendering issues of my InertiaJS applications in IE and Edge browsers.

@zappzerapp
Maybe it solves your compiling issues if you modify your configuration as below.

webpack.mix.js:

module: {
    rules: [{
        test: /\.js$/,
        use: {
            loader: 'babel-loader',
            options: {
                presets: ['@babel/preset-env']
            }
        }
    }]
}

.babelrc:

{
    "plugins": ["@babel/plugin-syntax-dynamic-import"]
}

package.json:

"@babel/core": "^7.5.4",
"@babel/preset-env": "^7.5.4",
"@babel/plugin-syntax-dynamic-import": "^7.2.0",
"babel-polyfill": "^6.26.0",

Polyfill was necessary in my setup to achieve compatibility with IE.

[zappzerapp]

Yeah, it looks good now. Thank you @chelfenbein

[sebastiandedeyne]

This is caused by inertiajs/inertia#54, and will be solved when version 0.1 is released!

Note that some polyfills might always be necessary, but we'll document those in the future.

[sebastiandedeyne]

Inertia 0.1 has been released, so this is solved!

[paulotra]

It still doesn't work on my end, do i have to place it after resolve or does it work interchangeably? I also am getting this error.

[paulotra]

@zappzerapp do you still need to import babel-polyfill in webpack.mix.js?

[zappzerapp]

@paulotra i had to extend the webpack.mix.js by the following code

    module: {
      rules: [{
        test: /\.js$/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env'],
          },
        },
      }],
    },

Besides, I had to add import 'core-js/es6/string'; and require("es6-promise").polyfill(); to the app.js