title: In webpack how do I fix 'import declarations may only appear at top level of a module'?
body: <p>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'</p>
  
  <p>Below is my outputted app.js that contains the import statements. </p>
  
  <p><strong>How do I change my webpack config file to get rid of the import statements when it builds?</strong></p>
  
  <pre><code>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
  </code></pre>
  
  <p>Here is my current config file:</p>
  
  <pre><code>'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()
      ]
  };
  </code></pre>
  
  <p>My tsconfig.json</p>
  
  <pre><code>{
      "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"
      ]
  }
  </code></pre>