vueify (in gulp task) with babel transform of vue files

Question

fixed.

The solution is to:

1. pass through .transform(babelify) as well
2. ensure all your .vue-file script elements look like <script type="text/javascript"> -- that type attribute must come before custom attributes, lang attribute.. might ahve to be the first, even only attribute on the tag.

I think my problem is that I have es6 in my vues. I am getting:

[09:33:36] Starting 'public'...

events.js:160
      throw er; // Unhandled 'error' event
      ^
SyntaxError: 'import' and 'export' may appear only with 'sourceType: module'

npm ERR! Windows_NT 10.0.14393
npm ERR! argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "s
tart"

That error doesn't really tell me where it is coming from (my understanding is that it is from browserify), but if I null-op the public script the rest of the build works. Here's that script:

gulp.task('public', ['public/styles'], () => {
    mkdirp.sync(dest+'/public/scripts')
    return browserify('public/scripts/demo.js')
        .transform(vueify)
    .bundle()
    .pipe(fs.createWriteStream(dest+'/public/scripts/index.js'))
})

That's basically copied from the readme.MD for vueify. Its dependency public/styles definitely does work.

So, I thought, let's try to compile them manually. I ensured I have babel-core and babel-preset-latest. Then: built the files:

.babelrc

{ "presets": ["latest"]}

vue.config.js

var babel = require("babel-core");

module.exports = {
    customCompilers: {
    // for tags with lang="es6"
    es6: function (content, cb, compiler, filePath) {
      // content:  content extracted from lang="es6" blocks
      // cb:       the callback to call when you're done compiling
      // compiler: the vueify compiler instance
      // filePath: the path for the file being compiled
      //
      // compile some ES6... and when you're done:
      const babelified = babel.transform(content) // what to do with this funky babelified.map ?
      cb(null, babelified.code)
    }
}

That's basically straight out of the readme.MD, but for es6.

Then I changed my vues to have that tag, like:

<template>
    <div class="container">
        <app-header></app-header>
        <div class="row"><div class="col-xs-12">
            <transition name="slide" mode="out-in">
                <router-view></router-view>
            </transition>
        </div></div>
    </div>
</template>

<script lang="es6">
    import Header from './Header.vue'

    export default {
        components: {
            appHeader: Header
        },
        created() {
            this.$store.dispatch('initClasses')
        }
    }
</script>

<style>
    body {
        padding: 5vmin;
    }

    .slide-enter-active { animation: slide-in 200ms ease-out forwards }
    .slide-leave-active { animation: slide-out 200ms ease-out forwards }
    @keyframes slide-in {
        from { transform: translateY(-30vmin); opacity: 0 }
        to { transform: translateY(0px); opacity: 1}
    }
    @keyframes slide-out {
        from { transform: translateY(0px); opacity: 1 }
        to { transform: translateY(-30vmin); opacity: 0}
    }
</style>

Problem is, I still get the same error. What am I doing wrong?

ADDENDUMS IN RESPONSE

If I follow the advice below I get an error with import statements in my vue, in processing my main js file demo.js.

package.json's dev deps

  "devDependencies": {
    "babel": "^6.5.2",
    "babel-cli": "^6.22.2",
    "babel-plugin-syntax-async-functions": "^6.13.0",
    "babel-plugin-transform-async-to-generator": "^6.22.0",
    "babel-plugin-transform-runtime": "^6.22.0",
    "babel-preset-latest": "^6.22.0",
    "babelify": "^7.3.0",
    "browserify": "^14.0.0",
    "gulp": "^3.9.1",
    "gulp-autoprefixer": "^3.1.1",
    "gulp-babel": "^6.1.2",
    "gulp-clean": "^0.3.2",
    "gulp-clean-dest": "^0.2.0",
    "gulp-concat": "^2.6.1",
    "gulp-plumber": "^1.1.0",
    "gulp-rename": "^1.2.2",
    "gulp-rimraf": "^0.2.1",
    "gulp-sass": "^3.1.0",
    "gulp-util": "^3.0.8",
    "gulp-vueify": "0.0.3",
    "mkdirp": "^0.5.1",
    "vueify": "^9.4.0"
  },

nearly fixed.

With help, I've gotten babelify not choking on vues. This was actually pretty obscure but simple, just get rid of the lang attribute and add type="text/javascript" to each script tag. (Couldn't just add that type specification, it has to be the first tag in the script element).

It almost works. Now I get:

[14:04:32] Starting 'public'...
events.js:160
      throw er; // Unhandled 'error' event
      ^

Error: Cannot find module './vues/Home.vue' from 'C:\Users\roberto\github\cmst385-accessibility\public\scripts'

That is not the main js file! It's in routes.js

in main I have:

import App from './vues/App.vue'
import {routes} from './routes'

both of these work.

in routes I have:

import Home from './vues/Home.vue';

this does not work even though the file is there.

BINGO

okay so I had actually named the file "Home..vue" :)

Answer 1

The solution is to:

1. pass through .transform(babelify) as well (or do as listed in description and set it to go through babelify in package.json)
2. ensure all your .vue-file script elements look like <script type="text/javascript"> -- that type attribute must come before custom attributes, lang attribute.. might ahve to be the first, even only attribute on the tag.

Answer 2

These things are always difficult to debug without seeing the project, but I can show you how I set mine up, and you can check whether you have all these things in place:

Firstly, make sure you can use ES6 in your gulpfile. The easiest way is to name it gulpfile.babel.js. I'm guessing you already have this setup as you are managing to compile your styles.

Now, make sure that you have installed babel-latest, once again I'm sure you have done this:

npm install --save-dev babel-preset-latest

I actually use the babel-es2015-preset, so if you find latest is your problem simply install that instead and add the following to your .babelrc:

{ 
"presets": ["es2015"]
}

Now, make sure you have installed babelify:

npm install --save-dev babelify

Then add the following to package.json:

  "browserify": {
    "transform": [
      "babelify",
      "vueify"
    ]
  }

This means you can get rid of vue.config.js because browserify should now apply the transforms automatically.

Finally in your gulpfile you can do:

gulp.task('public', ['public/styles'], () => {
   return browserify({
            entries: 'public/scripts/demo.js',
            debug: true
        })
        .bundle()
        .pipe(source('demo.js')))
        .pipe(gulp.dest('public/scripts'));
});

I've never needed to add the lang attribute to the script tag to get this working.