"cannot find module" after meteor update from 1.8.0.2 to 1.10

help
1

I’ve just tried running meteor update to update my project from 1.8.0.2 to 1.10, and I’m now unable to import a particular npm package, "vue-echarts": "^4.0.1",. I’m hoping someone hear can help spot what I’m missing. The project is using Vue via akryum:vue-component.

I tried to recreate my problem in a brand new project w/ meteor create and following the Vue guide to create a bare bones app w/Meteor 1.10 and Vue and installing the same vue-echarts dependency, which gave me this and this does run fine and I see the contents of the ECharts module logged

import Vue from 'vue';
import App from './App.vue';
import ECharts from 'vue-echarts';

Vue.use(ECharts);
console.log('ECharts=', ECharts);

Meteor.startup(() => {
  new Vue({
    el: '#app',
    ...App,
  });
});

When I try to recreate this minimal example in my app, using the exact same file, it fails and cannot find the module

modules-runtime.js?hash=23fe92393aa44a7b01bb53a510a9cab5fb43037c:232 Uncaught Error: Cannot find module 'vue-echarts'
    at makeMissingError (modules-runtime.js?hash=23fe92393aa44a7b01bb53a510a9cab5fb43037c:232)
    at Module.resolve (modules-runtime.js?hash=23fe92393aa44a7b01bb53a510a9cab5fb43037c:238)
    at Module.moduleLink [as link] (modules.js?hash=6bb4fe200f9b6f00676429e6e9dd20a5513e0ba0:335)
    at module (client-main2.js:1)
    at fileEvaluate (modules-runtime.js?hash=23fe92393aa44a7b01bb53a510a9cab5fb43037c:346)
    at Module.require (modules-runtime.js?hash=23fe92393aa44a7b01bb53a510a9cab5fb43037c:248)
    at require (modules-runtime.js?hash=23fe92393aa44a7b01bb53a510a9cab5fb43037c:268)
    at app.js?hash=982a694993d07ea9e1cc12d3709c68b4a7b50fac:98
makeMissingError @ modules-runtime.js?hash=23fe92393aa44a7b01bb53a510a9cab5fb43037c:232
Module.resolve @ modules-runtime.js?hash=23fe92393aa44a7b01bb53a510a9cab5fb43037c:238
moduleLink @ modules.js?hash=6bb4fe200f9b6f00676429e6e9dd20a5513e0ba0:335
module @ client-main2.js:1
fileEvaluate @ modules-runtime.js?hash=23fe92393aa44a7b01bb53a510a9cab5fb43037c:346
require @ modules-runtime.js?hash=23fe92393aa44a7b01bb53a510a9cab5fb43037c:248
require @ modules-runtime.js?hash=23fe92393aa44a7b01bb53a510a9cab5fb43037c:268
(anonymous) @ app.js?hash=982a694993d07ea9e1cc12d3709c68b4a7b50fac:98
modules.js?hash=6bb4fe200f9b6f00676429e6e9dd20a5513e0ba0:9462 You are running Vue in development mode.

here is my .meteor/versions

accounts-base@1.6.0
accounts-password@1.6.0
akryum:vue-component@0.15.2
akryum:vue-component-dev-client@0.4.7
akryum:vue-component-dev-server@0.1.4
akryum:vue-sass@0.1.2
alanning:roles@1.2.19
aldeed:collection2-core@2.1.2
allow-deny@1.1.0
autoupdate@1.6.0
babel-compiler@7.5.3
babel-runtime@1.5.0
base64@1.0.12
binary-heap@1.0.11
blaze@2.3.4
blaze-tools@1.0.10
boilerplate-generator@1.7.0
caching-compiler@1.2.2
caching-html-compiler@1.1.3
callback-hook@1.3.0
check@1.3.1
ddp@1.4.0
ddp-client@2.3.3
ddp-common@1.4.0
ddp-rate-limiter@1.0.7
ddp-server@2.3.1
deps@1.0.12
didericis:callpromise-mixin@0.0.1
diff-sequence@1.1.1
dynamic-import@0.5.2
ecmascript@0.14.3
ecmascript-runtime@0.7.0
ecmascript-runtime-client@0.10.0
ecmascript-runtime-server@0.9.0
efrancis:iview@0.0.14
ejson@1.1.1
email@1.2.3
es5-shim@4.8.0
fetch@0.1.1
geojson-utils@1.0.10
hot-code-push@1.0.4
html-tools@1.0.11
htmljs@1.0.11
http@1.4.2
id-map@1.1.0
inter-process-messaging@0.1.1
jquery@1.11.11
lamhieu:meteorx@2.1.1
launch-screen@1.2.0
littledata:synced-cron@1.5.1
livedata@1.0.18
localstorage@1.2.0
logging@1.1.20
matb33:collection-hooks@0.9.1
mdg:validated-method@1.2.0
meteor@1.9.3
meteor-base@1.4.0
meteorhacks:inject-initial@1.0.4
meteorhacks:zones@1.6.0
minifier-css@1.5.0
minifier-js@2.6.0
minimongo@1.6.0
mobile-experience@1.1.0
mobile-status-bar@1.1.0
modern-browsers@0.1.5
modules@0.15.0
modules-runtime@0.12.0
mongo@1.10.0
mongo-decimal@0.1.1
mongo-dev-server@1.1.0
mongo-id@1.0.7
mongo-livedata@1.0.12
montiapm:agent@2.38.1
npm-bcrypt@0.9.3
npm-mongo@3.7.0
observe-sequence@1.0.16
omega:meteor-desktop-bundler@2.0.0
omega:meteor-desktop-watcher@2.0.0
ordered-dict@1.1.0
promise@0.11.2
raix:eventemitter@0.1.3
random@1.2.0
rate-limit@1.0.9
reactive-dict@1.3.0
reactive-var@1.0.11
reload@1.3.0
retry@1.1.0
routepolicy@1.1.0
service-configuration@1.0.11
session@1.2.0
sha@1.0.9
shell-server@0.5.0
simple:json-routes@2.1.0
simple:rest-json-error-handler@1.0.1
socket-stream-client@0.3.0
spacebars@1.0.15
spacebars-compiler@1.1.3
srp@1.1.0
standard-minifier-css@1.6.0
standard-minifier-js@2.6.0
static-html@1.2.2
templating@1.3.2
templating-compiler@1.3.3
templating-runtime@1.3.2
templating-tools@1.1.2
tmeasday:check-npm-versions@0.3.2
tracker@1.2.0
ui@1.0.13
underscore@1.0.10
url@1.3.0
webapp@1.9.1
webapp-hashing@1.0.9
zuuk:stale-session@1.0.8

