NextJS – Build not working but dev mode does

When I run npm run dev my project starts up. When i run npm run build it fails with the following error pasted below.

What’s weird is that I found the third party package that it is failing on. I can remove it and it builds successfully.

The packages that it fails to build are the following:

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'


module.exports = {
  presets: [
    // "@babel/preset-react", // necessary for all .jsx files
        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: [
            extensions: [".css"],


// 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")([

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

1 thought on “NextJS – Build not working but dev mode does”

  1. I solved it by making the fullCalendar library only load when it was in the browser.

    So I moved the fullCalendar into its own component that only loads when it is mounted.

    // typeformSurvey.js
    import React, { useRef, useEffect } from "react"
    import * as typeformEmbed from "@typeform/embed"
    function typeformSurvey() {
      const elementRef = useRef(null)
      useEffect(() => {
      return <div ref={elementRef} style={{ width: "100%", height: "500px" }} />
    export default typeformSurvey

    And this is called with Next’s "next/dynamic" functions.

    // page/calendar.js
    import dynamic from "next/dynamic"
    const DynamicComponentWithNoSSR = dynamic(
      () => import("../../common/typeformSurvey"),
        ssr: false,
    function calendar() {
    return (
        <DynamicComponentWithNoSSR />

Leave a Comment