Support Next.js
- Dominant language
- TypeScript
- Stars
- 1.1k
- Forks
- 275
- PR merge metrics
- No merged PRs in 30d
Description
**Is your feature request related to a problem? Please describe.**
I want to use this library in my Next.js project,
but it failed because error below:
```
./node_modules/@antv/graphin/es/index.css
Global CSS cannot be imported from within node_modules.
Read more: https://nextjs.org/docs/messages/css-npm
Location: node_modules/@antv/graphin/es/Graphin.js
```
**Reproduce step**
You can reproduce this issue by following step
1. create-next-app and install @antv/graphin
```
npx create-next-app --example with-typescript nextjs-graphin
cd nextjs-graphin
npm i
npm i @antv/graphin --force
```
2. Edit `./pages/index.tsx` as follow
```
import Layout from '../components/Layout'
import Graphin, { Utils } from '@antv/graphin';
const IndexPage = () => {
const data = Utils.mock(10).graphin();
return (
Hello Next.js with Graphin 👋
)
}
export default IndexPage
```
3. Launch Next.js
```
npm run dev
```
4. Open Next.js dev server
http://localhost:3000/
**Describe the solution you'd like**
https://nextjs.org/docs/messages/css-npm
Next.js document says below:
> 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.
So I think npm modules should not import/require Global CSS.
**Describe alternatives you've considered**
If you know suitable Jamstack framework using Graphin more than Next.js, Please tell me.
[](https://gyazo.com/67090d06441b620bb746fb1f9a75a5d3)
Contributor guide
Research direction
Reproduce the failure using the create-next-app steps and the example in pages/index.tsx. Inspect the published @antv/graphin/es/Graphin.js and index.css references, then verify that the Next.js development server starts without the global-CSS error and renders the Graphin example.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- next.js, react, typescript
- Domain
- frontend
- Issue type
- Feature
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 38/100