and my package.json

"dependencies": {
    "@babel/runtime": "^7.9.6",
    "bunyan": "^1.8.12",
    "bunyan-debug-stream": "^1.0.8",
    "ccxt": "1.26.45",
    "ccxws": "git+https://github.com/evan-coygo/ccxws.git#e88fe69770dd3adf07ce1340a257819a9496c187",
    "coinbase": "2.0.8",
    "coingecko-api": "1.0.4",
    "comma-number": "^2.0.0",
    "copy-text-to-clipboard": "^2.1.0",
    "cryptowatch-embed": "lunafi-evan/embed#fix/1.0.0-color-scheme-dist",
    "echarts": "^4.2.1",
    "es6-promisify": "^6.0.0",
    "fuse.js": "^3.4.5",
    "highcharts": "^7.1.2",
    "highcharts-vue": "^1.3.5",
    "isomorphic-fetch": "^2.2.1",
    "iview": "^2.11.0",
    "load-script": "^1.0.0",
    "lodash.debounce": "^4.0.8",
    "mailchimp-api-v3": "^1.12.0",
    "meteor-node-stubs": "^1.0.0",
    "moment": "^2.19.3",
    "node-cron": "^1.2.1",
    "object-hash": "^2.0.1",
    "simpl-schema": "^1.5.3",
    "simple-web-worker": "^1.2.0",
    "stripe": "^7.1.0",
    "timeout-as-promise": "^1.0.0",
    "timer-queue": "^1.1.0",
    "universal-analytics": "^0.4.17",
    "vue": "^2.6.10",
    "vue-awesome": "^2.3.1",
    "vue-echarts": "^4.0.1",
    "vue-markdown": "^2.2.4",
    "vue-media": "^1.1.1",
    "vue-meteor-tracker": "^2.0.0-beta.5",
    "vue-router": "^2.7.0",
    "vue-select": "^2.6.4",
    "vue-social-sharing": "^2.4.7",
    "vue-virtual-scroller": "^1.0.0-rc.2",
    "vuex": "^2.3.1",
    "vuex-alt": "^0.0.7",
    "vuex-persist": "^2.0.0",
    "vuex-router-sync": "^4.1.2"
  },
  "devDependencies": {
    "@babel/plugin-proposal-object-rest-spread": "^7.9.6",
    "@babel/plugin-syntax-dynamic-import": "^7.8.3",
    "@babel/plugin-transform-runtime": "^7.9.6",
    "avoriaz": "^3.5.0",
    "babel-eslint": "^7.2.3",
    "babel-plugin-dynamic-import-node": "^1.0.2",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-es2017": "^6.24.1",
    "chromedriver": "^2.31.0",
    "codecov": "^3.6.5",
    "colors": "^1.3.2",
    "cross-env": "^5.2.0",
    "electron": "^3.0.10",
    "electron-builder": "^20.38.2",
    "http-server": "^0.11.1",
    "identity-obj-proxy": "^3.0.0",
    "install": "^0.13.0",
    "jest": "^23.5.0",
    "jest-junit": "^5.1.0",
    "jest-vue-preprocessor": "^1.4.0",
    "meteor-desktop": "^2.0.0",
    "meteor-husky": "^0.14.6",
    "npm": "^6.14.5",
    "semistandard": "^12.0.1",
    "snazzy": "^7.0.0",
    "validator": "^10.4.0",
    "vue-template-compiler": "^2.6.10",
    "vue-template-es2015-compiler": "^1.5.2"
  },
  "meteor": {
    "mainModule": {
      "client": "src/client/client-main2.js",
      "server": "src/server/server-main.js"
    }
  }
}

anyone have an idea why this would fail in 1.10? I didn’t see anything particular in the Meteor changelog notes

2

Have you tried the trio of

meteor reset
rm -rf node_modules
rm package-lock.json

?

3

Don’t remove your package-lock.json, that defeats the whole purpose of having one.

Just rm -rf node_modules && meteor npm ci should do.

4

Give this a try, per the instruction in your packages docs:

Meteor’s build system uses Babel, not Webpack, so per the docs, you need to just add vue-echarts to the list of transpileDependencies in the vue.config.js file.

I think Babel will then be able to compile the module & that will hopefully clear your error.

image
image1932×770 85.8 KB

image
image2096×992 183 KB

5

Thanks for finding that, you were right that was the issue. The Vue Meteor integration doesn’t support the vue.config.js file but I was able to modify my .vueignore to ignore transpiling everything in node_modules/ except for the one problematic package vue-echarts. this is my new .vueignore

node_modules\/(?!vue-echarts)
packages/
1 Like
6

Pretty cool! That’s a nice tip :+1: Nice job figuring out the work around!