ketcher: Can't use Ketcher on Next JS application
When I tried to load Ketcher on a Next JS application I get the message bellow:
../node_modules/draft-js/dist/Draft.css Global CSS cannot be imported from within node_modules. Read more: https://nextjs.org/docs/messages/css-npm Location: ../node_modules/ketcher-react/dist/index.modern.js
I think this is related to :
https://github.com/vercel/next.js/issues/19936
Could you provide a way to make this awesome library work with nextjs?
Desktop (please complete the following information):
- OS: [e.g. iOS13.1]
- Browser [chrome]
Ketcher version [e.g. v2.7.2].
About this issue
- Original URL
- State: closed
- Created a year ago
- Reactions: 3
- Comments: 15
This is caused by NextJS, so we’re gonna close it. If you believe that this is Ketcher’s problem, please reopen the issue and give more information, thx!
All I’ve done to make this work for me I create a component that uses
import { Editor } from "ketcher-react";. Then to use this component, I do a dynamic import (to avoid SSR differences). The only other thing that could be in play here is that I use pnpm? There isn’t really anything in my nextjs config that I can see having an affect here.@yuleicul Hello there! You’re absolutely right, currently, the only solution I’m aware of is to transfer this part of my application to the app directory. However, it’s unfortunate that I’m dependent on several other packages to support the app directory. I anticipate that this process will take several months. As of now, I’m not utilizing ketcher in my application, but I remain hopeful that someday I’ll be able to incorporate it.