CODEWITHSUNDEEP
javascriptwebpackecmascript-6babeljs
deojeff
deojeff

Reputation: 377

Webpack: Unexpected token import

I'm getting

(function (exports, require, module, __filename, __dirname) { import 
HtmlWebpackPlugin from "html-webpack-plugin"
                                                          ^^^^^^

SyntaxError: Unexpected token import

Dependencies in package.json

webpack : ^3.10.0

@babel/core : ^7.0.0-beta.38

@babel/plugin-syntax-dynamic-import : ^7.0.0-beta.38

@babel/plugin-transform-runtime : ^7.0.0-beta.38

@babel/preset-env: ^7.0.0-beta.38

babel-loader : ^8.0.0-beta.0

My configuration in .babelrc

{
  "presets": ["@babel/preset-env"],
  "plugins": [
    "@babel/plugin-syntax-dynamic-import",
    "@babel/plugin-transform-runtime"
  ]
}

My webpack.config.babel.js configuration

import HtmlWebpackPlugin from "html-webpack-plugin"

export default {
  // Our index file
  entry:  "./src/app/app.js",
  output: {
    path:     `${__dirname}/dist`,
    filename: "index_bundle.js",
  },

  module: {
    rules: [
      {
        test:    /\.js$/,
        exclude: /(node_modules)/,
        include: `${__dirname}/app`,
        use:     {
          loader:  "babel-loader",
        },
      },
    ],
  },

  plugins: [new HtmlWebpackPlugin()],
}

When I require the "html-webpack-plugin", and exporting the object with "module.exports" it works fine but I'm trying to write this in ES6.

I would appreciate if someone could guide/ give me hints on how to achieve this.

Many thanks

Upvotes: 2

Views: 5104

Answers (1)

deojeff
deojeff

Reputation: 377

It was an issue @babel/plugin-transform-runtime.

I've added @babel/register and everything works now.

Link to SO answer

Upvotes: 5

Related Questions