Import error with ES6 js script embedded in html body

Open benjaminpreiss opened this issue 5 years ago • 1 comments

Operating System: Windows 10 Pro
Node Version: 13.12.0
NPM Version: 6.14.4
webpack Version: 4.42.1
extract-loader Version: 5.0.1

Expected Behavior

extract-loader should correctly process ES6 files and their links passed to it by html-loader.

Actual Behavior

Running npx webpack resp. npm run webpack returns this error:

ERROR in ./src/html/index.html
Module build failed (from ./node_modules/extract-loader/lib/extractLoader.js):
C:\ ... \website\src\index.js:1
(function (exports, require, module, __filename, __dirname) { import { gsap } from 'gsap';
                                                              ^^^^^^

SyntaxError: Cannot use import statement outside a module
...

Code

webpack.config.js and package.json

index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    ...
</head>
<body id="#body">
    <script type="module" src="../index.js"></script>
</body>
</html>

index.js:

import { gsap } from 'gsap';
import fullpage from 'fullpage.js';
import $ from 'jquery';

var ...

How Do We Reproduce?

File structure:

 - src/
         - html/
                - index.html
         - index.js

 - dist/
 - webpack.config.js
 - package.json

Then run npm run webpack

Apr 05 '20 08:04 benjaminpreiss

Created a small example application that produces a similar error.

https://glitch.com/edit/#!/melted-bitter-music

Jun 04 '20 16:06 cecilia-sanare