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

Module parse failed: /path/to/project/node_modules/imports-loader/index.js?this=>window!/path/to/project/src/entry.js 'import' and 'export' may only appear at the top level (4:0)
You may need an appropriate loader to handle this file type.
| (function() {
|
| import './NameSpace';
| import './Polyfill';

    rules: [
      {
        test: regx,
        use: [
          {
            loader: "imports-loader?this=>window",
          },
        ],
      },
    ],

But import 'imports-loader?this=>window./NameSpace'; this works fine.

[SteinNs]

import _ from 'lodash';
import { cube } from './math';
import Print from './print'

if(process.env.NODE_ENV !== 'production') {
	console.log('development');
}
// import './style.css';
function component (  ) {
	var elm = document.createElement('div');
	var btn = document.createElement('button');
	var br = document.createElement('br');

	elm.innerHTML = join(['hel1lo','webpack'], ' ');
	// elm.innerHTML = ['hello webpac1k!'].join(' ');
	btn.innerHTML = 'click print';
	this.alert('Hmmm, this probably isn\'t a great idea...');
	elm.appendChild(br);
	elm.appendChild(btn);
	btn.onclick = Print.bind(null, 'hello')
	return elm;
}
document.body.appendChild(component())

const path = require('path');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const webpack = require('webpack');

module.exports = {
	entry: {
		app: './src/index.js',
		vendor: ['lodash']
		another: './src/another-module.js'
	},
	module: {
		rules: [
			{
				test: require.resolve('./src/index.js'),
				use: 'imports-loader?this=>window'
			},
			{
				test: /\.css$/,
				use: [
					'style-loader',
					'css-loader'
				]
			},
			{
				test: /\.(png|svg|jpg|gif)$/,
				use: [
					'file-loader'
				]
			},
			{
				test: /\.(woff|woff2|eot|ttf|otf)$/,
				use:[
					'file-loader'
				]
			},
			{
				test: /\.(csv|tsv)$/,
				use: [
					'csv-loader'
				]
			},
			{
				test: /\.xml$/,
				use: [
					'xml-loader'
				]
			},

		]
	},
	plugins: [
		new CleanWebpackPlugin(['dist']),
		new HtmlWebpackPlugin({
			title: 'production'
		}),
		new webpack.optimize.CommonsChunkPlugin({
			name: 'vendor'
		}),

		new webpack.optimize.CommonsChunkPlugin({
			name: 'runtime'
		}),
		new webpack.ProvidePlugin({
			join: ['lodash', 'join']
		})

	],
	output: {
		filename: '[name].[hash].bundle.js',
		path: path.resolve(__dirname, 'dist'),
		chunkFilename: '[name].bundle.js'
	}
}

Hi, I’m a webpack beginner. I followed the webpack official guide using imports-loader and found an error

ERROR in ./src/index.js
Module parse failed: 'import' and 'export' may only appear at the top level (7:0)
You may need an appropriate loader to handle this file type.
|  * Created by Administrator on 2017/10/23.
|  */
| import _ from 'lodash';
| import { cube } from './math';
| import Print from './print'
 @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/index.js

[michaelzhng]

@SteinNs I had the same issue then I found that imports-loader just does this to my module:

/* src/index.js */
(function () {
  // my module
}.call(window));

If there is an import statement in the module, webpack will throw an error to the terminal because the statement is in a function, not at the top level. You can use CommonJS require function instead.