Nuxt.js: Spread operator does not work in node_modules folder

Created on 25 Sep 2017 · 6Comments · Source: nuxt/nuxt.js

Versions

node v6.11.2
nuxt v1.0.0-rc11

Intro

I use in my project css framework vuetify and cant import VBtn component. For example I made a similar code to reproduce the same error.

Steps to reproduce

Init project with "nuxt-community/starter-template" template
Make component in node_modules folder

./node_modules/TestComponent/TestComponent.js

export default {
  methods: {
    someMethod () {
      const foo = {
        var1: 11,
        var2: 22
      }
      // let bar = {
      //   ...foo
      // }
      return {
        ...(foo || {})
      }
    }
  }
}

In index page import the component

./pages.index.vue

<script>
import TestComponent from '../node_modules/TestComponent/TestComponent.js'
...
</script>

What is actually happening ?

When I start the assembly (npm run dev) the error gets out:

 error  in ./node_modules/TestComponent/TestComponent.js

Module parse failed: C:\Users\user\projects\nuxt-test\node_modules\TestComponent\TestComponent.js Unexpected token (12:8)
You may need an appropriate loader to handle this file type.
|       // }
|       return {
|         ...(foo || {})
|       }
|     }

 @ ./node_modules/babel-loader/lib?{"babelrc":false,"cacheDirectory":true,"presets":["C://Users//user//projects//nuxt-test//node_modules//babel-preset-vue-app//dist//index.common.js"]}!./node
_modules/vue-loader/lib/selector.js?type=script&index=0!./pages/index.vue 24:0-59
 @ ./pages/index.vue
 @ ./.nuxt/router.js
 @ ./.nuxt/index.js
 @ ./.nuxt/client.js
 @ multi webpack-hot-middleware/client?name=client&reload=true&timeout=3000&path=/__webpack_hmr ./.nuxt/client.js

PS

With other starter templates (webpack + ssr) there is no such error. But I already started the project on nuxt.

_{This question is available on Nuxt.js community (#c1546)}

Source

TuxGit

Most helpful comment

@krzksz Hey! Yes, thanks for the advice. I understood which way to look.
Nuxt runs with config .../nuxt/dist/nuxt.js

I just extended the config nuxt.config.js with extend method and all was compiled :)

      config.module.rules.push({
        test: /\.js$/,
        loader: 'babel-loader',
        options: {
          presets: ['vue-app'],
          babelrc: false,
          cacheDirectory: true
        },
        include: [
          // path.resolve(__dirname, './node_modules/TestComponent'),
          path.resolve(__dirname, './node_modules/vuetify/src')
        ]
      })

TuxGit on 26 Sep 2017

👍3

All 6 comments

@TuxGit What is the webpack+ssr template you're using please?

Atinux on 25 Sep 2017

@Atinux Tried the following templates: "vuetifyjs/webpack-ssr", "vuetifyjs/webpack-advanced"

(with "vuetifyjs/nuxt" or "nuxt-community/starter-template" an error occurs)

TuxGit on 25 Sep 2017

Hey! I haven't used nuxt yet, but I spotted your issue and since I recently stumbled upon similar one I thought I could help a bit.

It seems like babel-loader is ignoring code within node_modules which is usually due to it's typical configuration. I believe you can find the line responsible here: https://github.com/nuxt/nuxt.js/blob/b931dd40cea828021f3092d1e224053a1baacba0/lib/builder/webpack/base.config.js#L72

If this is indeed the case then you should be able to overwrite this exclude option using this guide: https://nuxtjs.org/faq/extend-webpack#how-to-extend-webpack-config-

krzksz on 25 Sep 2017

👍1

@krzksz Hey! Yes, thanks for the advice. I understood which way to look.
Nuxt runs with config .../nuxt/dist/nuxt.js

I just extended the config nuxt.config.js with extend method and all was compiled :)

      config.module.rules.push({
        test: /\.js$/,
        loader: 'babel-loader',
        options: {
          presets: ['vue-app'],
          babelrc: false,
          cacheDirectory: true
        },
        include: [
          // path.resolve(__dirname, './node_modules/TestComponent'),
          path.resolve(__dirname, './node_modules/vuetify/src')
        ]
      })

TuxGit on 26 Sep 2017

👍3

@TuxGit rules.concat not working but push is working , here is my code
extend(config, {isDev, isClient}) { config.module.rules.concat( [ { test: /\.html$/, use: { loader: 'html-loader' } } ] ) }