[Vue warn]: Templates should only be responsbile for mapping the state to the UI. Avoid placing tags with side-effects in your templates, such as <script>

gbisheimer commented 8 years ago

Just trying to use vue2 for the first time in my webpack project. I'm currently using vue 1.0.26 in the same project without issues.

After migrating and making the changes to the code as specified here I'm getting this warning: [Vue warn]: Templates should only be responsbile for mapping the state to the UI. Avoid placing tags with side-effects in your templates, such as <script> in the console and components are not being rendered.

I'm using single file (.vue) components.

Found that the components that includes other components inside the <script> tag are triggering the warning. Standalone components work just fine.

Can it be related to a webpack/loader missconfiguration?

I'm testing with:

"dependencies": {
    "babel-runtime": "^6.0.0",
    "bootstrap": "^3.3.7",
    "font-awesome": "^4.6.3",
    "jquery-ui": "^1.12.0",
    "numeral": "^1.5.3",
    "vue": "^2.0.0-beta.6",
    "vuex": "^2.0.0-rc.3"
  },
  "devDependencies": {
    "babel-core": "^6.0.0",
    "babel-eslint": "^6.1.2",
    "babel-loader": "^6.0.0",
    "babel-plugin-transform-runtime": "^6.0.0",
    "babel-preset-es2015": "^6.0.0",
    "babel-preset-stage-2": "^6.0.0",
    "babel-register": "^6.0.0",
    "bootstrap-webpack": "0.0.5",
    "chai": "^3.5.0",
    "chromedriver": "^2.21.2",
    "coffee-loader": "^0.7.2",
    "coffee-script": "^1.10.0",
    "connect-history-api-fallback": "^1.1.0",
    "cross-spawn": "^2.1.5",
    "css-loader": "^0.23.1",
    "eslint": "^2.10.2",
    "eslint-config-standard": "^5.1.0",
    "eslint-friendly-formatter": "^2.0.5",
    "eslint-loader": "^1.3.0",
    "eslint-plugin-html": "^1.3.0",
    "eslint-plugin-promise": "^1.0.8",
    "eslint-plugin-standard": "^1.3.2",
    "eventsource-polyfill": "^0.9.6",
    "exports-loader": "^0.6.3",
    "express": "^4.13.3",
    "extract-text-webpack-plugin": "^1.0.1",
    "file-loader": "^0.8.4",
    "font-awesome-webpack": "0.0.4",
    "function-bind": "^1.0.2",
    "html-webpack-plugin": "^2.8.1",
    "http-proxy-middleware": "^0.12.0",
    "imports-loader": "^0.6.5",
    "inject-loader": "^2.0.1",
    "isparta-loader": "^2.0.0",
    "jquery": "^3.1.0",
    "json-loader": "^0.5.4",
    "karma": "^0.13.15",
    "karma-coverage": "^0.5.5",
    "karma-mocha": "^0.2.2",
    "karma-phantomjs-launcher": "^1.0.0",
    "karma-sinon-chai": "^1.2.0",
    "karma-sourcemap-loader": "^0.3.7",
    "karma-spec-reporter": "0.0.24",
    "karma-webpack": "^1.7.0",
    "less": "^2.7.1",
    "less-loader": "^2.2.3",
    "lolex": "^1.4.0",
    "mocha": "^2.4.5",
    "nightwatch": "^0.8.18",
    "node-sass": "^3.8.0",
    "npm-install-webpack-plugin": "^4.0.4",
    "ora": "^0.2.0",
    "phantomjs-prebuilt": "^2.1.3",
    "resolve-url-loader": "^1.6.0",
    "sass-loader": "^4.0.0",
    "selenium-server": "2.53.0",
    "shelljs": "^0.6.0",
    "sinon": "^1.17.3",
    "sinon-chai": "^2.8.0",
    "style-loader": "^0.13.1",
    "url-loader": "^0.5.7",
    "vue-hot-reload-api": "^1.3.3",
    "vue-html-loader": "^1.2.3",
    "vue-loader": "^9.3.2",
    "vue-style-loader": "^1.0.0",
    "webpack": "^1.12.2",
    "webpack-dev-middleware": "^1.4.0",
    "webpack-hot-middleware": "^2.6.0",
    "webpack-merge": "^0.8.3"
  }

Thanks.

gbisheimer commented 8 years ago

Fixed this. I've included vue as import Vue from 'vue/dist/vue.js' and it gives the error I mentioned earlier. Using import Vue from 'vue/dist/vue.min.js' instead solved my problem.

jandante commented 8 years ago

I think the minified version just skips the valuable warnings :)

lmj0011 commented 7 years ago

is there an answer to better explain what this warning means?

yudikubota commented 7 years ago

Solved this by fixing unclosed tags.

muhannadsnan commented 7 years ago

I had the same problem, and the reason was I missed a div closing !

isatrio commented 6 years ago

Same problem here. don't know why it happen. I thought I missed something. But not sure where

dan-passaro commented 6 years ago

Could the error message be improved somehow? Was stumped by this for a while and it turned out I closed one of my tags wrong.

mikestratton commented 5 years ago

Just write your script as follows: <script type="application/javascript"> // your code </script>

pbek commented 5 years ago

Just write your script as follows: <script type="application/javascript"> // your code </script>

@mikestratton, thank you. I tried that and it solved some of the issues, but when I tried that on Google Ads code like <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js" type="application/javascript"></script> got errors like this:

VM92997 adsbygoogle.js:1 Uncaught I {message: "adsbygoogle.push() error: No slot size for availableWidth=0", name: "TagError", stack: "TagError: adsbygoogle.push() error: No slot size f…syndication.com/pagead/js/adsbygoogle.js:1:19939)"}

I wonder if there is a a way to turn off the Templates should only be responsible for mapping the state to the UI. Avoid placing tags with side-effects in your templates, such as <script>, as they will not be parsed. warnings altogether.

DiegoRicardoValdiviaArreola commented 5 years ago

To me it was because I was using a svg element that had a

vuejs / vue-loader

[Vue warn]: Templates should only be responsbile for mapping the state to the UI. Avoid placing tags with side-effects in your templates, such as <script> #302