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!

Are u sure that code is from the modules u trying to transpile? Can u setup a reproduction repository on codesandbox or github? — Aldarund, Oct 02 '18 at 18:58
I will try and do that but wasn’t sure how to do Codesandbox with Nuxt. I’ll give it a go. — Michael Giovanni Pumo, Oct 02 '18 at 19:16
Codesandbox added SSR support in last week or so, and there is Nuxt template now there — Aldarund, Oct 02 '18 at 20:21

score 7 · Accepted Answer · answered Mar 05 '19 at 14:34

7

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

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

answered Mar 05 '19 at 14:34

njam

1,233
14
16

4

Would you mind adding a word about *why* that's necessary? – dargmuesli Jun 10 '21 at 21:40

score 1 · Answer 2 · answered Oct 04 '18 at 10:04

1

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?

answered Oct 04 '18 at 10:04

ellefsen

36
1

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. – Michael Giovanni Pumo Oct 04 '18 at 10:27
1

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? – ellefsen Oct 04 '18 at 11:05

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

2 Answers2

Linked