Giters

meteor-vue / vue-meteor

🌠 Vue first-class integration in Meteor

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Vuetify stopped working.

educob opened this issue · comments

commented

Hi.

Vuetify stopped working at the same time in my computer and two virtual boxes a few days ago.
I installed meteor-vue from scratch the old way (meteor npm install --save bootstrap bootstrap-vue vuetify) and got plenty of error thanks.

The new vuetify documentation says to use:

npm install @vue/cli -g
vue add vuetify

But it doesn't work if I run it with meteor: meteor vue add vuetify

So I can't work at all and I can't find any help at all.

How can I install the new vue-vuetify with meteor?

Thanks.

commented

Vuetify 2 contains a few breaking changes from 1.x.
Did you have a look at the upgrade guide? It contains several before/after examples of how to bootstrap vuetify for different scenarios.

commented

Hi. Thanks for your help.

I have tried and tried to make it work to no avail.

File node_modules/vuetify/lib/index.js gives this error:
Uncaught SyntaxError: Unexpected token export
It's like somehow vuetify.js is not loaded properly and doesn't recognize javascript.

If I save the contents of node_modules/vuetify/lib/index.js in plugins/vuetify.js it executes ok but it gives the same error when importing import Vuetify from 'vuetify/lib/components/Vuetify'

After 8 months of work I am completely stopped thanks to vuetify.

What can I do?

commented

This sounds like an issue with some JavaScript features that are not supported by the NodeJS version you are using.

Unless you need any of the new features for Vuetify 2, I'd suggest going back to Vuetify 1.x - you'll probably need to make a lot of other changes to your code to get it to work with the new version.

commented

HI. Thanks for answering that fast.

My javascript has plenty of imports and all work ok. The problem is only with the imports in vuetify files.
Somehow these vuetify files are parsed with and old javascript parser.
It happens with vuetify 1.5 and 2.0 alike.

Meteor's node is V8.15.1

commented

I have recompiled vuetify following the instructions here: https://guide.meteor.com/using-npm-packages.html#recompile but unfortuniately now links like import "../../../src/components/VApp/VApp.sass"; don't work: "Uncaught Error: Cannot find module '../../../src/components/VApp/VApp.sass'. I don't work why cause I know for sure the links are ok.

commented

You need to install sass for Vuetify 2 (npm i -D sass), not node-sass as for Vuetify 1.

commented

Hi.

I have installed it but the problem is that it doesn't find the file it at all. Not that it doesn't understand it but that the system thinks that VApp.sass it's not there.

Thanks.

commented

Hi @educob is this issue still occurring? Would like to help, but I see that its quite a while ago

commented

Hi @chris-visser,
thanks for offering to help! We are also facing this issue. Curiously, it only appears when we try to use some vuetify-plugins. For example vuetify-dialog but also others.

Here is a repo that reproduces the error. It is the standard template created by meteor create --vue. I then added vuetify, which worked fine. Then I added the plugin, which produced the error that @educob described.

commented

Thanks I will take a look as soon as possible. Let me know if you have any further findings :)

commented

Great, thanks! :)
I'll take a deeper look within the next few days and will let you know if I find anything.

commented

Hi @chris-visser,
were you able to reproduce the problem?

I have looked into it and made a little progress. Unfortunately that is still far from solving the underlying problem. However, I am not sure if this is really a vue-meteor issue. Maybe you have some advice about where to take this instead. TBH the Meteor build system is kind of a black box to me.

To begin with, I tried to include one of the presets of Vuetify which prompted me with the familiar .sass module not found error and broke the application.

It seems to emerge from the Modules Package of Meteor. There the runtime checks if the .sass file is within the filesByModuleId Object that appears to contain all imports. In my case that is mostly js files. But it also contains a few folders, .vue and .json files. However, the referenced .sass file is missing and that fires the exception that @educob mentioned. So I guessed that the sass files might not be compiled and put into the imports. After installing fourseven:scss meteor crashes immediately on startup with:

This error 

