时间戳

首页 > 解决方案 > NextJS - 构建不起作用，但开发模式可以

javascript - NextJS - 构建不起作用，但开发模式可以

问题描述

当我运行npm run dev我的项目时启动。当我运行npm run build它失败并在下面粘贴以下错误。

奇怪的是我找到了它失败的第三方包。我可以删除它并成功构建。

它无法构建的软件包如下：

import dayGridPlugin from "@fullcalendar/daygrid"
import timeGridPlugin from "@fullcalendar/timegrid"
import interactionPlugin from "@fullcalendar/interaction"

错误

> Build error occurred
TypeError: Class extends value undefined is not a constructor or null
    at Object.__extends (/Users/asdf/fdsa/node_modules/tslib/tslib.js:70:19)
    at /Users/asdf/fdsa/.next/server/pages/schedule.js:18070:9
    at Object.mNTd (/Users/asdf/fdsa/.next/server/pages/schedule.js:18195:2)
    at __webpack_require__ (/Users/asdf/fdsa/.next/server/pages/schedule.js:23:31)
    at Module.QKeh (/Users/asdf/fdsa/.next/server/pages/schedule.js:15357:16)
    at __webpack_require__ (/Users/asdf/fdsa/.next/server/pages/schedule.js:23:31)
    at Object.3 (/Users/asdf/fdsa/.next/server/pages/schedule.js:195:18)
    at __webpack_require__ (/Users/asdf/fdsa/.next/server/pages/schedule.js:23:31)
    at /Users/asdf/fdsa/.next/server/pages/schedule.js:91:18
    at Object.<anonymous> (/Users/asdf/fdsa/.next/server/pages/schedule.js:94:10) {
  type: 'TypeError'
}

bable.config.js

module.exports = {
  presets: [
    // "@babel/preset-react", // necessary for all .jsx files
    "@babel/preset-env",
    [
      "@babel/preset-react",
      {
        runtime: "automatic",
      },
    ],
  ],
  plugins: ["@babel/plugin-transform-runtime"],

  // fullcalendar attempts to import its own CSS files, but next.js does not allow this.
  // throw away these statements before they arrive at next.js,
  // but you'll need to import them manually in pages/_app.jsx.
  // will also work for any other 3rd-party packages that attempt to do this.
  overrides: [
    {
      include: ["./node_modules"],
      plugins: [
        [
          "babel-plugin-transform-require-ignore",
          {
            extensions: [".css"],
          },
        ],
      ],
    },
  ],
}

next.config.js


// for transpiling all ESM @fullcalendar/* packages
// also, for piping fullcalendar thru babel (to learn why, see babel.config.js)
const withTM = require("next-transpile-modules")([
  "@fullcalendar/core",
  "@fullcalendar/common",
  "@fullcalendar/daygrid",
  "@fullcalendar/timegrid",
])

module.exports = withTM({
  // any other general next.js settings
})

标签： javascriptfullcalendarnext.js

解决方案

我通过使 fullCalendar 库仅在浏览器中加载来解决它。

所以我将 fullCalendar 移动到它自己的组件中，该组件仅在安装时加载。

// typeformSurvey.js

import React, { useRef, useEffect } from "react"
import * as typeformEmbed from "@typeform/embed"
function typeformSurvey() {
  const elementRef = useRef(null)

  useEffect(() => {
    typeformEmbed.makeWidget(
      elementRef.current,
      "https://form.typeform.com/to/XXXXXX"
    )
  })

  return <div ref={elementRef} style={{ width: "100%", height: "500px" }} />

}
export default typeformSurvey

这是用 Next 的“下一个/动态”函数调用的。

// page/calendar.js
...
import dynamic from "next/dynamic"


const DynamicComponentWithNoSSR = dynamic(
  () => import("../../common/typeformSurvey"),
  {
    ssr: false,
  }
)

....

function calendar() {
return (
  <div>
    <DynamicComponentWithNoSSR />
  </div>
)
}

推荐阅读