{"action":"closed","issue":{"url":"https://api.github.com/repos/vuejs/vue-loader/issues/374","repository_url":"https://api.github.com/repos/vuejs/vue-loader","labels_url":"https://api.github.com/repos/vuejs/vue-loader/issues/374/labels{/name}","comments_url":"https://api.github.com/repos/vuejs/vue-loader/issues/374/comments","events_url":"https://api.github.com/repos/vuejs/vue-loader/issues/374/events","html_url":"https://github.com/vuejs/vue-loader/issues/374","id":180777061,"number":374,"title":"[2.0.1] .vue components aren't being transpiled with Babel but other .js files are","user":{"login":"dschissler","id":3968727,"avatar_url":"https://avatars.githubusercontent.com/u/3968727?v=3","gravatar_id":"","url":"https://api.github.com/users/dschissler","html_url":"https://github.com/dschissler","followers_url":"https://api.github.com/users/dschissler/followers","following_url":"https://api.github.com/users/dschissler/following{/other_user}","gists_url":"https://api.github.com/users/dschissler/gists{/gist_id}","starred_url":"https://api.github.com/users/dschissler/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/dschissler/subscriptions","organizations_url":"https://api.github.com/users/dschissler/orgs","repos_url":"https://api.github.com/users/dschissler/repos","events_url":"https://api.github.com/users/dschissler/events{/privacy}","received_events_url":"https://api.github.com/users/dschissler/received_events","type":"User","site_admin":false},"labels":[],"state":"closed","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":7,"created_at":"2016-10-04T00:03:19Z","updated_at":"2016-10-09T15:29:41Z","closed_at":"2016-10-09T15:29:41Z","body":"[edit] This is in my opinion not a `vue-loader` fault but one that affects it and causes bad times nonetheless.  Until Babel issue 166 is resolved I propose that this issue be left here.  Work arounds are to downgrade to Babel 5 or use Buble transpiler instead.\r\n\r\nI read that `vue-loader` is capable of finding if `babel-loader` is being used and that it can pass JS through to Babel within the script tags of the .vue file.  I'm learning on Vue starting at 2.0.1 and I have an issue where Babel is not processing my .vue component but it is doing so in my other .js files.\r\n\r\nHere is my loaders section:\r\n\r\n```\r\n      }, {\r\n        test: /\\.js?$/,\r\n        exclude: /(node_modules|bower_components)/,\r\n        loader: 'babel',\r\n        query: {\r\n          cacheDirectory: babelCacheDir,\r\n          plugins: [\r\n            require.resolve('babel-plugin-transform-runtime')\r\n          ],\r\n          presets: [\r\n            require.resolve('babel-preset-es2015'),\r\n            require.resolve('babel-preset-es2016'),\r\n            require.resolve('babel-preset-es2017'),\r\n            require.resolve('babel-preset-stage-0')\r\n          ]\r\n        }\r\n      }, {\r\n        test: /\\.vue$/,\r\n        loader: \"vue\"\r\n      }, {\r\n```\r\n\r\npackages.json\r\n\r\n```\r\n    \"webpack\": \"1.13.2\",\r\n    \"node-libs-browser\": \"1.0.0\",\r\n    \"webpack-dev-server\": \"1.16.1\",\r\n    \"extract-text-webpack-plugin\": \"1.0.1\",\r\n    ...\r\n    \"babel-core\": \"6.17.0\",\r\n    \"babel-polyfill\": \"6.16.0\",\r\n    \"babel-plugin-transform-runtime\": \"6.15.0\",\r\n    \"babel-preset-es2015\": \"6.16.0\",\r\n    \"babel-preset-es2016\": \"6.16.0\",\r\n    \"babel-preset-es2017\": \"6.16.0\",\r\n    \"babel-preset-stage-0\": \"6.16.0\",\r\n    \"babel-loader\": \"6.2.5\",\r\n    ...\r\n    \"vue\": \"2.0.1\",\r\n    \"vue-loader\": \"9.5.1\",\r\n    \"vue-resource\": \"1.0.3\",\r\n    \"vue-router\": \"2.0.0\",\r\n    \"vuex\": \"2.0.0\",\r\n```\r\n\r\nEntry:\r\n\r\n```javascript\r\n// System\r\nimport Vue from 'vue/dist/vue'\r\n// Application\r\nimport init from 'init'\r\n// Local\r\nimport App from './App'\r\n\r\nVue.component('app', App)\r\n\r\n// This is transpiled to var\r\nconst ABC = 123\r\n\r\ninit().then(function() {\r\n  const app = new Vue({\r\n    el: '#app',\r\n    template: '<app></app>'\r\n  })\r\n})\r\n```\r\n\r\nApp.vue:\r\n\r\n```html\r\n\r\n<template>\r\n  <div>asdfasdf</div>\r\n</template>\r\n\r\n<script>\r\n  // export default {\r\n  module.export = {\r\n    data() {\r\n      return {\r\n        counter: 0\r\n      }\r\n    }\r\n  }\r\n\r\n  // This is not transpiled\r\n  const A = 123\r\n</script>\r\n\r\n<style>\r\n\r\n</style>\r\n```"}}
{"actor":{"display_login":"yyx990803"}}