antvis / antvis/Graphin

Support Next.js

Open
#250 5 comments 7 reactions 0 assignees View on GitHub
Typing Error
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.

[![Image from Gyazo](https://i.gyazo.com/67090d06441b620bb746fb1f9a75a5d3.png)](https://gyazo.com/67090d06441b620bb746fb1f9a75a5d3)

Contributor guide

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.