/home/cons/.meteor/packages/static-html/.1.2.2.12qx0b8.o5zc++os+web.browser+web.cordova/plugin.compileStaticHtmlBatch.os/npm/node_modules/meteor/promise/node_modules/meteor-promise/promise_server.js:190
      throw error;
      ^
{
  message: 'Scss compiler error: Error: _includePaths is not iterable\n' +
    '        on line 1 of variables.scss\n' +
    '        from line 1 of {}/node_modules/vue-cli-plugin-vuetify-preset-rally/preset/overrides.sass\n' +
    ">> @import '~vuetify/src/styles/styles.sass';\n" +
    '\n' +
    '   --------^\n' +
    '\n',
  info: {
    file: '/node_modules/vue-cli-plugin-vuetify-preset-rally/preset/overrides.sass',
    line: undefined,
    column: undefined,
    func: undefined
  },
  stack: 'undefined\n' +
    ' => awaited here:\n' +
    '    at Promise.await (/home/cons/.meteor/packages/static-html/.1.2.2.12qx0b8.o5zc++os+web.browser+web.cordova/plugin.compileStaticHtmlBatch.os/npm/node_modules/meteor/promise/node_modules/meteor-promise/promise_server.js:39:12)\n' +
    '    at JsOutputResource.finalize (/tools/isobuild/compiler-plugin.js:922:12)\n' +
    '    at JsOutputResource.hasPendingErrors (/tools/isobuild/compiler-plugin.js:927:10)\n' +
    '    at JsOutputResource.reportPendingErrors (/tools/isobuild/compiler-plugin.js:932:14)\n' +
    '    at ImportScanner.scanFile (/home/cons/.meteor/packages/meteor-tool/.1.11.1.5hp94t.k78i8++os.linux.x86_64+web.browser+web.browser.legacy+web.cordova/mt-os.linux.x86_64/tools/isobuild/tools/isobuild/import-scanner.ts:1083:14)\n' +
    '    at /home/cons/.meteor/packages/meteor-tool/.1.11.1.5hp94t.k78i8++os.linux.x86_64+web.browser+web.browser.legacy+web.cordova/mt-os.linux.x86_64/tools/isobuild/tools/isobuild/import-scanner.ts:1142:14\n' +
    '    at _.each._.forEach (/home/cons/.meteor/packages/meteor-tool/.1.11.1.5hp94t.k78i8++os.linux.x86_64+web.browser+web.browser.legacy+web.cordova/mt-os.linux.x86_64/dev_bundle/lib/node_modules/underscore/underscore.js:191:9)\n' +
    '    at ImportScanner.scanFile (/home/cons/.meteor/packages/meteor-tool/.1.11.1.5hp94t.k78i8++os.linux.x86_64+web.browser+web.browser.legacy+web.cordova/mt-os.linux.x86_64/tools/isobuild/tools/isobuild/import-scanner.ts:1105:5)\n' +
    '    at /home/cons/.meteor/packages/meteor-tool/.1.11.1.5hp94t.k78i8++os.linux.x86_64+web.browser+web.browser.legacy+web.cordova/mt-os.linux.x86_64/tools/isobuild/tools/isobuild/import-scanner.ts:1156:12\n' +
    '    at _.each._.forEach (/home/cons/.meteor/packages/meteor-tool/.1.11.1.5hp94t.k78i8++os.linux.x86_64+web.browser+web.browser.legacy+web.cordova/mt-os.linux.x86_64/dev_bundle/lib/node_modules/underscore/underscore.js:191:9)\n' +
    '    at ImportScanner.scanFile (/home/cons/.meteor/packages/meteor-tool/.1.11.1.5hp94t.k78i8++os.linux.x86_64+web.browser+web.browser.legacy+web.cordova/mt-os.linux.x86_64/tools/isobuild/tools/isobuild/import-scanner.ts:1105:5)\n' +
    '    at /home/cons/.meteor/packages/meteor-tool/.1.11.1.5hp94t.k78i8++os.linux.x86_64+web.browser+web.browser.legacy+web.cordova/mt-os.linux.x86_64/tools/isobuild/tools/isobuild/import-scanner.ts:1142:14\n' +
    '    at _.each._.forEach (/home/cons/.meteor/packages/meteor-tool/.1.11.1.5hp94t.k78i8++os.linux.x86_64+web.browser+web.browser.legacy+web.cordova/mt-os.linux.x86_64/dev_bundle/lib/node_modules/underscore/underscore.js:191:9)\n' +
    '    at ImportScanner.scanFile (/home/cons/.meteor/packages/meteor-tool/.1.11.1.5hp94t.k78i8++os.linux.x86_64+web.browser+web.browser.legacy+web.cordova/mt-os.linux.x86_64/tools/isobuild/tools/isobuild/import-scanner.ts:1105:5)\n' +
    '    at /home/cons/.meteor/packages/meteor-tool/.1.11.1.5hp94t.k78i8++os.linux.x86_64+web.browser+web.browser.legacy+web.cordova/mt-os.linux.x86_64/tools/isobuild/tools/isobuild/import-scanner.ts:740:14\n' +
    '    at Array.forEach (<anonymous>)\n' +
    '    at ImportScanner.scanImports (/home/cons/.meteor/packages/meteor-tool/.1.11.1.5hp94t.k78i8++os.linux.x86_64+web.browser+web.browser.legacy+web.cordova/mt-os.linux.x86_64/tools/isobuild/tools/isobuild/import-scanner.ts:738:22)\n' +
    '    at /tools/isobuild/compiler-plugin.js:1360:17\n' +
    '    at Array.forEach (<anonymous>)\n' +
    '    at Function.computeJsOutputFilesMap (/tools/isobuild/compiler-plugin.js:1325:19)\n' +
    '    at ClientTarget._emitResources (/tools/isobuild/bundler.js:1137:8)\n' +
    '    at /tools/isobuild/bundler.js:856:12\n' +
    '    at Object.enterJob (/tools/utils/buildmessage.js:388:12)\n' +
    '    at ClientTarget.make (/tools/isobuild/bundler.js:844:18)\n' +
    '    at /tools/isobuild/bundler.js:3188:14\n' +
    '    at /tools/isobuild/bundler.js:3340:25\n' +
    '    at Array.forEach (<anonymous>)\n' +
    '    at /tools/isobuild/bundler.js:3294:14\n' +
    '    at Object.capture (/tools/utils/buildmessage.js:283:5)\n' +
    '    at bundle (/tools/isobuild/bundler.js:3169:31)\n' +
    '    at /tools/isobuild/bundler.js:3113:32\n' +
    '    at Slot.withValue (/home/cons/.meteor/packages/meteor-tool/.1.11.1.5hp94t.k78i8++os.linux.x86_64+web.browser+web.browser.legacy+web.cordova/mt-os.linux.x86_64/dev_bundle/lib/node_modules/@wry/context/lib/context.js:73:29)\n' +
    '    at Object.withCache (/home/cons/.meteor/packages/meteor-tool/.1.11.1.5hp94t.k78i8++os.linux.x86_64+web.browser+web.browser.legacy+web.cordova/mt-os.linux.x86_64/tools/fs/tools/fs/files.ts:1659:39)\n' +
    '    at Object.bundle (/tools/isobuild/bundler.js:3113:16)\n' +
    '    at /tools/runners/run-app.js:572:24\n' +
    '    at Function.run (/home/cons/.meteor/packages/meteor-tool/.1.11.1.5hp94t.k78i8++os.linux.x86_64+web.browser+web.browser.legacy+web.cordova/mt-os.linux.x86_64/tools/tool-env/tools/tool-env/profile.ts:289:14)\n' +
    '    at bundleApp (/tools/runners/run-app.js:571:34)\n' +
    '    at AppRunner._runOnce (/tools/runners/run-app.js:617:35)\n' +
    '    at AppRunner._fiber (/tools/runners/run-app.js:931:28)\n' +
    '    at /tools/runners/run-app.js:401:12'

That felt like a little progress and led me to this issue: Meteor-Community-Packages/meteor-scss/issues/273. So I created the symlinks and lo and behold, the error was gone to be replaced by a different one. That was resolved by the workaround provided by this issue sass/node-sass/issues/1270, just to be replaced by a different compiler error, after which I quit. It seems like it would be possible to resolve all upcoming compiler errors and maybe then it would work(?). But to do that, you would have to modify the files within node_modules and that seems like a very bad idea. So from here, I don't really know where to follow up with the investigation. Do you have any hints/ideas? Is there a documentation about the meteor build process or does one have to read through the source to see what its doing?

commented

Hey guys.

Note that Vuetify is tightly bounded to webpack bundler, and Meteor uses its own bundler:

If you want to give it a try, check this repo: (At your own risk, read carefully)
https://github.com/Hernanm0g/meteor_vuetify#webpack-installation-steps