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 }) => {行。