0

I'm trying to run my VueJS + Nuxt app on IE and get the following error:

'Unable to get property 'call' of undefined or null reference'

This happens in the following line: modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));

when moduleID = "./node_modules/webpack-hot-middleware/client.js?name=client&reload=true&timeout=30000&path=/__webpack_hmr"

I think it has something to do with the way I configure my presets when using Nuxt.

This is currently how nuxt.config.js build part looks like:

build: { vendor: ['vuetify', 'babel-polyfill', 'vued3tree', 'vue2-editor','lodash'], extractCSS: true, babel: { presets: [ ['es2015'], [ 'vue-app', { useBuiltIns: true, targets: { ie: 11, uglify: true }, }, ], ], },

How do I need to configure my presets in order for my app to run on IE?

Hadas
  • 1
  • seems you are running a dev build, does an actual production build work in ie? – William Chong Jan 08 '19 at 07:36
  • @WilliamChong In production also doesn't work – Hadas Jan 08 '19 at 07:58
  • what error do you get in production? – William Chong Jan 08 '19 at 07:59
  • I actually got some progress by updating nuxt version to 2.3.4 and updating the nuxt.config.js . Currently the error I get in IE is: Object doesn't support property or method 'cbrt', Network Error 0x800c0019, Security certificate required to access this resource is invalid., and 'window' is undefined – Hadas Jan 08 '19 at 08:03
  • is it possible that the `cbrt` is called by other library you use? I have a running nuxt@2.3.4 site and it does not have a error like this in IE11 – William Chong Jan 09 '19 at 06:12
  • solved that as well by removing a library called vue2-hammer. Now I have one issue in Chrome and in IE: 'regeneratorRuntime is not defined'. tried every solution in Google and no solution. Any idea? – Hadas Jan 09 '19 at 08:56
  • `babel-polyfill` need to be loaded first before any Promise/async/await code is run, since they needed the `regeneratorRuntime` polyfill from babel. – William Chong Jan 09 '19 at 09:28

1 Answers1

0

solved that as well by removing a library called vue2-hammer. Now I have one issue in Chrome and in IE: 'regeneratorRuntime is not defined'. tried every solution in Google and no solution. Now my Nuxt.config.js looks like this:

const polyfill = require('@babel/polyfill');

module.exports = {
  entry: [polyfill],
build: {
    extractCSS: true,
    extend(config, ctx) {
      if (ctx.isDev && ctx.isClient) {
        config.module.rules.push(
          {
            enforce: 'pre',
            test: /\.(js|vue)$/,
            loader: 'eslint-loader',
            exclude: /(node_modules)/,
          },
          {
            test: /\.js$/,
            loader: 'babel-loader',
            options: {
              plugins: [
                [
                  '@babel/plugin-transform-runtime',
                  {
                    corejs: false,
                    helpers: true,
                    regenerator: true,
                    useESModules: false,
                  },
                ],
                [
                  '@babel/plugin-transform-regenerator',
                  {
                    asyncGenerators: false,
                    generators: false,
                    async: false,
                  },
                ],
                'babel-plugin-transform-es2015-shorthand-properties',
                '@babel/plugin-transform-exponentiation-operator',
                '@babel/plugin-syntax-dynamic-import',
                '@babel/plugin-transform-arrow-functions',
              ],
            },
          },
        );
      }
    },
  },
  babel: {
    presets: [
      [
        'es2015',
        'stage-0',
      ],
    ],
    exclude: ['transform-regenerator'],
  },

Ant idea what can cause this?

Hadas
  • 1