In webpack how do I fix 'import declarations may only appear at top level of a module'?

Question

Webpack builds successfully and I can browse to my webpage. However, the Javascript fails, saying: 'import declarations may only appear at top level of a module'

Below is my outputted app.js that contains the import statements.

How do I change my webpack config file to get rid of the import statements when it builds?

webpackJsonp([0],{

/***/ 0:
/***/ function(module, exports, __webpack_require__) {

    __webpack_require__(1);
    __webpack_require__(74);
    module.exports = __webpack_require__(76);


/***/ },

/***/ 76:
/***/ function(module, exports) {

    "use strict";

    import 'app/tools/typescriptImports.ts';
    import * as mainScreenHelper from 'app/tools/mainScreenHelper';
    import React from 'react';
    import * as reactDom from 'react-dom';
    import Router from 'react-router';
    import createBrowserHistory from 'history/lib/createBrowserHistory';
    import routes from 'app/tools/routes';
    import 'style/app.scss';
    import 'font-awesome/scss/font-awesome.scss';

    mainScreenHelper.removeLoadingScreen();
    mainScreenHelper.createReactApp();

/***/ }

});
//# sourceMappingURL=app.js.map

Here is my current config file:

'use strict';

//https://webpack.github.io/docs/configuration.html

var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var CopyWebpackPlugin = require('copy-webpack-plugin');
var path = require('path');
var rootPath = __dirname; //ekaya
var srcPath = path.join(rootPath, 'src/client'); //ekaya/src/client
var distPath = path.join(rootPath, 'dist/client'); //ekaya/dist/client

module.exports =
{
    bail: true,
    cache: true,
    context: rootPath,
    debug: true,
    devtool: 'source-map', //inline-source-map, https://webpack.github.io/docs/configuration.html#devtool
    target: 'web', //node, web
    devServer:
    {
        contentBase: distPath,
        historyApiFallback: true,
        outputPath: path.join(distPath, 'devServer')
    },
    entry:
    {
        app: path.join(srcPath, 'app/home.jsx'),
        lib: ['react', 'react-router', 'react-dom', 'jquery', 'lodash', 'history']
    },
    output:
    {
        path: distPath,
        publicPath: '',
        filename: '[name].js',
        pathInfo: true
    },
    resolve:
    {
        root: srcPath,
        extensions: ['', '.js', '.jsx', '.ts', '.tsx'],
        modulesDirectories: ['node_modules', srcPath]
    },
    module:
    {
        loaders:
        [
            {test: /\.js$/, loader: 'babel-loader?cacheDirectory', exclude: /(node_modules)/ },
            {test: /\.jsx$/, loader: 'babel-loader?cacheDirectory', exclude: /(node_modules)/ },
            {test: /\.ts$/, loader: 'ts-loader?cacheDirectory', exclude: /(node_modules)/ },
            {test: /\.tsx$/, loader: 'ts-loader?cacheDirectory', exclude: /(node_modules)/ },
            {test: /\.scss$/, loaders: ['style', 'css', 'sass']},
            {test: /\.png$/, loader: 'file-loader'},
            {test: /\.jpg$/, loader: 'file-loader'},
            {test: /\.jpeg$/, loader: 'file-loader'},
            {test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: 'file-loader?mimetype=image/svg+xml'},
            {test: /\.woff(\?v=\d+\.\d+\.\d+)?$/, loader: "file-loader?mimetype=application/font-woff"},
            {test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/, loader: "file-loader?mimetype=application/font-woff"},
            {test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: "file-loader?mimetype=application/octet-stream"},
            {test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: "file-loader"}
        ]
    },
    plugins:
    [
        new CopyWebpackPlugin
        ([
            { from: path.join(srcPath, 'images'), to: 'images' }
        ]),
        new webpack.optimize.CommonsChunkPlugin('lib', 'lib.js'),
        new HtmlWebpackPlugin
        ({
            inject: true,
            template: path.join(srcPath, 'index.html')
        }),
        new webpack.NoErrorsPlugin()
    ]
};

