Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[2.0.1] .vue components aren't being transpiled with Babel but other .js files are #374

Closed
dschissler opened this issue Oct 4, 2016 · 11 comments

Comments

@dschissler
Copy link

dschissler commented Oct 4, 2016

[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.

I 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.

Here is my loaders section:

      }, {
        test: /\.js?$/,
        exclude: /(node_modules|bower_components)/,
        loader: 'babel',
        query: {
          cacheDirectory: babelCacheDir,
          plugins: [
            require.resolve('babel-plugin-transform-runtime')
          ],
          presets: [
            require.resolve('babel-preset-es2015'),
            require.resolve('babel-preset-es2016'),
            require.resolve('babel-preset-es2017'),
            require.resolve('babel-preset-stage-0')
          ]
        }
      }, {
        test: /\.vue$/,
        loader: "vue"
      }, {

packages.json

    "webpack": "1.13.2",
    "node-libs-browser": "1.0.0",
    "webpack-dev-server": "1.16.1",
    "extract-text-webpack-plugin": "1.0.1",
    ...
    "babel-core": "6.17.0",
    "babel-polyfill": "6.16.0",
    "babel-plugin-transform-runtime": "6.15.0",
    "babel-preset-es2015": "6.16.0",
    "babel-preset-es2016": "6.16.0",
    "babel-preset-es2017": "6.16.0",
    "babel-preset-stage-0": "6.16.0",
    "babel-loader": "6.2.5",
    ...
    "vue": "2.0.1",
    "vue-loader": "9.5.1",
    "vue-resource": "1.0.3",
    "vue-router": "2.0.0",
    "vuex": "2.0.0",

Entry:

// System
import Vue from 'vue/dist/vue'
// Application
import init from 'init'
// Local
import App from './App'

Vue.component('app', App)

// This is transpiled to var
const ABC = 123

init().then(function() {
  const app = new Vue({
    el: '#app',
    template: '<app></app>'
  })
})

App.vue:

<template>
  <div>asdfasdf</div>
</template>

<script>
  // export default {
  module.export = {
    data() {
      return {
        counter: 0
      }
    }
  }

  // This is not transpiled
  const A = 123
</script>

<style>

</style>
@dschissler
Copy link
Author

Possibly vue-loader is not taking into account babel-loader issue 166. This means that the node_modules and webpack starting path is not in the same tree as other paths in the resolve.root. This requires babel plugins to be added with require.resolve('name'). I could be wrong, maybe its not related.

@rayout
Copy link

rayout commented Oct 4, 2016

I also have this problem

@dschissler
Copy link
Author

I was able to get around this by changing my transpiler to Buble with buble-loader. I'm super tired of this old Babel issue 166 as it was affecting me on other things as well. For my target browsers I only lost async/await features but that is not too terrible since the transformation was making my code look awful and debugging was a joke.

Another potential solution could be to downgrade to Babel 5. It doesn't really matter unless you want to pass the ES6 modules to the bundler for tree shaking or to use let, const, etc in the final code . I'm not aware of any other actual benefit at the moment.

@rachardking
Copy link

I also have this problem

@sqal
Copy link

sqal commented Oct 8, 2016

@dschissler #350 (comment)

@dschissler
Copy link
Author

@sqal Good to know but the buble-loader doesn't seem to have this problem.

@yyx990803
Copy link
Member

In your config the query only applies to files matched by /\.js?$/, so it doesn't work for vue files.

Use .babelrc instead of in-config queries.

@JTallis
Copy link

JTallis commented Dec 20, 2016

laravel-elixir-webpack-official uses buble by default. You can overwrite this however buble will still remain a dependency.

vue-loader in the case of when both babel and buble are installed will use buble over babel. It would be nice to be able to configure whether or not vue-loader should use babel over buble, because just because buble is installed doesn't mean I want to use it. Uninstalling buble will not be effective as it will only cause laravel-elixir-webpack-official to complain and as it's a dependency of that, will only be reinstalled.

Would this be possible at all?


I noticed that regardless of whether or not Buble is installed, vue-loader will use vue-template-es2015-compiler which does use Buble. Is it possible to just switch to Babel?

@yyx990803
Copy link
Member

@JTallis you can explicitly configure the loader to use: https://vue-loader.vuejs.org/en/configurations/advanced.html

@JTallis
Copy link

JTallis commented Dec 23, 2016

@yyx990803 Thanks for your reply. It seems that if I specify a Vue loader that it causes issue where my components don't have a template or render function. This may be because it's already defined as a loader inside of the laravel-elixir-vue-2 module. It is also defined to use Buble there too. Fortunately, all I needed to do to configure it to use Babel is to specify just that, ignoring Vue in webpack.config.js all together.

module.exports = {
    module: {
        loaders: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                loader: 'babel-loader'
            }
        ]
    },
    vue: {
        loaders: {
            js: 'babel-loader'
        }
    }
}

I still have not figured out how it ended up using Babel when I thought I saw it strictly using Buble but at least it's sorted now. :)

@muyi0327
Copy link

why the webpack bundle file includes a lot of code? such as node-libs-browser

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

7 participants