search

peerigon / extract-loader

webpack loader to extract HTML and CSS from the bundle
The Unlicense
317 stars 73 forks source link

Import error with ES6 js script embedded in html body #79

Open benjaminpreiss opened 4 years ago

benjaminpreiss commented 4 years ago

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

cecilia-sanare commented 4 years ago

Created a small example application that produces a similar error.

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