My tsconfig.json

{
    "buildOnSave": false,
    "compileOnSave": false,
    "compilerOptions":
    {
        "allowJs": true,
        "jsx": "react",
        "noImplicitAny": true,
        "module": "commonjs",
        "outDir": "dist/client/ts",
        "removeComments": true,
        "sourceMap": false,
        "target": "es5"
    },
    "exclude":
    [
        "node_modules",
        "dist"
    ]
}

Answer 1

If you're following the guide on https://webpack.js.org , you might not realise that site is only documenting Webpack version 2 or later, not Webpack 1. One of the new features of Webpack 2 is that it has native ES6 import, export and System.import.

You need to install Webpack 2 first:

npm install --save-dev [email protected]

If you want to see a list of all Webpack releases, run:

npm show webpack versions --json

Answer 2

I had the same problem. You installed ES6. The import fails w/o it.

Babel file is copied without being transformed

EDIT:

By default, Babel 6.x does not perform any transformations. You need to tell it what transformations to run:

npm install babel-preset-es2015

and run

babel --presets es2015 proxy.js --out-file proxified.js

or create a .babelrc file containing

{
    "presets": [
        "es2015"
    ]
}

Answer 3

I ran into the same issue and found out that my file structure was the problem:

Modules can only imported from the same or lower level as the entry point configured in webpack.config.js in module.exports.entry, i.e.:

module.exports = {
  entry: path.resolve(__dirname, 'javascripts', 'main.js')
}

I was trying to import locales from a higher level:

├── javascripts
│   └── main.js
└── locales
    ├── de.js
    └── en.js

After moving the locales directory, the import worked:

└── javascripts
    ├── locales
    │   ├── de.js
    │   └── en.js
    └── main.js

Answer 4

Ok, I got this to work somehow, not really sure which part did it, but here are all my config files for anyone facing the same problem in the future;

webpack:

'use strict';

//https://webpack.github.io/docs/configuration.html

var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var CopyWebpackPlugin = require('copy-webpack-plugin');
var path = require('path');
var rootPath = __dirname; 
var srcPath = path.join(rootPath, 'src/client');
var distPath = path.join(rootPath, 'dist/client'); 

module.exports =
{
    bail: true,
    cache: false,
    context: rootPath,
    debug: true,
    devtool: 'source-map', //inline-source-map, https://webpack.github.io/docs/configuration.html#devtool
    target: 'web', //node, web
    devServer:
    {
        contentBase: distPath,
        historyApiFallback: true,
        outputPath: path.join(distPath, 'devServer')
    },
    entry:
    {
        app: path.join(srcPath, 'app/home.jsx'),
        lib: ['react', 'react-router', 'react-dom', 'jquery', 'lodash', 'history']
    },
    output:
    {
        path: distPath,
        publicPath: '',
        filename: '[name].js',
        pathInfo: true
    },
    resolve:
    {
        root: srcPath,
        extensions: ['', '.js', '.jsx', '.ts', '.tsx'],
        modulesDirectories: ['node_modules', srcPath, 'typings']
    },
    module:
    {
        loaders:
        [
            {test: /\.js$/, loader: 'babel-loader?cacheDirectory', exclude: /(node_modules|typings)/ },
            {test: /\.jsx$/, loader: 'babel-loader?cacheDirectory', exclude: /(node_modules|typings)/ },
            {test: /\.ts$/, loader: 'ts-loader?cacheDirectory', exclude: /(node_modules|typings)/ },
            {test: /\.tsx$/, loader: 'ts-loader?cacheDirectory', exclude: /(node_modules|typings)/ },
            {test: /\.scss$/, loaders: ['style', 'css', 'sass']},
            {test: /\.png$/, loader: 'file-loader'},
            {test: /\.jpg$/, loader: 'file-loader'},
            {test: /\.jpeg$/, loader: 'file-loader'},
            {test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: 'file-loader?mimetype=image/svg+xml'},
            {test: /\.woff(\?v=\d+\.\d+\.\d+)?$/, loader: "file-loader?mimetype=application/font-woff"},
            {test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/, loader: "file-loader?mimetype=application/font-woff"},
            {test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: "file-loader?mimetype=application/octet-stream"},
            {test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: "file-loader"}
        ]
    },
    plugins:
    [
        new CopyWebpackPlugin
        ([
            { from: path.join(srcPath, 'images'), to: 'images' }
        ]),
        new webpack.optimize.CommonsChunkPlugin('lib', 'lib.js'),
        new HtmlWebpackPlugin
        ({
            inject: true,
            template: path.join(srcPath, 'index.html')
        }),
        new webpack.NoErrorsPlugin()
    ]
};

