[Solved] Integrate Vuetify with MeteorJs

I am trying to integrate Vuetify 1.5.20 with my meteorjs application using the steps defined in the quickstart. I am getting the following error when i add import vuetify.min.css.
What could i be missing?

StackTrace:

W20191102-23:26:31.343(-5)? (STDERR) C:\temp\vuemeteor2\node_modules\vuetify\dist\vuetify.min.css:1
W20191102-23:26:31.345(-5)? (STDERR) (function (exports, require, module, __filename, __dirname) { @-webkit-keyframes shake{59%{margin-left:0}60%,80%{margin-left:2px}70%,90%{margin-left:-2px}}@keyframes shake{59%{margin-left:0}60%,80%{margin-left:2px}70%,90%{margin-left:-2px}}.black{background-color:#000!important;border-color:#000!important}.black--text{color:#000!important;caret-color:#000!important}.white{background-color:#fff!important;border-color:#fff!important}.white--text{color:#fff!important;caret-color:#fff!important}.transparent{background-color:transparent!important;border-color:transparent!important}.transparent--text{color:transparent!important;caret-color:transparent!important}.red{background-color:#f44336!important;border-color:#f44336!important}.red--text{color:#f44336!important;caret-color:#f44336!important}.red.lighten-5{background-color:#ffebee!important;border-color:#ffebee!important}.red--text.text--lighten-5{color:#ffebee!important;caret-color:#ffebee!importa
W20191102-23:26:31.449(-5)? (STDERR) 
W20191102-23:26:31.451(-5)? (STDERR) SyntaxError: Invalid or unexpected token
W20191102-23:26:31.518(-5)? (STDERR)     at createScript (vm.js:80:10)
W20191102-23:26:31.574(-5)? (STDERR)     at fileEvaluate (packages\modules-runtime.js:336:7)
W20191102-23:26:31.576(-5)? (STDERR)     at Module.require (packages\modules-runtime.js:238:14)
W20191102-23:26:31.611(-5)? (STDERR)     at Module.moduleLink [as link] (C:\Users\AjitGoel\AppData\Local\.meteor\packages\modules\0.13.0\npm\node_modules\reify\lib\runtime\index.js:38:38)
W20191102-23:26:31.613(-5)? (STDERR)     at plugins.js (src/imports/plugins.js:1:1)
W20191102-23:26:31.615(-5)? (STDERR)     at fileEvaluate (packages\modules-runtime.js:336:7)
W20191102-23:26:31.617(-5)? (STDERR)     at Module.require (packages\modules-runtime.js:238:14)
W20191102-23:26:31.618(-5)? (STDERR)     at Module.moduleLink [as link] (C:\Users\AjitGoel\AppData\Local\.meteor\packages\modules\0.13.0\npm\node_modules\reify\lib\runtime\index.js:38:38)
W20191102-23:26:31.619(-5)? (STDERR)     at app.js (src/imports/app.js:1:1)
W20191102-23:26:31.620(-5)? (STDERR)     at fileEvaluate (packages\modules-runtime.js:336:7)
W20191102-23:26:31.621(-5)? (STDERR)     at Module.require (packages\modules-runtime.js:238:14)
=> Exited with code: 1

Package.json:

{
  "name": "vue-meteor-demo",
  "private": true,
  "scripts": {
    "start": "meteor run --settings settings.json",
    "debug": "meteor run meteor --settings settings.json --inspect-brk=9229"
  },
  "dependencies": {
    "@babel/runtime": "^7.6.3",
    "apollo-cache-inmemory": "^1.6.3",
    "apollo-client": "^2.6.4",
    "apollo-link": "^1.2.13",
    "apollo-link-http": "^1.5.16",
    "aws-sdk": "^2.556.0",
    "bcrypt": "^3.0.6",
    "core-js": "^3.3.2",
    "graphql": "^14.5.8",
    "graphql-tag": "^2.10.1",
    "intersection-observer": "^0.6.0",
    "isomorphic-fetch": "^2.2.1",
    "lodash": "^4.17.15",
    "marker-clusterer-plus": "^2.1.4",
    "material-design-icons-iconfont": "^5.0.1",
    "meteor-node-stubs": "^0.4.1",
    "moment": "^2.24.0",
    "vue": "^2.6.10",
    "vue-apollo": "^3.0.0",
    "vue-googlemaps": "^0.1.2",
    "vue-meteor-tracker": "^2.0.0-beta.5",
    "vue-observe-visibility": "^0.4.6",
    "vue-router": "^3.1.3",
    "vue-supply": "^0.3.0",
    "vuelidate": "^0.7.4",
    "vuetify": "^1.5.20",
    "vuex": "^3.1.1",
    "vuex-router-sync": "^5.0.0",
    "winston": "^3.2.1",
    "winston-loggly-bulk": "^3.0.1"
  },
  "devDependencies": {
    "babel-helper-vue-jsx-merge-props": "^2.0.3",
    "babel-plugin-syntax-jsx": "^6.18.0",
    "babel-plugin-transform-vue-jsx": "^3.7.0",
    "vue-template-compiler": "2.6.10"
  }
}

source\index.js:

import './imports/api/methods';
import 'vuetify/dist/vuetify.min.css';
if (Meteor.isClient) 
{
  import './imports/client';
} 
else if (Meteor.isServer) 
{
  import './imports/server';
  import './imports/server/logging';  
}

You are importing the css on the server as well as the client. Try moving css import inside the if (Meteor.isClient) {... block.

1 Like

Thank you @wildhart, this works.