dynamic module contains no exports

Question

I have built a webpack project which has a single entry point that exports a default function. This project can be imported into other projects and the default function can be statically imported as follows:

import myFunction from "MyProject"

myFunction()

If I try to dynamically import the module, it appears that the module has no exports.

import(`https://example.com/myproject.mjs`).then(module => {
  module.default() // <-- TypeError: module.default is not a function
})

The project's webpack has the following configuration:

module.exports = {
  mode: 'production',
  entry: {
    main: './src/index.js'
  },
  output: {
    filename: '[name].mjs',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /(node_modules|libs)/,
        use: 'babel-loader'
      }
    ]
  },
  optimization: {
    minimize: true,
    minimizer: [new TerserPlugin({
      sourceMap: true,
      extractComments: false,
      exclude: "tests"
    })]
  },
  plugins: [
    new CleanWebpackPlugin(),
    new ESLintPlugin({
      fix: true,
      emitWarning: true,
      emitError: true,
      files: [
        'src/**/*.js',
        'test/**/*.js'
      ]
    }),
    new PrettierPlugin(),
    new FileManagerPlugin({
      onEnd: [
        {
          copy: [
            {
              source: './dist/**',
              destination: './test-runner/'
            }
          ]
        }
      ]
    })
  ],
  watch: false,
  devtool: 'source-map'
}

Is it possible to dynamically load a webpack built project like this?

dynamic module contains no exports

0 Answers0