WebpackError: TypeError: p5__WEBPACK_IMPORTED_MODULE_4___default.a is not a constructor

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(),
          },
        ],
      },
    })
  }
}

**错误输出：** output

这是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

Answer 1

有时，有问题的模块不是依赖项本身（在这种情况下为 p5 和 ml5），而是该库的开发依赖项之一。例如，在我的一个项目中，我正在展示一张地图，而地图库的输出与你的问题相同，在我的例子中，我不得不向 /canvg/ 添加一个 null 加载器，一个库那是用我的地图打印出来的。

Gatsby docs that may fit for you is using 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>
  )
}

小心使用它，因为尽管它是一个小尺寸依赖项，但您使用的是非本机方法（如 null 加载程序）并且它可能会增加应用程序的捆绑大小。

WebpackError: TypeError: p5__WEBPACK_IMPORTED_MODULE_4___default.a is not a constructor

WebpackError: TypeError: p5__WEBPACK_IMPORTED_MODULE_4___default.a is not a constructor

javascript

p5.js

gatsby

netlify

ml5.js