Next.js项目使用react-json-editor-ui遇Global CSS导入错误求助

方法1：手动接管组件CSS导入 #

1. 安装组件依赖（未安装时执行）：

npm install react-json-editor-ui

2. 复制组件自带的CSS文件到项目本地目录，比如将node_modules/react-json-editor-ui/dist/react-json-editor-ui.css复制到项目的styles/文件夹下。
3. 在Next.js的_app.js或_app.tsx中导入这份本地CSS：

import '../styles/react-json-editor-ui.css'

4. 若组件支持禁用默认CSS配置，使用组件时添加对应参数：

import JsonEditor from 'react-json-editor-ui'

function MyComponent() {
  return <JsonEditor disableDefaultCss={true} />
}

注：若组件无此配置项，跳过第4步，确保仅导入本地复制的CSS即可。

方法2：用next-transpile-modules转译组件 #

1. 安装依赖：

npm install next-transpile-modules --save-dev

2. 在项目根目录的next.config.js中配置转译规则：

const withTM = require('next-transpile-modules')(['react-json-editor-ui'])

module.exports = withTM({
  // 你的其他Next.js配置项
})

该工具会将指定的node_modules模块转译为Next.js可处理的格式，允许其中的CSS导入逻辑正常运行。

方法3：动态导入组件并禁用SSR #

创建组件包装文件JsonEditorWrapper.js，通过动态导入隔离服务器端的CSS加载：

import dynamic from 'next/dynamic'

const JsonEditor = dynamic(() => import('react-json-editor-ui'), {
  ssr: false,
  loading: () => <div>加载编辑器中...</div>
})

export default JsonEditor

之后在页面中导入该包装组件使用，CSS仅在客户端加载，绕过Next.js服务器端的全局CSS限制。

内容的提问来源于stack exchange，提问作者kashan ilyas