当模块已被 Z424516CA53B4AD4BEFZ37ED0 捆绑时，如何从 HTML 的模块中调用 javascript function？

Question

This is probably a basic question but for some reason Google won't give me the answer.

I have a file called dropzone.stub.js in my src/ folder

import { Dropzone } from "dropzone";
Dropzone.autoDiscover = true;

// Callback takes one argument and that is the file that was 
// added.
export default function createDropZone(selector, url, callback) {
  const myDropzone = new Dropzone(selector, { url: url });
  myDropzone.on("addedfile", callback);
}

Basically I am just trying to call it from with script tags within my HTML file.

My webpack bundler is configured as follows:

const path = require('path');

module.exports = {
  mode: 'development',
  entry: './src/dropzone.stub.js',
  output: {
    filename: 'dropzone.bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
  module: {
    rules: [
      {
        test: /\.m?js$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: 'babel-loader',
          options: {
      //      presets: ['@babel/preset-env', {targets: 'defaults'}]
          }
        }
      },
//      {
//        test: /\.css$/i,
//        use: ['style-loader', 'css-loader'],
//      },
      {
        test: /\.(png|svg|jpg|jpeg|gif)$/i,
        type: 'asset/resource',
      },
    ],
    // resolve: {
    //  extensions: [ '.js', '.jsx', '.css' ],
    //}
  },
};

The script section in my HTML browser at the moment just looks like this:

<script type="module">
  import { createDropZone } from '/static/dist/dropzone.bundle.js';

</script>

The browser reports the following error:

Uncaught SyntaxError: The requested module '/static/dist/dropzone.bundle.js' does not provide an export named 'createDropZone'

Any ideas anyone?

Answer 1

You probably want

import createDropZone from '/static/dist/dropzone.bundle.js';

since you are exporting default

Answer 2

What does the bundled file look like. Webpack is most likely not bundling it as a es module.