Webpack: Unexpected token import

2
votes

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

1
javascriptwebpackecmascript-6babeljs
Sounds like your webpack.config.babel.js is not being interpreted correctly from the babel compiler, if it is being interpreted. Which node version are you using? (also, which webpack version are you using?). Are you transpling the webpack config or..? – briosheje
Using the on-site search for your title returns a lot of results (more on searching here, though in this case nothing advanced is required). What, specifically, from those questions' answers have you tried/checked/etc. before posting your question? – T.J. Crowder
@briosheje My node is currently running version 8.9.0. I don't know, I'll do some reading and get back to you. Thanks – deojeff

1 Answers

4
votes

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

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

Link to SO answer