Conflicting imports of vue causing errors

Hello - I’m very fresh to vue, so excuse the beginner question, but I’m getting desperate.

I had a project that was created using vue-cli 2.x, and I wanted to upgrade it to use 3.0. I got everything to work, except that now I get an error in the console that there are two imports of vuejs in my app, causing the error [Vue warn]: $attrs is readonly..

I see both of them imported (vue.js, and vue.runtime.esm.js), as you can see in the screenshot below.

However, in main.js, I only import one (`import Vue from ‘vue’) . My index.html does not contain any references to import vue from a CDN.

Changing the import in main.js to import Vue from 'vue/dist/vue.esm.js' resolves the conflict, but the I get this error:

Here’s what my package.json looks like

{
  "name": "pom-frontend",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "axios": "^0.18.0",
    "bootstrap-vue": "^2.0.0-rc.8",
    "eslint-plugin-html": "^4.0.3",
    "jquery": "^3.3.1",
    "leaflet.icon.glyph": "^0.2.0",
    "nprogress": "^0.2.0",
    "schema-utils": "^0.4.5",
    "vue": "^2.5.16",
    "vue-analytics": "^5.10.6",
    "vue-router": "^3.0.1",
    "vue-select": "^2.4.0",
    "vue2-autocomplete-js": "^0.2.2",
    "vue2-leaflet": "^1.0.2"
  },
  "devDependencies": {
    "@vue/cli": "^3.0.0-rc.3",
    "@vue/cli-plugin-babel": "^3.0.0-beta.15",
    "@vue/cli-plugin-eslint": "^3.0.0-beta.15",
    "@vue/cli-service": "^3.0.0-beta.15",
    "autoprefixer": "^7.1.2",
    "babel-core": "^6.22.1",
    "babel-eslint": "^8.2.1",
    "babel-helper-vue-jsx-merge-props": "^2.0.3",
    "babel-jest": "^21.0.2",
    "babel-loader": "^7.1.1",
    "babel-plugin-dynamic-import-node": "^1.2.0",
    "babel-plugin-syntax-jsx": "^6.18.0",
    "babel-plugin-transform-es2015-modules-commonjs": "^6.26.0",
    "babel-plugin-transform-runtime": "^6.22.0",
    "babel-plugin-transform-vue-jsx": "^3.5.0",
    "babel-preset-env": "^1.3.2",
    "babel-preset-stage-2": "^6.22.0",
    "chalk": "^2.0.1",
    "copy-webpack-plugin": "^4.0.1",
    "css-loader": "^0.28.11",
    "eslint": "^4.19.1",
    "eslint-config-standard": "^10.2.1",
    "eslint-friendly-formatter": "^3.0.0",
    "eslint-loader": "^2.0.0",
    "eslint-plugin-import": "^2.7.0",
    "eslint-plugin-node": "^5.2.0",
    "eslint-plugin-promise": "^3.4.0",
    "eslint-plugin-standard": "^3.0.1",
    "eslint-plugin-vue": "^4.0.0",
    "extract-text-webpack-plugin": "^3.0.0",
    "file-loader": "^1.1.11",
    "friendly-errors-webpack-plugin": "^1.6.1",
    "html-webpack-plugin": "^2.30.1",
    "jest": "^22.0.4",
    "jest-serializer-vue": "^0.3.0",
    "node-notifier": "^5.1.2",
    "node-sass": "^4.9.0",
    "optimize-css-assets-webpack-plugin": "^3.2.0",
    "ora": "^1.2.0",
    "portfinder": "^1.0.13",
    "postcss-import": "^11.0.0",
    "postcss-url": "^7.2.1",
    "rimraf": "^2.6.0",
    "sass-loader": "^7.0.1",
    "semver": "^5.3.0",
    "shelljs": "^0.7.6",
    "style-loader": "^0.20.3",
    "uglifyjs-webpack-plugin": "^1.1.1",
    "url-loader": "^0.5.9",
    "vue-jest": "^1.0.2",
    "vue-loader": "^15.2.4",
    "vue-style-loader": "^3.0.1",
    "vue-template-compiler": "^2.5.2",
    "webpack": "^3.6.0",
    "webpack-bundle-analyzer": "^2.9.0",
    "webpack-dev-server": "^2.9.1",
    "webpack-merge": "^4.1.0"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended"
    ],
    "rules": {},
    "parserOptions": {
      "parser": "babel-eslint"
    }
  },
  "postcss": {
    "plugins": {
      "autoprefixer": {}
    }
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 8"
  ]
}

Any idea where the second import is coming from? How can I debug this?

Many thanks in advance.

your screenshot is not working, you seem to have screwed up the link.

package.json is fine, looking at the code would be more helpful.

runtimeCompiler: true in vue.config.js

1 Like

@LinusBorg: oops! I fixed the link. What code would be useful to share? Here’s my main.js:

// import Vue from 'vue/dist/vue.js'
import Vue from 'vue/dist/vue.esm.js'
// import Vue from 'vue/dist/vue.runtime.esm.js'
// import Vue from 'vue'
import App from './App'
import VueRouter from 'vue-router'
import router from './router'

// import L from 'vue2-leaflet'

Vue.use(VueRouter)
Vue.config.productionTip = false

// eslint-disable-next-line
delete L.Icon.Default.prototype._getIconUrl

// eslint-disable-next-line
L.Icon.Default.mergeOptions({
  iconRetinaUrl: require('leaflet/dist/images/marker-icon-2x.png'),
  iconUrl: require('leaflet/dist/images/marker-icon.png'),
  shadowUrl: require('leaflet/dist/images/marker-shadow.png')
})

/* eslint-disable no-new */
new Vue({
  el: '#app',
  components: { App },
  router: router,
  template: '<App/>'
})

@CaiPeng1989 that seems to be an undocumented config option :sweat_smile: I used it and it works, but I’m not sure what it does. Where could I read about it?

https://cli.vuejs.org/config/#runtimecompiler

You have to read the right documentation. Configuration of vue-cli is not documented in the Guide for Vue.js

1 Like

:see_no_evil: oops. Thanks for the link.

Ok, so I should set a variable in a .env file, to set runtimeCompiler to false in the production build?

I’m also curious about what is the root cause of the problem, since this error does not occur in a fresh vue-cli project, but is happening in mine, even though I don’t think that I have changed any of the default config options.

:pray: