SyntaxError: Cannot use import statement outside a module

[benjaminpreiss]

I am getting this error for an embedded ES6 script:

Error:

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

SyntaxError: Cannot use import statement outside a module
    at new Script (vm.js:99:7)
    at NativeCompileCache._moduleCompile (C:\Users\benja\Nextcloud\benjamin_preiss_business\Projects\coding\susanne_website\website\node_modules\v8-compile-cache\v8-compile-cache.js:240:18)
    at Module._compile (C:\Users\benja\Nextcloud\benjamin_preiss_business\Projects\coding\susanne_website\website\node_modules\v8-compile-cache\v8-compile-cache.js:186:36)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1167:10)
    at Module.load (internal/modules/cjs/loader.js:996:32)
    at Function.Module._load (internal/modules/cjs/loader.js:896:14)
    at Module.require (internal/modules/cjs/loader.js:1036:19)
    at require (C:\Users\benja\Nextcloud\benjamin_preiss_business\Projects\coding\susanne_website\website\node_modules\v8-compile-cache\v8-compile-cache.js:161:20)
    at C:\Users\benja\Nextcloud\benjamin_preiss_business\Projects\coding\susanne_website\website\node_modules\extract-loader\lib\extractLoader.js:146:41
    at require (C:\Users\benja\Nextcloud\benjamin_preiss_business\Projects\coding\susanne_website\website\node_modules\extract-loader\lib\extractLoader.js:125:86)
    at C:\Users\benja\Nextcloud\benjamin_preiss_business\Projects\coding\susanne_website\website\src\html\index.html:3:8571
    at Script.runInContext (vm.js:142:20)
    at Script.runInNewContext (vm.js:148:17)
    at C:\Users\benja\Nextcloud\benjamin_preiss_business\Projects\coding\susanne_website\website\node_modules\extract-loader\lib\extractLoader.js:162:20
    at Generator.next (<anonymous>)
    at step (C:\Users\benja\Nextcloud\benjamin_preiss_business\Projects\coding\susanne_website\website\node_modules\babel-runtime\helpers\asyncToGenerator.js:17:30)
    at C:\Users\benja\Nextcloud\benjamin_preiss_business\Projects\coding\susanne_website\website\node_modules\babel-runtime\helpers\asyncToGenerator.js:35:14
    at new Promise (<anonymous>)
    at new F (C:\Users\benja\Nextcloud\benjamin_preiss_business\Projects\coding\susanne_website\website\node_modules\core-js\library\modules\_export.js:36:28)
    at C:\Users\benja\Nextcloud\benjamin_preiss_business\Projects\coding\susanne_website\website\node_modules\babel-runtime\helpers\asyncToGenerator.js:14:12
    at evalModule (C:\Users\benja\Nextcloud\benjamin_preiss_business\Projects\coding\susanne_website\website\node_modules\extract-loader\lib\extractLoader.js:180:63)
    at evalDependencyGraph (C:\Users\benja\Nextcloud\benjamin_preiss_business\Projects\coding\susanne_website\website\node_modules\extract-loader\lib\extractLoader.js:182:12)
    at Object.<anonymous> (C:\Users\benja\Nextcloud\benjamin_preiss_business\Projects\coding\susanne_website\website\node_modules\extract-loader\lib\extractLoader.js:33:31)
    at Generator.next (<anonymous>)
    at step (C:\Users\benja\Nextcloud\benjamin_preiss_business\Projects\coding\susanne_website\website\node_modules\babel-runtime\helpers\asyncToGenerator.js:17:30)
    at C:\Users\benja\Nextcloud\benjamin_preiss_business\Projects\coding\susanne_website\website\node_modules\babel-runtime\helpers\asyncToGenerator.js:35:14
    at new Promise (<anonymous>)
    at new F (C:\Users\benja\Nextcloud\benjamin_preiss_business\Projects\coding\susanne_website\website\node_modules\core-js\library\modules\_export.js:36:28)
    at Object.<anonymous> (C:\Users\benja\Nextcloud\benjamin_preiss_business\Projects\coding\susanne_website\website\node_modules\babel-runtime\helpers\asyncToGenerator.js:14:12)
    at Object.extractLoader (C:\Users\benja\Nextcloud\benjamin_preiss_business\Projects\coding\susanne_website\website\node_modules\extract-loader\lib\extractLoader.js:42:55)
 @ multi ./src/index.js ./src/scss/startpage/index.scss ./src/html/index.html index[2]

These are my files: index.html:

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

index.js (using ES6 syntax):

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

var ...

webpack.config.js:

const path = require('path');

module.exports = {
  entry: {
    index: './src/html/index.html',
  },
  mode: 'development',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'js/[name].bundle.js'
  },
  plugins: [],
  devtool: 'source-map',
  module: {
    rules: [ 
      {
        test: /index\.html$/,
        use: [
            {
              loader: 'file-loader',
              options: {
                outputPath: './',
                name: '[name].[ext]',
              },
            },
            "extract-loader",
            "ref-loader",
            {
              loader: "html-loader",
              options: {
                  attributes: {
                    list: [{
                      tag: 'img',
                      attribute: 'src',
                      type: 'src'
                    }],
                  },
              }
            }
        ]
      },
      ...
      {
          test: /\.js$/,
          exclude: /node_modules/,
          use: "babel-loader"
      }
    ]
  }
};

Help would be very appreciated!

[leecjson]

Hi, it looks like 'extract-loader' can't resolve ES6 module syntax. I don't recommend that reference a JS file via 'extract-loader' because i think that isn't a fully functional node environment. I suggest you reference a JS by 'import' or 'require' directly or using 'html-webpack-plugin' to finish this job.

[benjaminpreiss]

Yes, indeed. Thank you for the hint!

Here is an example repo for anyone who has the same issues:

webpack_conf