Webpack 4动态导入导致TypeError：[object Module]不是构造函数

Question

我在这里无法弄清楚我在做什么-仅在单击某个元素后才需要时才尝试动态导入sweetalert2。 onclick调用此函数：

  function triggerForm() {
    import ('sweetalert2' /* webpackChunkName: "sweetalert2" */)
      .then( Swal => {
        Swal.fire({
         // alert stuff
        })
      })
      .catch( error => console.error(error) )
  }

我在TypeError: [object Module] is not a constructor行上看到Swal.fire。定期导入效果很好。

webpack输出配置：

  output: {
    path: path.resolve(__dirname, 'build'),
    filename: '[name].bundle.js',
    chunkFilename: '[name].bundle.js',
    publicPath: config.publicPath,
  },

Answer 1

结果显示默认导入效果不佳。因此，我们必须像这样专门指定默认值：

  function triggerForm() {
    import ('sweetalert2' /* webpackChunkName: "sweetalert2" */)
      .then( ({ default: Swal }) => {
        Swal.fire({
         // alert stuff
        })
      })
      .catch( error => console.error(error) )
  }

请注意，尤其是上面的.then( ({ default: Swal }) => {行。