Can't resolve '@fullcalendar' in '.blitz/build'

[Jaxenormus]

What is the problem?

I am trying to get FullCalendar to work with Blitz.js. FullCalendar has documentation on how to get it to work with Next.js, which I am trying to follow, but when I went to add next-transpile-modules and transpile FullCalendar, it ran into this error. It seems that when next-transpile-modules looks for the library, it can't find it in the build.

FullCalendar Instructions here: https://github.com/fullcalendar/fullcalendar-example-projects/tree/master/next

Paste all your error logs here:

✔ Compiled
ready - started server on 0.0.0.0:3000, url: http://localhost:3000
info  - Loaded env from /Users/caleb/Documents/projects/typescript/minimal-repo/.env
Error: next-transpile-modules - an unexpected error happened when trying to resolve "@fullcalendar"
Error: Can't resolve '@fullcalendar' in '/Users/caleb/Documents/projects/typescript/minimal-repo/.blitz/build'

Paste all relevant code snippets here:

const { sessionMiddleware, simpleRolesIsAuthorized } = require("blitz")
const withTM = require("next-transpile-modules")(["@fullcalendar"])

module.exports = withTM({
  middleware: [
    sessionMiddleware({
      isAuthorized: simpleRolesIsAuthorized,
    }),
  ],
})

What are detailed steps to reproduce this?

1. Start a new blitz project
2. Install the following packages @fullcalendar/core, @fullcalendar/daygrid, @fullcalendar/react, next-transpile-modules, babel-plugin-transform-require-ignore
3. Add the following snippet into babel-config.js

  overrides: [
    {
      include: ["./node_modules"],
      plugins: [
        [
          "babel-plugin-transform-require-ignore",
          {
            extensions: [".css"],
          },
        ],
      ],
    },
  ],

4. Replace content in blitz.config.js with the following

const { sessionMiddleware, simpleRolesIsAuthorized } = require("blitz")
const withTM = require("next-transpile-modules")(["@fullcalendar"])

module.exports = withTM({
  middleware: [
    sessionMiddleware({
      isAuthorized: simpleRolesIsAuthorized,
    }),
  ],
})

5. Add the following snippet to any page

        <FullCalendar
          plugins={[dayGridPlugin]}
          initialView="dayGridMonth"
        />

Run blitz -v and paste the output here:

macOS Big Sur | darwin-x64 | Node: v14.15.4

blitz: 0.34.3 (global)
blitz: 0.34.3 (local)

  Package manager: yarn 
  System:
    OS: macOS 11.2.3
    CPU: (4) x64 Intel(R) Core(TM) i5-5250U CPU @ 1.60GHz
    Memory: 33.90 MB / 4.00 GB
    Shell: 3.1.2 - /usr/local/bin/fish
  Binaries:
    Node: 14.15.4 - ~/.local/share/nvm/v14.15.4/bin/node
    Yarn: 1.22.10 - /usr/local/bin/yarn
    npm: 7.0.15 - /usr/local/bin/npm
    Watchman: Not Found
  npmPackages:
    @prisma/client: ~2.20 => 2.20.1 
    blitz: 0.34.3 => 0.34.3 
    prisma: ~2.20 => 2.20.1 
    react: 0.0.0-experimental-6a589ad71 => 0.0.0-experimental-6a589ad71 
    react-dom: 0.0.0-experimental-6a589ad71 => 0.0.0-experimental-6a589ad71 
    typescript: ~4.2 => 4.2.4 

Please include below any other applicable logs and screenshots that show your problem:

No response

[Jaxenormus]

Minimal reproduction here

[flybayer]

Thanks @CalebDelbridge, not sure what the issue is. This is ready for someone to work on.

[markhughes]

@CalebDelbridge your repo is gone now, is this still an issue?

[Jaxenormus]

Yes, I would assume this is still an issue, but due to that, I am no longer using Blitz, so it's not an issue affecting me

[dangreaves]

I can help with this one, as spent some time implementing FullCalendar with Next.js and Blitz!

The reason for the error is that the example which FullCalendar provides is using [email protected]. This version of next-transpile-modules used a regex method of targeting packages, so if you had @fullcalendar/common, @fullcalendar/react etc, the following would target them all fine.

const withTM = require("next-transpile-modules")(["@fullcalendar"])

However, since then, [email protected] was released, which dropped support for the regex method, instead requiring you to explicitly list all the packages you want it to target.

const withTM = require("next-transpile-modules")([
  "@fullcalendar/common",
  "@fullcalendar/react",
  "@fullcalendar/daygrid",
  "@fullcalendar/timegrid",
])

The FullCalendar example is just out of date, and needs to be updated to match the new version of next-transpile-modules.

@flybayer you can close this, as it's unrelated to Blitz 👍

[dangreaves]

I looked into updating the FullCalendar example with a PR, but looks like one is already open since March and has been ignored, so looks like they won't be updating it any time soon 👎

fullcalendar/fullcalendar-examples#19

[Jaxenormus]

Thanks for that info. I'll go ahead and close the issue