1

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

我正在使用 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(),
          },
        ],
      },
    })
  }
}

**错误输出：** 输出

以下是 Experiments.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
4

1 回答 1

1

有时，有问题的模块不是依赖项本身（p5在ml5这种情况下），而是该库的开发依赖项之一。例如，在我的一个项目中，我正在显示一张地图，并且地图库的输出与您的问题相同，在我的情况下，我必须添加一个null加载器/canvg/，一个使用我的地图打印它的库。

Gatsby 文档中可能适合您的另一个解决方案是使用loadable-components，基本上，它不是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>
  )
}

小心使用它，因为尽管它是一个低大小的依赖项，但您使用的是非本地方法（如nullloader），它可能会增加应用程序的捆绑大小。

于 2020-12-30T05:50:51.100 回答