Syntax Error: import declarations may only appear at the top level of a module

[midascodebreaker]

I recently add babel-plugin-transform-runtime ,babel-runtime ,and babel-preset-stage-0 in webpack.config.js and also .babelrc plus i add a exclude folder node_modules in webpack,config.js

babelrc

{
  "presets": ["es2015", "stage-0"],
  "plugins": ["transform-runtime"],
  "comments": false
}

webpack.config.js

babel: {
    presets: ['es2015', 'stage-0'],
    plugins: ['transform-runtime']
  }

Also to make it compile faster i add this to webpack.config.js

 test: /\.js$/,
      loader: 'babel',
      exclude: /node_modules/

here is my reference...

http://vuejs.github.io/vue-loader/en/features/es2015.html

I can receive 2 errors at different point...

first if i remove the exclude folder of node_modules and i retain other...

i got this ...

$export($export.S, 'Object', { create: __webpack_require__(28) });

But if i remove everything except es2015 in babelrc and the exclude folder in webpack.config.js

i receive an error at this line pertaining to the vuestrap/core in my app.js

yntaxError: import declarations may only appear at top level of a module

this is the line that is throwing the error in my browser and i can only see blank page

    // import core stuff
    import './_core.scss'

To fix this i need to remove all changes in my webpack.config.js and revert back to using es2015 only in babelrc...

Is there a way i can fix this ?

other than this

[midascodebreaker]

export error is being caused by the babel runtime and transform-runtime plugin....

i guest i have no choice... to make compiling faster it tooks 60 secs....

without the node_modules. all the files im dependent in node_modules is neglected....

it fast but import error is raise

[li3p]

I encountered the same problem before. what I do to fix it:

1. make a vendor directory, and movethe ES6 libraries such as vuestrap from node_modules to this directory.
2. change webpack.config.js:
   • add the vendor directory to resolve section: resolve: { root: path.resolve('./'), modulesDirectories: ['vendor', 'node_modules'] },
   • exclude node_modules from babel loader: { test: /\.js$/, loader: 'babel', exclude: /node_modules/ },

that solved my problem, hope it can help you.

[li3p]

Close it due to no feedback. Open a new one if this does not help.