next.js Turborepo中的客户端组件导致错误

olhwl3o2 于 2023-11-18 发布在其他

关注(0)|答案(1)|浏览(130)

我试图在一个单独的internal ui package中构建一个带有react客户端组件的Turborepo。
不幸的是，tsup删除了ui包顶部的use client指令，这是nextjs所需要的。
模块级指令在捆绑时会导致错误，“dist/Test.mjs”中的“use client”被忽略。
最小复制沙箱，显示错误：https://shorturl.at/noxzI
有什么建议可以解决这个问题吗？

编辑1：

新URL：https://rb.gy/gubwk

编辑2：

上面的最小repo会产生以下错误消息：
TypeError：a.default. codeContext不是函数
根据其他SO答案，这可能是因为缺少use client。如果您将use client添加到dist文件夹中的已构建Test块，则该错误将消失，并由以下错误替换：
TypeError：styled_components__WEBPACK_IMPORTED_MODULE_2__.div不是函数

编辑3：

顺便说一下，无论组件是js文件（例如Test）还是tsx文件（例如Card），都会发生错误。

next.js

来源：https://stackoverflow.com/questions/76525345/client-components-in-turborepo-cause-error

1条答案

按热度按时间

0tdrvxhp1#

1.删除ui包中的dist文件夹。
1.使用以下命令编辑您的/packages/ui/tsup. js. js文件：

import { defineConfig, Options } from "tsup";
    
    export default defineConfig((options: Options) => ({
      banner: {
        js: `"use client"`,
      },
      // treeshake: true,
      splitting: true,
      entry: ["./**/*.tsx"],
      format: ["esm"],
      dts: true,
      minify: true,
      clean: true,
      external: ["react"],
      ...options,
    }));

字符串
注意banner选项告诉tsup不要删除**“use client”**，我注意到treeshake删除了“太多”，所以你可以删除/删除该选项。使用以下配置，我能够构建项目而没有任何错误。
1.再次运行构建脚本！

赞(0）回复(0）举报 2023-11-18

我来回答

next.js Turborepo中的客户端组件导致错误

1条答案

相关问题

热门标签

最新问答