title: Nuxt.js site javascript issues with IE and Edge. CSV data not loading
body: <p>I've inherited a project that's using Nuxt.js and I'm struggling to get it to render properly on IE11 and Edge. (Unfortunately the client needs it to work for IE11 specifically.)</p>
  
  <p>The content for the site is all pulled in via CSV file and converted to JSON (another client request.)</p>
  
  <p>Aesthetically the site <em>looks</em> mostly correct, none of the CSV data appears. in IE11 I get the following error in the console:</p>
  
  <pre><code>SCRIPT1002: Syntax error
  5031769c37c389324133.js (2,2845)
  </code></pre>
  
  <p>Edge has two errors, one being a little more verbose</p>
  
  <pre><code>
  [object Error]: {description: "", message: "Loading chunk 1 failed. (missing: http://example.com/_nuxt/3f4e01aadffdbff171e9.js)", name: "ChunkLoadError", number: 0, request: "http://example.com/_nuxt/3f4e01aadffdbff171e9.js"...}
  description: ""
  message: "Loading chunk 1 failed. (missing: http://example.com/_nuxt/3f4e01aadffdbff171e9.js)"
  name: "ChunkLoadError"
  number: 0
  request: "http://example.com/_nuxt/3f4e01aadffdbff171e9.js"
  stack: "ChunkLoadError: Loading chunk 1 failed. (missing: http://example.com/_nuxt/3f4e01aadffdbff171e9.js) at $.prototype.stop (http://example.com/_nuxt/b91966ecabf914b20146.js:2:77646) at Anonymous function (http://example.com/_nuxt/5ed095f6183dbd064591.js:1:3130) at d (http://example.com/_nuxt/b91966ecabf914b20146.js:2:74254) at Anonymous function (http://example.com/_nuxt/b91966ecabf914b20146.js:2:74007) at t[e] (http://example.com/_nuxt/b91966ecabf914b20146.js:2:74605) at r (http://example.com/_nuxt/b91966ecabf914b20146.js:2:66140) at d (http://example.com/_nuxt/b91966ecabf914b20146.js:2:66389) at c (http://example.com/_nuxt/b91966ecabf914b20146.js:2:119049) at Anonymous function (http://example.com/_nuxt/b91966ecabf914b20146.js:2:119196) at n (http://example.com/_nuxt/b91966ecabf914b20146.js:2:153591)"
  type: "missing"
  
  __proto__: Error
  
  constructor: function Error() { [native code] }
  arguments: &lt;Permission denied&gt;
  caller: &lt;Permission denied&gt;
  length: 1
  name: "Error"
  
  prototype: Error
  stackTraceLimit: 10
  
  __proto__: function() { [native code] }
  message: ""
  name: "Error"
  
  toString: function toString() { [native code] }
  arguments: &lt;Permission denied&gt;
  caller: &lt;Permission denied&gt;
  length: 0
  name: "toString"
  
  __proto__: function() { [native code] }
  
  __proto__: Object
  
  constructor: function Object() { [native code] }
  
  hasOwnProperty: function hasOwnProperty() { [native code] }
  
  isPrototypeOf: function isPrototypeOf() { [native code] }
  
  propertyIsEnumerable: function propertyIsEnumerable() { [native code] }
  
  toLocaleString: function toLocaleString() { [native code] }
  
  toString: function toString() { [native code] }
  
  valueOf: function valueOf() { [native code] }
  
  __defineGetter__: function __defineGetter__() { [native code] }
  
  __defineSetter__: function __defineSetter__() { [native code] }
  
  __lookupGetter__: function __lookupGetter__() { [native code] }
  
  __lookupSetter__: function __lookupSetter__() { [native code] }
  __proto__: null
  </code></pre>
  
  <pre><code>SCRIPT1028: SCRIPT1028: Expected identifier, string or number
  </code></pre>
  
  <p>Both browsers render the static content properly, I'm just getting no CSV data. </p>
  
  <p>The project has babel and polyfill so it should be compiling the JS into something IE friendly as far as I know.</p>
  
  <p>I suspect that it's a dependency, csv-parse in particular might be the culprit. I tried adding <code>transpile: [ 'csv-parse' ],</code> to my nuxt.config.js file but I end up with the following error when I when <code>yarn build</code>:</p>
  
  <pre><code>ERROR in ./.nuxt/router.js
  Module build failed (from ./node_modules/babel-loader/lib/index.js):
  SyntaxError: /Users/me/Sites/example/.nuxt/router.js: Support for the experimental syntax 'dynamicImport' isn't currently enabled (6:40):
  
    4 | import scrollBehavior from './router.scrollBehavior.js'
    5 | 
  &gt; 6 | const _43203b38 = () =&gt; interopDefault(import('../pages/emergency.vue' /* webpackChunkName: "pages/emergency" */))
      |                                        ^
    7 | const _2fc9950e = () =&gt; interopDefault(import('../pages/index.vue' /* webpackChunkName: "pages/index" */))
    8 | 
    9 | // TODO: remove in Nuxt 3
  
    Add @babel/plugin-syntax-dynamic-import (https://git.io/vb4Sv) to the 'plugins' section of your Babel config to enable parsing.
        at Parser.raise (/Users/me/Sites/example/node_modules/@babel/parser/lib/index.js:7012:17)
        at Parser.expectPlugin (/Users/me/Sites/example/node_modules/@babel/parser/lib/index.js:8410:18)
        at Parser.parseExprAtom (/Users/me/Sites/example/node_modules/@babel/parser/lib/index.js:9497:14)
        at Parser.parseExprSubscripts (/Users/me/Sites/example/node_modules/@babel/parser/lib/index.js:9237:23)
        at Parser.parseMaybeUnary (/Users/me/Sites/example/node_modules/@babel/parser/lib/index.js:9217:21)
        at Parser.parseExprOps (/Users/me/Sites/example/node_modules/@babel/parser/lib/index.js:9083:23)
        at Parser.parseMaybeConditional (/Users/me/Sites/example/node_modules/@babel/parser/lib/index.js:9056:23)
        at Parser.parseMaybeAssign (/Users/me/Sites/example/node_modules/@babel/parser/lib/index.js:9015:21)
        at Parser.parseExprListItem (/Users/me/Sites/example/node_modules/@babel/parser/lib/index.js:10331:18)
        at Parser.parseCallExpressionArguments (/Users/me/Sites/example/node_modules/@babel/parser/lib/index.js:9434:22)
        at Parser.parseSubscript (/Users/me/Sites/example/node_modules/@babel/parser/lib/index.js:9342:29)
        at Parser.parseSubscripts (/Users/me/Sites/example/node_modules/@babel/parser/lib/index.js:9258:19)
        at Parser.parseExprSubscripts (/Users/me/Sites/example/node_modules/@babel/parser/lib/index.js:9247:17)
        at Parser.parseMaybeUnary (/Users/me/Sites/example/node_modules/@babel/parser/lib/index.js:9217:21)
        at Parser.parseExprOps (/Users/me/Sites/example/node_modules/@babel/parser/lib/index.js:9083:23)
        at Parser.parseMaybeConditional (/Users/me/Sites/example/node_modules/@babel/parser/lib/index.js:9056:23)
     @ ./.nuxt/index.js 5:0-43 62:23-35
     @ ./.nuxt/client.js
     @ multi ./.nuxt/client.js
  
  </code></pre>
  
  <p>My knowledge of Nuxt and Babel are limited. I've tried adjusting the babel settings in my Nuxt config but I'm at a loss. I found <a href="https://dev.to/errietta/-how-to-fix-your-node-dependencies-es6-causing-browser-errors-37di" rel="nofollow noreferrer">an article</a> where someone was having similar issues with <code>csv-parse</code>. I couldn't quite figure out how to implement their solution in my project as it doesn't utilize Webpack.</p>
  
  <p>I suspect I might be setting thing up improperly in my configurations so I'll provide those for reference: </p>
  
  <p><strong>nuxt.config.js</strong></p>
  
  <pre><code>
  export default {
    mode: 'universal',
    server: {
      port: 3000, // default: 3000
      host: '0.0.0.0' // default: localhost
    },
    /*
    ** Headers of the page
    */
    head: {
      title: process.env.npm_package_name || '',
      meta: [
        { charset: 'utf-8' },
        { name: 'viewport', content: 'width=device-width, initial-scale=1' },
        { hid: 'description', name: 'description', content: process.env.npm_package_description || '' }
      ],
      link: [
        { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
      ]
    },
    /*
    ** Customize the progress-bar color
    */
    loading: { color: '#fff' },
    /*
    ** Global CSS
    */
    css: [
    ],
    /*
    ** Plugins to load before mounting the App
    */
    plugins: [
      { src: '~/plugins/polyfills', mode: 'client' }
    ],
    /*
    ** Nuxt.js modules
    */
    modules: [
      'nuxt-polyfill',
      // Doc:https://github.com/nuxt-community/modules/tree/master/packages/bulma
      '@nuxtjs/bulma',
      // Doc: https://axios.nuxtjs.org/usage
      '@nuxtjs/axios',
      '@nuxtjs/pwa'
    ],
    /*
    ** Axios module configuration
    ** See https://axios.nuxtjs.org/options
    */
    axios: {
    },
    polyfill: {
      features: [
        /*
            Feature with detect:
  
            Detection is better because the polyfill will not be
            loaded, parsed and executed if it's not necessary.
        */
        {
          require: 'promise-polyfill',
          detect: () =&gt; 'Promise' in window
        },
        {
          require: 'array-from'
          // detect: () =&gt; 'Array.from' in window,
        }
  
        /*
            Feature with detect &amp; install:
  
            Some polyfills require a installation step
            Hence you could supply a install function which accepts the require result
        */
      ]
    },
    /*
    ** Build configuration
    */
    build: {
      transpile: [
        'csv-parse'
      ],
      postcss: {
        preset: {
          features: {
            customProperties: false
          }
        }
      },
      /*
      ** You can extend webpack config here
      */
      extend(config, ctx) {
        config.node = {
          fs: 'empty'
        };
      },
  
      babel: {
        include: ['src', require.resolve('csv-parse')],
        presets: function ({isServer}, [preset, options]) {
  
          const r = [
            [
              preset, {
                buildTarget: isServer ? 'server' : 'client',
                ...options
              }]
              // [ Other Presets ]
          ];
  
          r[0][1].targets = {
            "browsers": ["&gt; 1%", "last 2 versions"],
            ie: 11
          };
  
          r[0][1].polyfills = [
            'es6.array.iterator',
            'es6.promise',
            'es6.object.assign',
            'es7.promise.finally',
            'es6.symbol',
            'es6.array.find',
            'es6.array.from'
          ];
  
          return r;
        }
        // 
      }
  
    }
  };
  </code></pre>
  
  <p>(I should mention that I've moved polyfills.js to a plugins folder.)</p>
  
  <p><strong>package.json</strong></p>
  
  <pre><code>{
    "name": "example",
    "version": "1.0.0",
    "description": "",
    "author": "",
    "private": true,
    "scripts": {
      "dev": "nuxt",
      "build": "nuxt build",
      "start": "nuxt start",
      "generate": "nuxt generate"
    },
    "dependencies": {
      "@nuxtjs/axios": "^5.3.6",
      "@nuxtjs/bulma": "^1.2.1",
      "@nuxtjs/pwa": "^3.0.0-beta.19",
      "array-from": "^2.1.1",
      "axios": "^0.19.0",
      "buefy": "^0.7.10",
      "csv-parse": "^4.4.3",
      "csvtojson": "^2.0.10",
      "node-sass": "^4.12.0",
      "nuxt": "^2.0.0",
      "nuxt-polyfill": "^1.0.3",
      "promise-polyfill": "^8.1.3",
      "sass-loader": "^8.0.0",
      "whatwg-fetch": "^3.0.0"
    },
    "devDependencies": {
      "@babel/plugin-transform-runtime": "^7.5.0",
      "eslint-config-prettier": "^4.1.0",
      "eslint-plugin-prettier": "^3.0.1",
      "extract-text-webpack-plugin": "^4.0.0-beta.0",
      "nodemon": "^1.18.9",
      "prettier": "^1.16.4"
    }
  }
  
  </code></pre>
  
  <p>If anyone could provide some insight that would be fantastic. If any more information / code is necessary let me know and I'll provide.</p>
  
  <p>Thanks!</p>