WebpackError:TypeError:p5__WEBPACK_IMPORTED_MODULE_4___defau

Question

此服务器在开发模式下运行良好，但在生产构建过程中出错

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

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

exports.onCreateWebpackConfig = ({ stage, loaders, actions }) => {
if (stage === "build-html") {
actions.setWebpackConfig({
module: {
rules: [
{
test: /ml5/,
use: loaders.null(),
},
{
test: /p5/,
use: loaders.null(),
},
],
},
})
}
}

**错误输出：**输出

以下是experiences.js文件中的代码

import React from "react"
import MetaData from "../components/MetaData"
import ml5 from "ml5"
import "../components/styles.css"
import p5 from "p5"
export default function Experiments() {
let label = ""
let probability = ""
let classifier
let video
const gotResult = (err, result) => {
if (err) {
console.error(err)
} else {
label = result[0].label.toUpperCase()
probability = (result[0].confidence * 100).toFixed(2)
classifier.classify(gotResult)
}
}
const modelOnLoaded = () => {
console.log("Model is Successfully Loaded!")
}
const videoReady = () => {
classifier.classify(gotResult)
}
function sketch(p) {
p.setup = () => {
p.createCanvas(640, 480)
video.hide()
p.background(0)
}
p.draw = () => {
p.background(0)
p.image(video, 0, 0)
p.fill(0)
p.textSize(32)
p.text(label, 10, p.height - 100)
p.text(probability, 10, p.height - 30)
}
p.preload = () => {
video = p.createCapture(p.VIDEO, videoReady)
classifier = ml5.imageClassifier("MobileNet", video, modelOnLoaded)
}
}
new p5(sketch)
return (
<div>
<MetaData />
<h1 className="display-1">Image Classifier</h1>
<div></div>
</div>
)
}

机器规格：

System:
OS: Linux 5.4 Ubuntu 20.04.1 LTS (Focal Fossa)
CPU: (4) x64 Intel(R) Core(TM) i3-4005U CPU @ 1.70GHz
Shell: 5.8 - /usr/bin/zsh
Binaries:
Node: 12.20.0 - /usr/bin/node
Yarn: 1.22.10 - /usr/bin/yarn
npm: 6.14.10 - /usr/bin/npm
Browsers:
Chrome: 87.0.4280.88
npmPackages:
gatsby: ^2.26.1 => 2.26.1
gatsby-plugin-load-script: ^1.1.0 => 1.1.0
gatsby-plugin-manifest: ^2.9.0 => 2.9.0
gatsby-plugin-react-helmet: ^3.7.0 => 3.7.0
gatsby-source-github-api: ^0.2.1 => 0.2.1
gatsby-source-graphql: ^2.11.0 => 2.11.0
npmGlobalPackages:
gatsby-cli: 2.16.2

Answer 1

有时有问题的模块不是依赖项本身(本例中为p5和ml5(，而是这些库的开发依赖项之一。例如，在我的一个项目中，我显示了一个地图，而地图库正在输出与您相同的内容。在我的情况下，我不得不向/canvg/添加一个null加载程序，一个使用我的地图打印它的库。

Gatsby文档中另一个可能适合您的解决方案是使用可加载组件，基本上，它不是在构建时添加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>
)
}

小心使用它，因为尽管它是一个低大小依赖项，但您使用的是非本机方法(就像null加载器一样(，它可能会增加应用程序的捆绑大小。