search

DaniJG / AspCoreVue

45 stars 22 forks source link

Failed to mount component: template or render function not defined Vue Warning when updating #1

Open cburchett opened 6 years ago

cburchett commented 6 years ago

I am trying to update this project to use the current version of Bootstrap (4.0 beta 2) and Vue (2.5.9) and I have been running into a lot of issues:

  1. WebPack doesn't seem to like jquery or Popper.js which is required for Bootstrap 4 (I was able to get around this by adding the script references to index.cshtml
  2. I can't seem to get my Vue to render because of a Vue warn: Failed to mount component: template or render function not defined.

Here is my package.json versions I am using:

"devDependencies": { "@types/jquery": "^3.2.16", "@types/webpack-env": "^1.13.2", "aspnet-webpack": "^2.0.1", "awesome-typescript-loader": "^3.4.0", "bootstrap": "^4.0.0-beta.2", "css-loader": "^0.28.7", "event-source-polyfill": "0.0.12", "extract-text-webpack-plugin": "^3.0.2", "file-loader": "^1.1.5", "isomorphic-fetch": "^2.2.1", "jquery": "^3.2.1", "popper.js": "^1.12.9", "style-loader": "^0.19.0", "typescript": "^2.6.2", "url-loader": "^0.6.2", "vue": "^2.5.9", "vue-class-component": "^6.1.0", "vue-loader": "^13.5.0", "vue-property-decorator": "^6.0.0", "vue-router": "^3.0.1", "vue-template-compiler": "^2.5.9", "webpack": "^3.8.1", "webpack-hot-middleware": "^2.21.0" }

Any thoughts?

I appreciate your article found here: http://www.dotnetcurry.com/aspnet/1383/modern-web-dev-aspnet-core-webpack-vuejs. I have learned a lot from it.

DaniJG commented 6 years ago

jquery was already part of the project and added for bootstrap 3. If you look at webpack.config.vendor.js you will see the list of libraries included which includes jquery. By the bottom of the file you will see it also exports jquery as the global $ and jQuery variables.

I would assume you need to upgrade jquery and bootstrap and npm install --save-dev popper.js. You will then need to update webpack.config.vendor.js to include popper and to also export a Popper variable.

Check the guide on the bootstrap docs.

PS. glad to hear you like the article :)