我有一个NextJS应用程序,其中包含一个库,我想确保没有在客户端导入。我用import 'server-only'
这样做,但我也想将此文件用于本地脚本。然而,当我运行tsx scripts/test.ts
时,我得到服务器组件错误。
如何确保库未导入到客户端上?
我的文件夹结构是:
- app
- ...
- lib
- server-only-library.ts
- scripts
- local-script.ts
字符串
档案:
# server-only-library.ts
import 'server-only'
...
# local-script.ts
import Library from 'lib/server-only-library'
...
的数据
试验项目:
$ tsx scripts/local-script.ts
/Users/michael/my-app/node_modules/server-only/index.js:1
throw new Error(
^
Error: This module cannot be imported from a Client Component module. It should only be used from a Server Component.
型
我尝试使用webpackMap它,但错误只会在运行时出现在客户端,而不会在构建时出现。
# next.config.js
const nextConfig = {
// doesn't work :( the import is mapped, but only throws in runtime
webpack: (config, { isServer, webpack }) => {
if (!isServer) {
config.resolve.alias = {
...config.resolve.alias,
'@secret/library': 'next/../server-only',
}
}
return config
},
}
型
1条答案
按热度按时间lokaqttq1#
最近我在Next.js项目中遇到了类似的挑战,需要将某些导入限制为服务器组件和CLI脚本。为了解决这个问题,我开发了一个名为
server-cli-only
的NPM包。与server-only
不同,允许在Next.js服务器组件和CLI环境中导入。此解决方案应允许您在服务器组件中使用server-only-library.ts
,在CLI中使用scripts/local-script.ts
,而无需导入错误.安装程序
首先,通过npm安装软件包:
字符串
用法
在Next.js服务器组件中,将此导入放在仅服务器库的顶部。ts:
型
对于像
scripts/local-script.ts
这样的本地脚本,请将RUNNING_IN_CLI
环境变量设置为true
。这会向server-cli-only
发出信号,以允许导入,而不引发错误:型
更多信息
**编辑:**内部工作(可选)
server-cli-only
软件包专为React Server组件和CLI环境量身定制,可防止将其包含在客户端组件中。***React服务器环境:**在
"react-server"
环境指定的环境中使用空模块(./empty.js
)。有关详细信息,请参阅RFC #227。***CLI环境:**在Node.js上下文中(
"default"
导出环境中的"node"
),它会检查RUNNING_IN_CLI
是否设置为"true"
。如果没有,它会引发错误,指导正确的CLI用法。***客户端元件环境:**在浏览器环境中(
"default"
汇出环境中的"browser"
),./index.js
会掷回错误,以永远防止在客户端转译中使用。此配置尝试与RFC #227的React Server Module Conventions中的指导方针保持一致,但略微扩展了这些指导方针,以便在CLI上启用脚本使用。