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

olhwl3o2  于 12个月前  发布在  其他
关注(0)|答案(1)|浏览(128)

我试图在一个单独的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),都会发生错误。

0tdrvxhp

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.再次运行构建脚本!

相关问题