search

xrutayisire / react-js-cron

A React cron editor built with antd
https://xrutayisire.github.io/react-js-cron/?path=/docs/reactjs-cron--demo
MIT License
238 stars 105 forks source link

Not working with Next.js #19

Closed lacymorrow closed 2 years ago

lacymorrow commented 2 years ago

Describe the bug

error - ./node_modules/react-js-cron/dist/esm/styles.css
Error: ENOENT: no such file or directory, open '/Users/tmorrow/repo/iot/node_modules/react-js-cron/dist/esm/styles.css'

To Reproduce Try to use this library in a nextjs project

xrutayisire commented 2 years ago

Hello,

Thanks for submitting this bug. I need more information If you want me to take a look at this bug.

Version of react-js-cron, of antd, of Next JS…

Please provide a repository with the problem.

lacymorrow commented 2 years ago

Repo is here: https://github.com/lacymorrow/next-cron

Run yarn and yarn dev and visit http://localhost:3000 to reproduce the issue, error is in the terminal

I just used yarn create next-app --typescript to generate a NextJS project, then yarn add react-js-cron antd to add dependencies, then added the <Cron> component to the index.tsx page.

The error is as follows:

error - ./node_modules/react-js-cron/dist/esm/styles.css
Global CSS cannot be imported from within node_modules.
Read more: https://nextjs.org/docs/messages/css-npm
Location: node_modules/react-js-cron/dist/esm/Cron.js

Latest versions of react-js-cron, antd, and next

lacymorrow commented 2 years ago

Reach out to the maintainer and ask for them to publish a compiled version of their dependency. Compiled dependencies do not have references to CSS files, or any other files that require bundler-specific integrations. The dependency should also provide instructions about what CSS needs to be imported by you, in your application.

xrutayisire commented 2 years ago

Hum, thank you for this information! :)

I knew it was going to be this problem... The issue is more on Next JS side on this one, see: https://github.com/vercel/next.js/issues/19936 and RFC https://github.com/vercel/next.js/discussions/27953.

What you're asking is a breaking change of this library I guess, right? Because current users would have to manually import css file to make this package work.

Can't you use https://www.npmjs.com/package/next-global-css until nextjs fix their way to handle css?

I'm not against a breaking change on this library but not really when it's to fix a problem from another lib. :/

Do you have some arguments why it could be better to do like this anyway even if nextjs handle this in the future? What I want to know is, will it be just for nextjs until they change their code, or it is useful even after?

ademilter commented 2 years ago

the problem still continues. if install css externally the problem will be solved

xrutayisire commented 2 years ago

Hello !

Arf...

I hate that NextJS don't allow this... They will change this management in the future, but I understand that you may want to use this package now.

I'm on holidays, so I don't have the time to handle this right now, but I will take a look at this issue when I come back.

It's just that it will be a breaking change and all users will need to manually import the file in their code, just so NextJS can handle it...

Rullencastro commented 2 years ago

the problem still continues. if install css externally the problem will be solved

Can you explain how you did that? I'm triying to use this library in my NextJS app, but have the same problem with the CSS imports.

xrutayisire commented 2 years ago

Hello,

Did it! 🥳

I removed the internal import of a CSS file inside the component. You should now be able to use this package without any problem with Next.js.

Please let me know if there are any other issues.

You can install the version 2.0.0 and don't forget to import manually the styles file, as mentioned in the README