CODEWITHSUNDEEP
webpackvue.jsbabeljs
Jayson H
Jayson H

Reputation: 2048

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

I'm using webpack with vuejs. Webpack does its thing, but when I look at the outputted app.js file, it gives me this error.

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

I'm assuming it's a problem with babel not converting the code? Because I'm getting this in the browser when viewing the application.

Unexpected token import

Here's my entry.js for my vuejs application:

/*jshint esversion: 6 */
import Vue from 'vue';
import App from './App.vue';
import VueRouter from 'vue-router';
Vue.use(VueRouter);
require('./css/style.scss');

// Export the vue router
export var router = new VueRouter({
  hashbang: false,
  root: '/'
  // history: true
});

// Set up routing and match routes to components
router.map({
  '/': {
    component: require('./components/home/Home.vue')
  }
});

// Redirect to the home route if any routes are unmatched
router.redirect({
  '*': '/'
});

// Start the app on the #app div
router.start(App, '#app');

Here's my webpack.config.js:

var ExtractTextPlugin = require('extract-text-webpack-plugin');
var path = require('path');

module.exports = {
  entry: './src/entry.js',
  output: {
      filename: './public/js/app.js'
  },
  devtool: 'source-map',
  plugins: [
    new ExtractTextPlugin('./public/css/style.css')
  ],
  module: {
    preLoaders: [{
        test: /\.js$/, 
        exclude: /node_modules/,
        loader: 'jshint-loader'
    }],
    loaders: [{
        test: /\.scss$/,
        loader: ExtractTextPlugin.extract(
            'style',
            'css!sass'
        ),
    },
    {
        test: /\.vue$/,
        loader: 'vue'
    },
    {
        test: /\.js$/,
        exclude: /node_modules/,
        include: [
          path.resolve(__dirname, "src/services"),
        ],
        loader: 'babel-loader',
        query: {
          presets: ['es2015']
        }
    }]
  }
};

Here's my packages.json file:

{
  "name": "test-webpack",
  "version": "1.0.0",
  "description": "Myapp",
  "main": "entry.js",
  "scripts": {
    "watch": "webpack-dev-server  --host $IP --port $PORT  --hot --inline --config webpack.config.js",
    "dev": "webpack",
    "build": ""
  },
  "author": "Dev",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.9.1",
    "babel-loader": "^6.2.4",
    "babel-plugin-transform-class-properties": "^6.10.2",
    "babel-plugin-transform-runtime": "^6.9.0",
    "babel-preset-es2015": "^6.9.0",
    "babel-runtime": "^6.9.2",
    "css-loader": "^0.23.1",
    "extract-text-webpack-plugin": "^1.0.1",
    "jshint": "^2.9.2",
    "jshint-loader": "^0.8.3",
    "node-sass": "^3.8.0",
    "path": "^0.12.7",
    "sass-loader": "^3.2.0",
    "style-loader": "^0.13.1",
    "vue-hot-reload-api": "^1.3.2",
    "vue-html-loader": "^1.2.2",
    "vue-loader": "^8.5.2",
    "vue-style-loader": "^1.0.0",
    "webpack": "^1.13.1",
    "webpack-dev-server": "^1.14.1"
  },
  "dependencies": {
    "vue": "^1.0.25",
    "vue-router": "^0.7.13"
  }
}

Upvotes: 104

Views: 230324

Answers (16)

Daniel_Ranjbar
Daniel_Ranjbar

Reputation: 120

my solution: remove setup attribute in your scripts tag.

In my case it was because the default npm init vue@2^ generated my template in a way that my script tag had a setup attribute. I removed the attribute an it was fixed. hope it helps.

Upvotes: 1

blid
blid

Reputation: 1181

For me, this was caused by a reference to module in a hot module replacement implementation:

constructor() {
  if (module && module.hot) {
    module.hot.status(status => {
      if (status === 'dispose') {
        this.webSocket.close();
      }
    });
  }
}

Upvotes: 0

duhaime
duhaime

Reputation: 27611

I got this error when I was missing a closing brace in a component method:

