Nuxt.js: Nuxt doesn't transpile NPM modules that expose source ES6 / Vue files as default entries

[bmarkovic]

Version

v1.4.0

Reproduction link

https://gist.github.com/bmarkovic/69c802d4eec12073b52a0aa37ee87606

Steps to reproduce

This is easily reproducible by initializing the Nuxt starter with vue-cli and adding epic-spinners which exposes src/lib.js i.e. it's ES6 entry point, to the project. One just needs to replace pages/index.vue with the one in the accompanying Gist.

The environment where I got this error:

|Env|Version|
|---|---|
|Nuxt.js|1.4.1|
|Vue.js|2.5.16|
|Webpack|3.12.0|
|Babel|(core)|6.26.3|
|Node.js|10.5.0|
|NPM|6.0.0.|

Linux x64 (Xubuntu 17.10)

What is expected ?

The module described in this actually works with non-SSR Vue. You should be seeing two animated spinning arcs.

What is actually happening?

The following error.

{ /home/bmarkovic/Devel/playground/nuxt-test/es-test/node_modules/epic-spinners/src/lib.js:1
(function (exports, require, module, __filename, __dirname) { import HollowDotsSpinner from './components/lib/Hollow
DotsSpinner.vue'
                                                                     ^^^^^^^^^^^^^^^^^

SyntaxError: Unexpected identifier
    at new Script (vm.js:74:7)
    at createScript (vm.js:246:10)
    at Object.runInThisContext (vm.js:298:10)
    at Module._compile (internal/modules/cjs/loader.js:670:28)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:713:10)
    at Module.load (internal/modules/cjs/loader.js:612:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:551:12)
    at Function.Module._load (internal/modules/cjs/loader.js:543:3)
    at Module.require (internal/modules/cjs/loader.js:650:17)
    at require (internal/modules/cjs/helpers.js:20:18)
    at r (/home/bmarkovic/Devel/playground/nuxt-test/es-test/node_modules/vue-server-renderer/build.js:8330:16)
    at Object.<anonymous> (server-bundle.js:3463:18)
    at __webpack_require__ (webpack:/webpack/bootstrap 3290c2a33fe9c042eb37:25:0)
    at Object.48 (pages/index.vue?d474:1:0)
    at __webpack_require__ (webpack:/webpack/bootstrap 3290c2a33fe9c042eb37:25:0)
    at Object.45 (pages/index.vue:1:0) statusCode: 500, name: 'SyntaxError' }

Additional comments?

I have tried to debug and from what I've seen, the entry file gets wrapped in a
function (the signature is seen above) but not transpiled.

Another issue is that the syntax that gets passed on to "eval" (in this case Node's
vm.runInThisCotext) has imports i.e. untranspiled top-level ES6 wrapped in a
function which wouldn't be correct ES6 even if vm.runInThisCotext could interpret
it.

All in all the issue is in Webpack configuration which is handled by Nuxt internally.
I understand that even front-end modules should be exposing transpiled versions but
ES6 modules will become more and more commonplace.

_{This bug report is available on Nuxt community (#c7306)}

[manniL]

I'd be interested in a solution as well. Usually putting my Vue plugins up as ES6 and have the same problem (which I often fix with an edit to the webpack config through the build method).

As nuxt-edge will support esm without hassle, it's worth trying your setup with this build.

[manniL]

With nuxt-edge you can go for build: { transpile: ['your-lib'] } which should solve your issue :relaxed:

[cmty[bot]]

This bug-report has been fixed by @manniL.

transpile option has been implemented in nuxt-edge

[tim-yao]

Hi @manniL thanks for fixing it in nuxt-edge, but we are using Nuxt in PROD which version is 1.4.0. I think we can't use edge in PROD until nuxt 2 is out. Do you have any idea on how to solve this issue in 1.4.0?

Also I see https://nuxtjs.org/api/configuration-build#transpile in 1.4.0 document, which suppose to be edge only feature, right? I am quite confused.

[manniL]

Hey @tim-yao

You are right, the transpile documentation is already for Nuxt 2. Sorry for the confusion!

You can already switch to nuxt-edge if you want (eg. all my personal projects run in PROD with it) or wait for Nuxt 2, as it'll be available very soon (:tm:)

Another way to solve the issue in 1.4.X is to extend the webpack config and use node-internals. (See the implementation for transpile for more information)

[tim-yao]

Thanks @manniL I will check the code for transpile. BTW, I used the way https://github.com/nuxt/nuxt.js/issues/924#issuecomment-309417199 mentioned, and looks fixed the issue as well.

[bmarkovic]

@tim-yao I was unsucessful applying the comment in #924 suggests. Whatever I do to the Regex or extends it seams that babel-loeader still ignores me and still sends untranspiled ES6 to the vm.runInThisCotext.

This is my particular setup in nuxt.config.js

  build: {
    extend: function(config) {
      const babelLoader = config.module.rules.find((rule) => rule.loader === 'babel-loader')
      babelLoader.exclude = /node_modules(?!(\/epic-spinners))/
    },
   ....

The error is the same as above.

[tim-yao]

@bmarkovic below is how I implemented at the moment.

    extend (config, { isServer}) {
      config.module.rules.push({
        test: /\.js$/,
        include: [
          resolve(__dirname, 'node_modules/my-module/')
        ],
        loader: 'babel-loader',
        options: this.getBabelOptions({ isServer })
      })
    }

[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.