Javascript WebPackageError:TypeError:p5\uu WebPackage\u IMPORTED\u MODULE\u 4\uuuu\u默认值。a不是构造函数

此服务器在开发模式下运行正常，但在生产构建期间抛出错误

我正在使用Gatsby.js框架，目前，我的代码部署在netlify服务器上

这是我的gatsby-node.js配置文件：

exports.onCreateWebpackConfig=（{stage，loaders，actions}）=>{
如果（阶段==“构建html”）{
actions.setWebpackConfig({
模块：{
规则：[
{
测试：/ml5/，
用法：loaders.null（），
},
{
测试：/p5/，
用法：loaders.null（），
},
],
},
})
}
}

有时，有问题的模块不是依赖项本身（

p5

和

ml5

），而是该库的开发依赖项之一。例如，在我的一个项目中，我正在显示一张地图，地图库正在输出与您的问题相同的内容，我必须将

null

加载程序添加到

/canvg/

，在我的情况下，是一个使用我的地图打印地图的库

另一个可能适合您的解决方案是，基本上，它不是在构建时添加

null

加载程序，而是在客户端（而不是服务器端）加载依赖项。就你而言：

import loadable from '@loadable/component'

const YourFunctionToUseMl5 = loadable(() => import ml5 from "ml5")
const YourFunctionToUseP5 = loadable(() => import p5 from "p5")


function MyComponent() {
 useEffect(()=>{
   // use safely ml5 and p5
 }, [])

  return (
    <div>
     Hello loadable
    </div>
  )
}

从'@loadable/component'导入可加载
const YourFunctionToUseMl5=可加载（（）=>从“ml5”导入ml5）
const YourFunctionToUseP5=可加载（（）=>从“p5”导入p5）
函数MyComponent（）{
useffect（（）=>{
//安全使用ml5和p5
}, [])
返回(
你好，可加载
)
}

---

小心使用它，因为尽管它是一个低大小的依赖项，但您使用的是非本机方法（就像

null

loader一样），它可能会增加应用程序的绑定大小。

如果您删除那些

null

加载程序，那么

窗口是否会困扰您？是的！，然后它将抛出一个关于
窗口不可用的错误。我也这样做了，但仍然显示错误：TypeError:p5不是构造函数您确定
p5
是可导入库吗？我不这么认为，而且我还没有找到关于这方面的信息，所以我猜这是一个本机JavaScript库，而不是React库是的，你是对的。您不能直接在react应用程序中导入p5，而是我使用的，它可以工作！