ParseError: 'import' and 'export' may only appear at the top level

[engineers-tools]

I get this error when generating the files:

ParseError: 'import' and 'export' may only appear at the top level

This points at the line in the .vue file where the <script> declares export default {

I'm running the latest Node and npm on a Windows 10 machine.

Any pointers as to what might be going on will be appreaciated

[andy0130tw]

Also ran into the same issue :(

[andy0130tw]

I realized that this issue is related to Babelify.

tl; dr: To make all things work again, you need to go back to Babel 6 / Babelify 8.0 for now.

This must have something to do with Babel 7. I used vue init browserify to initiate a boilerplate. To reproduce the issue, change the dependencies in package.json just before running npm install:

"devDependencies": {
    "babelify": "^9.0.0",  // currently babelify@next; 8.x uses Babel 6
    "@babel/core": "^7.0.0-beta.47",
    "@babel/preset-env": "^7.0.0-beta.47",
    /* remove babel-core and babel-preset-env to avoid conflicts */
}

And replace env in .babelrc with @babel/preset-env. As a minimal reproduction, modify src/components/Hello.vue as follows,

  <script>
+ import OtherModule from './OtherModule.vue';
  export default {

And create src/components/OtherModule.vue with following content to trigger the bug,

<template>
<h1>Useless module</h1>
</template>

<script>
export default {
  data () {
    return {};
  }
};
</script>

Finally, npm run build:

/tmp/myapp/src/App.vue:9
import Hello from './components/Hello.vue'
^
ParseError: 'import' and 'export' may only appear at the top level

I am new to Babel 7, being really confused to realize the archived repo babel-preset-env simply works before giving up. To my frustration, I can't find out what exactly make this fail in the new Babel / Babelify. Maybe a regression.

[antonbehaeghe]

I was able to solve this error by adding the vueify and babelify transforms to my package.json
"browserify": { "transform": [ "vueify", "babelify" ] }

But now I'm getting a Failed to mount component: template or render function not defined. error in console, but it compiles just fine.

[dten]

the problem is vueify references babel-core in two places, changing them both to @babel/core fixes it for babel-7

https://github.com/vuejs/vueify/blob/master/lib/compiler.js#L22
https://github.com/vuejs/vueify/blob/master/lib/compilers/babel.js#L42

[artz]

I just hit this snag as well in setting up a fresh Vue project with all the latest packages. Is there an ETA for when @babel/core will be supported?

[inhortte]

I also ran into the error today, so I fixed (hacked?) vueify to work with Babel 7.
https://github.com/inhortte/vueify

[Kocal]

I think guys the best option is to move to rollup or webpack

[fabianwohlfart]

@inhortte that you didn't push

I also ran into the error today, so I fixed (hacked?) vueify to work with Babel 7.
https://github.com/inhortte/vueify

Thanks, but with npm install it won't catch your changes? – i hard-copied the code.