How can I transpile a dependency in node_modules with Nuxt 2?

Question

I have read of issues with transpiling node_modules with Nuxt, but the new Nuxt 2 is said to have solved this with a transpile option in the nuxt.config.js file.

https://nuxtjs.org/api/configuration-build/#transpile

Here is what I have:

export default {
  router: {
    base: '/',
  },
  build: {
    transpile: [
      'choices.js',
      'lazysizes',
      'swiper',
      'vee-validate'
    ],
    extractCSS: true
  },
  srcDir: 'src/',
  performance: {
    gzip: true
  },
  render: {
    compressor: {
      threshold: 100
    }
  },
  dev: false
}

I removed a few things that are unrelated to make it easier to read.

When I run npm run build (nuxt build) the compiled JS files contain references to es6 and es7 code such as const and let etc when it should be var.

I have isolated this issue to be coming from Swiper. It appears to internally depend on something called Dom7 that seems to be causing the problem.

I am wanting to compile these node_modules dependencies to es5 if possible. I'm not sure my current setup is actually doing anything at all in that regard.

I believe Nuxt uses vue-app for Babel, but I even tried the following to no success:

babel: {
  presets: [
    '@babel/preset-env'
  ],
  plugins: [
    '@babel/plugin-syntax-dynamic-import'
  ]
}

Not much joy there either. Nothing appears differently in the final build.

I am using Nuxt 2.1.0

Any help appreciated. Thanks!

Answer 1

You also need to transpile Dom7, so the Nuxt config should have:

build: {
    transpile: [
      'swiper',
      'dom7',
    ],
}

Answer 2

I have the exact same issue.

The vendor option under build is deprecated, so it's simply ignored I believe from what I read here https://medium.com/nuxt/nuxt-2-is-coming-oh-yeah-212c1a9e1a67#a688

I managed to isolate my case to the "swiper" library. If I remove that from my project, all references to let, const or class are gone. I've tried the transpile option too, but it does not seem to have any effect.

Will you try to exclude swiper from your project to see if we can isolate the issue?