SyntaxError: unknown: Unexpected token (import)

[jdferreira]

I'm not sure what the correct forum is to ask for help; if you think this is not the place, please direct me towards a better alternative.

I'm starting to learn webpack, following a tutorial which uses html-loader, extract-loader and file-loader. When I apply the extract-loader to an HTML file that depends on a CSS and JS file, webpack seems to be unable to compile the HTML:

Here's a snippet of the error.

SyntaxError: unknown: Unexpected token (3:83)
  1 | // Imports
  2 | import ___HTML_LOADER_GET_SOURCE_FROM_IMPORT___ from "../node_modules/html-loader/dist/runtime/getUrl.js";
> 3 | var ___HTML_LOADER_IMPORT_0___ = new URL("./9e9623e0b9c680a171a9f50add100517.css", import.meta.url);
    |                                                                                    ^
  4 | // Module
  5 | var ___HTML_LOADER_REPLACEMENT_0___ = ___HTML_LOADER_GET_SOURCE_FROM_IMPORT___(___HTML_LOADER_IMPORT_0___);

It seems there is a problem with the import keyword.

Is there a way to solve this issue or am I missing understanding somewhere?

Thank you.

[yossi-nagar]

It happens to me too. Any advice?

[teeramusic]

I'm having the same problem

[nielslerches]

I also have this problem.

[teeramusic]

I thought webpack looked really awesome but because of this I have to go back to grunt lol

[herundina]

I have the same problem here when I trying extract a html that depends on a CSS and Js file.

Help me, please.

[tlusk]

Disable the ES modules syntax in html-loader. https://webpack.js.org/loaders/html-loader/#esmodule

[alexbainter]

@tlusk Thank you!!

Solution

// in webpack configuration
module: {
  rules: [
     {
       test: /\.html$/, // or a path to your HTML file, etc
       use: [
         'file-loader',
         'extract-loader',
         {
           loader: 'html-loader',
           options: {
             esModule: false,
           }
         },
       ],
     },
  ],
}

Explanation

extract-loader is transforming modules with babel-preset-env (deprecated) which doesn't recognize some of the newer syntax features. I'm guessing https://github.com/peerigon/extract-loader/pull/109 will resolve this issue, but for now disabling esModule in html-loader also works.

[CarterPape]

I tried disabling esModule but now get a different error, still coming from extract-loader.

Module build failed (from ./node_modules/extract-loader/lib/extractLoader.js):
NonErrorEmittedError: (Emitted value instead of an instance of Error) TypeError: _insertBySelector2.default.bind is not a function
    at processResult (/.../node_modules/webpack/lib/NormalModule.js:710:12)
    at /.../node_modules/webpack/lib/NormalModule.js:819:5
    at /.../node_modules/loader-runner/lib/LoaderRunner.js:399:11
    at /.../node_modules/loader-runner/lib/LoaderRunner.js:251:18
    at context.callback (/.../node_modules/loader-runner/lib/LoaderRunner.js:124:13)
    at Object.<anonymous> (/.../node_modules/extract-loader/lib/extractLoader.js:40:13)
    at Generator.throw (<anonymous>)
    at step (/.../node_modules/babel-runtime/helpers/asyncToGenerator.js:17:30)
    at /.../node_modules/babel-runtime/helpers/asyncToGenerator.js:30:13

[prionkor]

I am not using html-loader still get this issue.

[broken]

@prionkor You are using some module that is running the extract-loader. In my case it was the extract-loader after css-loader. Setting the option esModule: false on the css-loader I believe would've worked, but I turned off loaders in general for urls using the option url: false

[richallanb]

Any update on getting #109 and/or #108 merged or has this loader been abandoned?

[Mario-Eis]

Disable the ES modules syntax in html-loader. https://webpack.js.org/loaders/html-loader/#esmodule

With url(./whatever.woff) in the file, this raises another error