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

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

• javascript
• webpack
• ecmascript-6
• babeljs

Share Improve this question Follow asked Jan 20, 2018 at 7:54 deojeffdeojeff 37777 silver badges2121 bronze badges 3

• Sounds like your webpack.config.babel.js is not being interpreted correctly from the babel piler, 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 Commented Jan 20, 2018 at 7:58
• 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 Commented Jan 20, 2018 at 8:01
• @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 Commented Jan 20, 2018 at 8:08

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

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

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

Link to SO answer