const Whoops = props => {
  const wonk = () => {props.wonk();      // <- note missing } brace!
  return (
    <View onPress={wonk} />
  )
}

Upvotes: 14

paibamboo
paibamboo

Reputation: 2904

I got this error after upgrading to webpack 4.29.x. It turned out that webpack 4.29.x triggered npm's peerDependency bug. And according to them, the bug is not going to get fixed soon. Here's the workaround from sokra

  • add "acorn": "^6.0.5" to your application package.json.
  • Switch to yarn. It doesn't have this bug.
  • npm update acorn --depth 20 npm dedupe (works only in some cases)
  • rm package-lock.json npm i (works only in some cases)
  • update all other packages that depend on an older version for acorn (works only in some cases)
  • lock webpack at 4.28.4 in your package.json

Update

According to comment below, this bug doesn't exist anymore after 4.36.0

Upvotes: 4

Kiran Mohan
Kiran Mohan

Reputation: 3016

This is not direct answer to the original question but I hope this suggestion helps someones with similar error:

When using a newer web-api with Webpack+Babel for transpiling and you get

Module parse failed: 'import' and 'export' may only appear at the top level

then you probably forgot to import a polyfill.

For example:
when using fetch() api and targeting for es2015, you should

  1. add whatwg-fetch polyfill to package.json
  2. add import {fetch} from 'whatwg-fetch'

Upvotes: 2

lukeaus
lukeaus

Reputation: 12265

I got this error when I was missing a closing bracket.

Simplified recreation:

const foo = () => {
  return (
    'bar'
  );
}; <== this bracket was missing

export default foo;

Upvotes: 280

LuuSean
LuuSean

Reputation: 1

Maybe you're missing some plugins, try:

npm i --save-dev babel-plugin-transform-vue-jsx

npm i --save-dev babel-plugin-transform-runtime

npm i --save-dev babel-plugin-syntax-dynamic-import
  • If using "Webpack.config.js":

Missing Plugins

  • If using ".babelrc", see answer in this link.

Upvotes: 0

Aakash
Aakash

Reputation: 23855

Vue supports async components:

Source : https://vueschool.io/articles/vuejs-tutorials/async-vuejs-components/

<script>
export default {
  data: () => ({ show: false }),
  components: {
    Tooltip: () => import("./Tooltip")
  }
};
</script>

Good Luck...

Upvotes: 1

Marco Ng
Marco Ng

Reputation: 41

My error is caused by a System.import('xxx.js') statment. After replacing it with import xxx from 'xxx.js', the error solved.

I think it is because require('xxx.scss') also caused a dynamic import.

For the case in the question description, in my opinion, dynamic imports is not necessary, so the problem should be solved by just replacing all requires with import ... from ....

For some case which dynamic imports are necessary, you may need @babel/plugin-syntax-dynamic-import as other answers in this question.

Upvotes: 1

Bastien
Bastien

Reputation: 517

I had the same issue using webpack4, i was missing the file .babelrc in the root folder: 

{
    "presets":["env", "react"],
    "plugins": [
        "syntax-dynamic-import"
    ]
}

From package.json : 

"babel-core": "^6.26.3",
"babel-loader": "^7.1.5",
"babel-plugin-syntax-dynamic-import": "^6.18.0",
"babel-polyfill": "^6.26.0",
"babel-preset-env": "^1.7.0",
"babel-preset-react": "^6.24.1",

Upvotes: 8

Jon Higgins
Jon Higgins

Reputation: 176

Using webpack 4.14.0 and babel-cli 6.26 I had to install this Babel plugin to fix the SyntaxError: 'import' and 'export' may only appear at the top level error: babel-plugin-syntax-dynamic-import

It was linked through from the Webpack Code Splitting Docs.

Upvotes: 6

Eric Knudtson
Eric Knudtson

Reputation: 2583

Look out for a double opening bracket syntax error as well {{ which can cause this error message to appear

Upvotes: 5

Kirill
Kirill

Reputation: 1

I do not know how to solve this problem differently, but this is solved simply. The loader babel should be placed at the beginning of the array and everything works.

Upvotes: 0

Ace
Ace

Reputation: 175

Make sure you have a .babelrc file that declares what Babel is supposed to be transpiling. I spent like 30 minutes trying to figure this exact error. After I copied a bunch of files over to a new folder and found out I didn't copy the .babelrc file because it was hidden.

{
  "presets": "es2015"
}

or something along those lines is what you are looking for inside your .babelrc file

Upvotes: 11

pixlboy
pixlboy

Reputation: 1502

I am using Webpack 2.2.0 to bundle my React JS modules.

Encountered a similar issue while importing modules in my main app.js file.

After 30 minutes of headbanging I updated the RegEx for testing the file types in my webpack.config.js.

Carefully notice the ? symbol in test RegEx query.

{
    test: /\.js?$/,
    exclude: /(node_modules)/,
    loader: 'react-hot-loader'
}

It worked for me !!

Upvotes: 0

Jacob
Jacob

Reputation: 78920

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

This means that webpack is bundling the non-transpiled ES6 code, which is why these import/export statements are being found. babel-loader must therefore not be transpiling what you expect.

If you simply remove the include and exclude rules from its loader config, the default behavior of transpiling everything besides what's in node_modules will kick in. For some reason or another, the current rules are causing some/all files to be skipped.

module.exports = {
  entry: './src/entry.js',
  output: {
    filename: './public/js/app.js'
  },
  devtool: 'source-map',
  plugins: [
    new ExtractTextPlugin('./public/css/style.css')
  ],
  module: {
    preLoaders: [{
      test: /\.js$/, 
      exclude: /node_modules/,
      loader: 'jshint-loader'
    }],
    loaders: [{
      test: /\.scss$/,
      loader: ExtractTextPlugin.extract(
        'style',
        'css!sass'
      ),
    },
    {
      test: /\.vue$/,
      loader: 'vue'
    },
    {
      test: /\.js$/,
      loader: 'babel-loader',
      query: {
        presets: ['es2015']
      }
    }]
  }
};

Upvotes: 19

Related Questions