Nuxt.js: vuetify a la carte no longer working

[P4sca1]

Version

v2.0.0

Reproduction link

https://github.com/vuetifyjs/nuxt

Steps to reproduce

You need to have vue-cli installed.

vue init vuetifyjs/nuxt my-project  
cd my-project                     
npm install nuxt@^2.0.0
npm install
npm run dev

Now visit http://localhost:3000

What is expected ?

The page should be rendered.

What is actually happening?

SyntaxError: Invalid or unexpected token.

Additional comments?

Worked fine with previous version of nuxt.

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

[aldarund]

its probably something wrong with that template. Im using nuxt 2 + vuetify a la carte without any problem.
For some reason vue init dont work on my pc, so i cant check. Can you provide a full repo with error?

PS in vuetify 1.3 there should be auto a la carte

[P4sca1]

https://github.com/P4sca1/nuxt-vuetify

I would guess it is something around these lines: https://github.com/P4sca1/nuxt-vuetify/blob/master/nuxt.config.js#L49-L56

[aldarund]

@P4sca1 remove that node externals section and add

transpile: [/^vuetify/],

into build section

[P4sca1]

That works, thank you!
Do you know why the change is required since nuxtjs 2.0.0?

[aldarund]

@P4sca1 probably because of webpack 4 upgrade.

[p1pchenk0]

Hi, @aldarund , I've tried your option with removing nodeExternals stuff and leave transpile: [/^vuetify/], but now I'm getting an error:

× error Error: render function or template not defined in component: v-toolbar
  at normalizeRender (C:\projects\nuxt\node_modules\vue-server-renderer\build.js:7407:13)
  at renderComponentInner (C:\projects\nuxt\node_modules\vue-server-renderer\build.js:7531:3)
  at renderComponent (C:\projects\nuxt\node_modules\vue-server-renderer\build.js:7502:5)
  at RenderContext.renderNode (C:\projects\nuxt\node_modules\vue-server-renderer\build.js:7418:5)
  at RenderContext.next (C:\projects\nuxt\node_modules\vue-server-renderer\build.js:2436:14)
  at cachedWrite (C:\projects\nuxt\node_modules\vue-server-renderer\build.js:2295:9)
  at renderElement (C:\projects\nuxt\node_modules\vue-server-renderer\build.js:7656:5)
  at renderNode (C:\projects\nuxt\node_modules\vue-server-renderer\build.js:7420:5)
  at renderComponentInner (C:\projects\nuxt\node_modules\vue-server-renderer\build.js:7538:3)
  at renderComponent (C:\projects\nuxt\node_modules\vue-server-renderer\build.js:7502:5)
  at RenderContext.renderNode (C:\projects\nuxt\node_modules\vue-server-renderer\build.js:7418:5)
  at RenderContext.next (C:\projects\nuxt\node_modules\vue-server-renderer\build.js:2436:14)
  at cachedWrite (C:\projects\nuxt\node_modules\vue-server-renderer\build.js:2295:9)
  at renderElement (C:\projects\nuxt\node_modules\vue-server-renderer\build.js:7656:5)
  at RenderContext.renderNode (C:\projects\nuxt\node_modules\vue-server-renderer\build.js:7420:5)
  at RenderContext.next (C:\projects\nuxt\node_modules\vue-server-renderer\build.js:2436:14)

[aldarund]

Create a reproduction and I'll take a look

On Fri, Sep 28, 2018, 1:34 PM p1pchenk0 [e-mail] wrote:

Hi, @P4sca1 https://github.com/P4sca1, I've tried your option with
removing nodeExternals stuff and leave transpile: [/^vuetify/], but now
I'm getting an error:

× error Error: render function or template not defined in component: v-toolbar
at normalizeRender (C:\projects\nuxt\node_modules\vue-server-renderer\build.js:7407:13)
at renderComponentInner (C:\projects\nuxt\node_modules\vue-server-renderer\build.js:7531:3)
at renderComponent (C:\projects\nuxt\node_modules\vue-server-renderer\build.js:7502:5)
at RenderContext.renderNode (C:\projects\nuxt\node_modules\vue-server-renderer\build.js:7418:5)
at RenderContext.next (C:\projects\nuxt\node_modules\vue-server-renderer\build.js:2436:14)
at cachedWrite (C:\projects\nuxt\node_modules\vue-server-renderer\build.js:2295:9)
at renderElement (C:\projects\nuxt\node_modules\vue-server-renderer\build.js:7656:5)
at renderNode (C:\projects\nuxt\node_modules\vue-server-renderer\build.js:7420:5)
at renderComponentInner (C:\projects\nuxt\node_modules\vue-server-renderer\build.js:7538:3)
at renderComponent (C:\projects\nuxt\node_modules\vue-server-renderer\build.js:7502:5)
at RenderContext.renderNode (C:\projects\nuxt\node_modules\vue-server-renderer\build.js:7418:5)
at RenderContext.next (C:\projects\nuxt\node_modules\vue-server-renderer\build.js:2436:14)
at cachedWrite (C:\projects\nuxt\node_modules\vue-server-renderer\build.js:2295:9)
at renderElement (C:\projects\nuxt\node_modules\vue-server-renderer\build.js:7656:5)
at RenderContext.renderNode (C:\projects\nuxt\node_modules\vue-server-renderer\build.js:7420:5)
at RenderContext.next (C:\projects\nuxt\node_modules\vue-server-renderer\build.js:2436:14)

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/nuxt/nuxt.js/issues/3932#issuecomment-425395141, or mute
the thread
https://github.com/notifications/unsubscribe-auth/AAi3F83RjTP_-kWrBn5Pd1cZ4jNcAz_Xks5uffsngaJpZM4W0FLR
.

[p1pchenk0]

@aldarund, https://github.com/p1pchenk0/nuxt-vuetify-ala-carte
Strange, but in my reproduction repo I've got an error about:

× error C:\projects\alacarte\node_modules\vuetify\src\stylus\components\_app.styl:1
(function (exports, require, module, __filename, __dirname) { @import '../bootstrap'
 ^

SyntaxError: Invalid or unexpected token

for my real project it is essential to import some vuetify components only where they are used (in my repo example, please, have a look at pages/index.vue file as reference). I suppose, there should be some additional setup

[aldarund]

@p1pchenk0 transpile: [/^vuetify/], should go into build section of config
https://nuxtjs.org/api/configuration-build/

[p1pchenk0]

@aldarund, sorry, fixed, and now it fires initial error:
render function or template not defined in component: v-card

inside VCard.js file there is render property of exported object,
but in vue-server-renderer/build.js on line 7397 isUnder(render) returns true

[aldarund]

@p1pchenk0 its because you import VCard in your page/index.vue. If u want to use VCard you need to add it into plugins.vuetify like other components and dont import in pags

[P4sca1]

Or if you want to import it in pages you can do it like that:

``` pages/index.js

```

[p1pchenk0]

@P4sca1, yes! just figured it out!

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