Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Next.js: upgrade next-transpile-modules #19

Open
wants to merge 6 commits into
base: main
Choose a base branch
from

Conversation

bjrn
Copy link

@bjrn bjrn commented Mar 14, 2021

Upgrading next-transpile-modules from 4.1.0 to 6.3.0 broke this workaround. Here's an attempt to fix it

  • Babel config needs 'next/babel' preset instead of '@babel/preset-react'
  • Replaced babel-plugin-transform-require-ignore with babel-plugin-transform-import-ignore as the compiled @fullcalendar modules seems to use import main.css;, and not require.
  • in next.config.js the new version of next-transpile-modules requires us to specify all paths to the modules (just @fullcalendar like this solution used to have doesn't seem to work anymore)
  • Next.js 10+ warns against not using named default exports, so fixed that

Regarding the removal of babel-plugin-transform-import-ignore, it doesn't seem to do any harm leaving it in there, but for this purpose, I found it necessary to use babel-plugin-transform-import-ignore instead. Now I'm no wizard on neither Babel nor Webpack, but the latter seemed sufficient in this example.

@dangreaves
Copy link

Have come across a few developers getting pretty stumped by this out of date example, so would be great to get this merged to prevent further confusion.

@bjrn
Copy link
Author

bjrn commented Jun 11, 2021

I can take a look at bringing the PR into a mergeable state again if it is relevant. @arshaw?

@robertjcolley
Copy link

robertjcolley commented Jun 15, 2021

Thank you for this! I'll echo what @dangreaves said - this is something that confused me. next-transpile-modules is 3 major versions out of date in this example.

const withTM = require('next-transpile-modules')([
'@fullcalendar'
// Need to specify all @fullcalendar modules separately
// with next-transpile-modules^6.x …

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

As mentioned above this PR is good but I'd refer folks to the next-transpile-modules compatibility table as well.

@chinanderm
Copy link

Thanks @bjrn for this PR and updated examples! Helped me get this library up and running in my project. It is quite the shame that maintainers haven't merged this in.

@kbrown-blend360
Copy link

Thank you so much for this. I don't know why the owner hasn't committed. The example out of the box doesn't work.

@yichunsung
Copy link

your next.config.js is helpful. thx.

@cw1997
Copy link

cw1997 commented Oct 10, 2021

Thank you very much! Your update is helpful!!!

@NanyThery
Copy link

Thank you I wasn't able to make it work with the current info in the readme, and this worked. Thank you for sharing

@algren123
Copy link

Thank you a lot for this! This cleared it up and it works now - wish they'd merge this

@tamnguyenledev
Copy link

thanks for this, very helpful

@HandyHat
Copy link

HandyHat commented Jul 6, 2022

I'm not quite sure when this change occurred, but as of FullCalendar 5.11.0 and Next.js 12.1.6, using Babel is no longer necessary. SWC, Next.js' new web compiler, does not require a separate plugin to ignore the importing of the CSS files.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.