Skip to content

Nexjs & Error importing CSS files within node_modules #72

Description

@medkrimi

Description
Error importing CSS files within node_modules and compatibility with Nextjs app.

Reproduce

  1. Have a running Nextjs app.
  2. yarn add @dabeng/react-orgchart
  3. Add Organization chart to an empty page
//

import OrganizationChart from "@dabeng/react-orgchart"
import React from "react"

const DnDChart = () => {
  const ds = {
    id: "n1",
    name: "Lao Lao",
    title: "general manager",
    children: [
      {id: "n2", name: "Bo Miao", title: "department manager"},
      {
        id: "n3",
        name: "Su Miao",
        title: "department manager",
        children: [
          {id: "n4", name: "Tie Hua", title: "senior engineer"},
          {
            id: "n5",
            name: "Hei Hei",
            title: "senior engineer",
            children: [
              {id: "n6", name: "Dan Dan", title: "engineer"},
              {id: "n7", name: "Xiang Xiang", title: "engineer"}
            ]
          },
          {id: "n8", name: "Pang Pang", title: "senior engineer"}
        ]
      },
      {id: "n9", name: "Hong Miao", title: "department manager"},
      {
        id: "n10",
        name: "Chun Miao",
        title: "department manager",
        children: [{id: "n11", name: "Yue Yue", title: "senior engineer"}]
      }
    ]
  }

  return <OrganizationChart datasource={ds} draggable={true} />
}

export default DnDChart

Error
image

Cause
With Next.js importing CSS files within node_modules cannot be supported because we cannot know the correct behavior:

  • Should the file be consumed as Global CSS or CSS Modules?
  • If Global, in what order does the file need to be injected?
  • If Modules, what are the emitted class names? As-is, camel-case, snake case?
  • Etc.

More details: https://nextjs.org/docs/messages/css-npm

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions