Nuxt.js: Add support to transpile modules inside node_modules

[muhajirdev]

Take a look at https://github.com/zeit/next.js/issues/706 .

I think it is necassary. Last time I tested, nuxtjs does transpile it in development mode. But not in production.

_{This feature request is available on Nuxt.js community (#c878)}

[pi0]

Hey @muhajirframe. Thanks for reference, we will keep track of comments and adding if actually needed. However i've not seen any popular library exporting not transpiled version (can you list some?). For tree shaking and advanced optimization, modules should create special esm builds, like bootstrap-vue or vue.js. Also if it is necessary for one special package as of https://github.com/zeit/next.js/issues/706#issuecomment-289118600 mentioned, we can do similar thing with nuxt.config.js using build.extend (However It may cause uglifyjs problems too as it currently not supports esm modules and this is probably why prod builds are failing)

[pi0]

From #1080 @lcx960324:

Hello.
It seems that babel-loader will skip transforming files in node_modules.
use the traditional way to config babel but it did't work.

    loaders: [
      {
        test: /iview.src.*js$/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['es2015'],
            plugins: ['transform-runtime']
          }
        }
      },
//   below are default nuxt loaders config.

So I wonder is there any way to let babel transform files in node_modules.
Thank you. XD

[xpl]

See https://github.com/ccxt-dev/ccxt/issues/225#issuecomment-331905178 (a solution that adds a Babel rule for transpiling a specific ES6 module in the node_modules folder). You can also remove the general /node_modules/ exclusion that way (by monkey-patching the config.module.rules object).

[maximivanov]

To add some keywords for those googling: we had an issue with fat arrows not being transpiled and failing in IE11. To find out what was causing it I just searched for => over .nuxt/dist folder (in prod build). It appeared to be coming from latest query-string module written in ES6.
One solution would be to transpile it as stated above, we've just downgraded the module to v5 (which is plain ES5).

[pi0]

We _may_ ship https://github.com/AndersDJohnson/webpack-babel-env-deps into nuxt to support transition node_modules. Working with @Atinux on it :)

[larsenwork]

@pi0 any updates on including https://github.com/AndersDJohnson/webpack-babel-env-deps into nuxt?

[gnuletik]

I'm also interested by this feature, I can use transpileDependencies in vue.config.js with the default template from vue-cli. doc here https://cli.vuejs.org/config/#transpiledependencies
I'm trying to import this plugin: https://github.com/alessiomaffeis/vue-picture-input

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.

[manniL]

For all folks coming around: https://nuxtjs.org/api/configuration-build/#transpile

There is manual support for it.