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!

Lilalilac

Are u sure that code is from the modules u trying to transpile? Can u setup a reproduction repository on codesandbox or github? – Anomie

I will try and do that but wasn’t sure how to do Codesandbox with Nuxt. I’ll give it a go. – Lilalilac

Codesandbox added SSR support in last week or so, and there is Nuxt template now there – Anomie

Answer 1

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

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

Digiovanni

Would you mind adding a word about why that's necessary? – Knitwear

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?

Amathist

Yes, I forgot to mention that it is Swiper causing the issue. It appears to internally depend on something called Dom7. I see references to that all over. I really need to crack this! So frustrating. I just updated my question to mention this. Thanks for your help. – Lilalilac

Yea, I know. I'm trying to replicate with a bare-bone nuxt app now, but for some reason it seems to be working there. Although if I use the same settings in my original project it doesn't work. Did you configure nuxt with a server-side framework like express, koa etc? – Amathist