0

I've ready many questions and articles on the subject, but nothing seems to work. My error is this:

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

It's a result of me being unable to properly transpile es6 code. Here's my webpack and .babelrc:

webpack:

var HtmlWebpackPlugin = require('html-webpack-plugin')
var ExtractTextPlugin = require('extract-text-webpack-plugin')
var HTMLWebpackPluginConfig = new HtmlWebpackPlugin({
  template: __dirname + '/app/index.html',
  filename: 'index.html',
  inject: 'body'
});
var path = require('path')
var webpack = require('webpack');

module.exports = {
  devtool: 'source-map',
  entry: [
    'webpack-hot-middleware/client?reload=true',
    path.join(__dirname, './app/index.js')
  ],
  module: {
    loaders: [{
      test: [/\.js$/,/\.jsx$/],
      loader: "babel-loader",
      include: [
         path.resolve(__dirname, "node_modules/flash-notification-react-redux"),
         path.resolve(__dirname, "./app")
      ],
    },{
      test: /\.(css|scss)$/,
      loader: ExtractTextPlugin.extract('css!sass')
    },{
      test: /\.(png|jpg)$/,
      loader: 'url-loader?limit=8192'
    }]
  },
  output: {
    filename: 'index.bundle.js',
    path: __dirname + '/dist',
    publicPath: '/'
  },
  plugins: [
    HTMLWebpackPluginConfig,
    new ExtractTextPlugin('public/style.css', {
      allChunks: true
    }),
    new webpack.HotModuleReplacementPlugin(),
  ]
}

.babelrc

{
  presets: [ 'es2015', 'stage-0', 'react'],
  plugins: ['transform-decorators-legacy']
}

I've tried various things (such as using 'babel-preset-es2015', as well as the stage-0 addition), but nothing seems to work.

This code in one of my Components:

import GrowlerComponent from 'flash-notification-react-redux'

is converted to this in index.bundle.js, which actually throws the error:

import GrowlerReducer from "./src/reducer/growler.reducer";
minifigmaster125
  • 165
  • 3
  • 12

0 Answers0