.babelrc:

{
    "presets": ["es2015", "react"]
}

package.json

{
  "name": "ekaya",
  "private": "true",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "dependencies":
  {
      "jquery": "2.2.3",
      "lodash": "4.11.1",
      "font-awesome": "4.6.1",
      "history": "2.1.1",
      "react": "15.0.2",
      "react-dom": "15.0.2",
      "react-router": "2.4.0",

      "compression": "1.0.3",
      "cors": "2.5.2",
      "helmet": "1.3.0",
      "loopback": "2.22.0",
      "loopback-boot": "2.6.5",
      "loopback-component-explorer": "2.4.0",
      "loopback-datasource-juggler": "2.39.0",
      "serve-favicon": "2.0.1"
  },
  "devDependencies":
  {
    "node-sass": "3.7.0",
    "nsp": "2.1.0",
    "babel-core": "6.8.0",
    "babel-loader": "6.2.4",
    "babel-preset-es2015": "6.6.0",
    "babel-preset-react": "6.5.0",
    "css-loader": "0.23.1",
    "file-loader": "0.8.5",
    "jsx-loader": "0.13.2",
    "font-awesome": "4.6.1",
    "copy-webpack-plugin": "2.1.3",
    "html-webpack-plugin": "2.16.1",
    "sass-loader": "3.2.0",
    "style-loader": "0.13.1",
    "ts-loader": "0.8.2",
    "typescript-loader": "1.1.3",
    "typescript": "1.8.10",
    "typings": "0.8.1",
    "webpack": "1.13.0",
    "webpack-dev-server": "1.14.1"
  },
  "scripts":
  {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "./node_modules/.bin/webpack --progress --colors",
    "run": "./node_modules/.bin/webpack-dev-server --hot --inline --progress --colors --watch"
  },
  "repository":
  {
    "type": "git",
    "url": ""
  },
  "config":
  {
    "port": "8080"
  },
  "author": "",
  "license": "private",
  "homepage": ""
}

tsconfig.json:

{
    "buildOnSave": false,
    "compileOnSave": false,
    "compilerOptions":
    {
        "allowJs": true,
        "jsx": "react",
        "noImplicitAny": true,
        "module": "commonjs",
        "outDir": "dist/client/ts",
        "removeComments": true,
        "sourceMap": false,
        "target": "es6"
    },
    "exclude":
    [
        "node_modules",
        "dist",
        "typings"
    ]
}

typings.json

{
  "ambientDependencies": {
    "jquery": "registry:dt/jquery#1.10.0+20160417213236",
    "lodash": "registry:dt/lodash#3.10.0+20160330154726",
    "react": "registry:dt/react#0.14.0+20160423065914",
    "react-dom": "registry:dt/react-dom#0.14.0+20160412154040"
  },
  "dependencies": {}
}

I also recommend deleting your compiled output (my 'dist' folder) and rebuilding, without using the webpack devServer.

And since some of the react-router history typings don't seem to work, write your own:

declare module 'history/lib/createBrowserHistory' {
    const x: any;
    export = x;
}

declare module 'react-router' {
    const x: any;
    export = x;
}