Next.js: upgrade next-transpile-modules

next/README.md

@@ -1,9 +1,7 @@
-
 # FullCalendar Next.js Example
 
 Getting FullCalendar to work with [Next.js](https://nextjs.org/) requires a bit of configuration. See below.
 
-
 ## Installation
 
 ```bash
@@ -12,7 +10,6 @@ cd fullcalendar-example-projects/next
 npm install
 ```
 
-
 ## Build Commands
 
 ```
@@ -22,13 +19,11 @@ npm run start # run the production build
 npm run clean # clear all built files
 ```
 
-
 ## Workarounds Explained
 
 1. Install [next-transpile-modules](https://www.npmjs.com/package/next-transpile-modules) to process FullCalendar's ES modules. See [next.config.js](next.config.js). If you don't like this, [vote to give Next ESM support for third-party packages](https://github.com/vercel/next.js/issues/706).
-2. Configure Babel to ignore imports of CSS files, which FullCalendar uses to include styles. Uses the [babel-plugin-transform-require-ignore](https://www.npmjs.com/package/babel-plugin-transform-require-ignore) plugin. See [babel.config.js](babel.config.js)
-3. In [_app.jsx](pages/_app.jsx), include FullCalendar's global stylesheets manually...
-
+2. Configure Babel to ignore imports of CSS files, which FullCalendar uses to include styles. Uses the [babel-plugin-transform-import-ignore](https://www.npmjs.com/package/babel-plugin-transform-import-ignore) plugin. See [babel.config.js](babel.config.js)
+3. In [\_app.jsx](pages/_app.jsx), include FullCalendar's global stylesheets manually...
 
 ## FullCalendar Stylesheets
 

next/babel.config.js

@@ -1,23 +1,16 @@
-
 module.exports = {
-
-  presets: [
-    '@babel/preset-react' // necessary for all .jsx files
-  ],
+  presets: ['next/babel'],
 
   // 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']
-      }]
-    ]
-  }]
-
+  overrides: [
+    {
+      include: ['./node_modules'],
+      plugins: [
+        ['babel-plugin-transform-import-ignore', { patterns: ['.css'] }]
+      ]
+    }
+  ]
 }

next/next.config.js

@@ -1,8 +1,14 @@
-
 // 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'
+  // Need to specify all @fullcalendar modules separately
+  // with next-transpile-modules^6.x …
+  '@fullcalendar/core',
+  '@fullcalendar/react',
+  '@fullcalendar/common',
+  '@fullcalendar/daygrid',
+  '@fullcalendar/timegrid'
 ])
 
 module.exports = withTM({

next/package.json

@@ -13,15 +13,17 @@
   "dependencies": {
     "@babel/core": "^7.12.3",
     "@babel/preset-react": "^7.10.4",
-    "@fullcalendar/common": "^5.4.0",
-    "@fullcalendar/daygrid": "^5.4.0",
-    "@fullcalendar/interaction": "^5.4.0",
-    "@fullcalendar/react": "^5.4.0",
-    "@fullcalendar/timegrid": "^5.4.0",
-    "babel-plugin-transform-require-ignore": "^0.1.1",
-    "next": "^10.0.1",
-    "next-transpile-modules": "^4.1.0",
+    "@fullcalendar/core": "^5.5.1",
+    "@fullcalendar/daygrid": "^5.5.0",
+    "@fullcalendar/interaction": "^5.5.0",
+    "@fullcalendar/react": "^5.5.0",
+    "@fullcalendar/timegrid": "^5.5.1",
+    "next": "^10.0.8",
+    "next-transpile-modules": "^6.3.0",
     "react": "^17.0.1",
     "react-dom": "^17.0.1"
+  },
+  "devDependencies": {
+    "babel-plugin-transform-import-ignore": "^1.1.0"
   }
 }

next/pages/_app.jsx

@@ -1,5 +1,3 @@
-import React from 'react'
-
 import '@fullcalendar/common/main.css'
 import '@fullcalendar/daygrid/main.css'
 import '@fullcalendar/timegrid/main.css'

next/pages/index.jsx

@@ -1,16 +1,17 @@
-import React from 'react'
 import FullCalendar from '@fullcalendar/react'
 import interactionPlugin from '@fullcalendar/interaction'
 import timeGridPlugin from '@fullcalendar/timegrid'
 
-export default () => (
-  <FullCalendar
-    plugins={[interactionPlugin, timeGridPlugin]}
-    initialView='timeGridWeek'
-    nowIndicator={true}
-    editable={true}
-    initialEvents={[
-      { title: 'nice event', start: new Date() }
-    ]}
-  />
-)
+const Page = () => {
+  return (
+    <FullCalendar
+      plugins={[interactionPlugin, timeGridPlugin]}
+      initialView="timeGridWeek"
+      nowIndicator={true}
+      editable={true}
+      initialEvents={[{ title: 'nice event', start: new Date() }]}
+    />
+  )
+}
+
+export default Page