Building Typescript: \[!\] Error: Unexpected token （请注意，您需要插件才能导入非 JavaScript 文件）

Question

我在 lerna 管理的 monorepo 中使用汇总构建打字稿包时遇到了问题。

错误：

 lerna ERR! rollup --config ../../rollup.config.js stderr:
loaded ../../rollup.config.js with warnings
(!) Unused external imports
terser imported from external module 'rollup-plugin-terser' but never used

index.ts → dist/esm...
[!] Error: Unexpected token (Note that you need plugins to import files that are not JavaScript)
../mokui-base/component.ts (3:7)
1: const root = Symbol("root");
2:
3: export type Component<T extends object = {}> = T & {
          ^
4:         [root]: Element;
5:         attach(element: Element): Component<T>;
Error: Unexpected token (Note that you need plugins to import files that are not JavaScript)
    at error (/****/****/code/js/mokui/node_modules/rollup/dist/rollup.js:5351:30)
    at Module.error (/****/****/code/js/mokui/node_modules/rollup/dist/rollup.js:9643:9)
    at tryParse (/****/****/code/js/mokui/node_modules/rollup/dist/rollup.js:9552:16)
    at Module.setSource (/****/****/code/js/mokui/node_modules/rollup/dist/rollup.js:9868:33)
    at Promise.resolve.catch.then.then.then (/****/****/code/js/mokui/node_modules/rollup/dist/rollup.js:12148:20)

lerna ERR! rollup --config ../../rollup.config.js exited 1 in '@moki.codes/mokui-header'

错误指向“导出类型”标记，这很好……令人困惑，我不确定打字稿为什么不理解自己的构造。

可以通过克隆 存储库 并运行 yarn build:packages @master 分支来重现错误。

有趣的是 mokui-base 定义 Component 的包本身构建得很好，只有当一个人依赖它时才会出现上面的错误，就像我在 mokui-header 可通过添加重现

if (process.env.LERNA_PACKAGE_NAME === "@moki.codes/mokui-header")
    process.exit(0);

在 rollup.config.js 的顶部并运行 yarn build:packages 。

我还有另一个构建目标“dev”，可以尝试使用 yarn build:dev 从 stories/index.ts 构建，并在 localhost:3000 服务。 It is relevant to the question because there, mokui-header Header builds just fine depending on the mokui-base Component , Header 工厂在 index.ts 中使用，没有错误，按预期工作并提供定义的行为。

我的第一直觉是选择退出 cjs 构建，因为那是两个构建（build:packages 和 build:dev）之间的主要区别，但这没有任何区别，所以剩下 @organization/package 我猜是分辨率问题，我不确定…如果是这样的话我不知道从那里去哪里。 Removing export at export type Component =... inside component.ts source gets rid of the error, but of course that spawns the new error inside the mokui-header HeaderComponent 抱怨 Component is a value but used as type ，因为嗯……没有 Component 类型的出口消费了。

所以是的，如果你有任何想法我应该从这里去哪里或者确切地知道我应该如何构建 typescript 包，这取决于另一个兄弟姐妹，请分享它们。

如果我表现得粗鲁，我很抱歉，但请不要建议我选择退出自定义构建并使用预配置样板或类似的东西。

提前致谢！

原文由 Kirill Morozov 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

如果有人遇到同样的问题，下面我提供解决方案：

当人们尝试在 monorepo 中构建每个单独的包时，rollup 会尝试解析 @organization/package-name 并将其包含在构建中。你不想这样，所以为了避免在构建我正在解析的每个包时避免它 package.json ，提取 dependencies 字段的键，然后在 callback 中检查它们 --- 可以提供内部汇总配置的 external 字段。这将产生预期的结果。

 import json from "rollup-plugin-json";

const pkg = process.env.LERNA_PACKAGE_NAME &&
          require(`${process.env.LERNA_PACKAGE_NAME}/package.json`);

const dependencies = ({ dependencies }) => Object.keys(dependencies || {});

const pkgdependencies = dependencies(pkg);

/* exported rollup configuration */
const config = {
    /* your config goes here... */
    /* id is the source name if list of dependencies includes
     * id source name, then mark it as external,
     */
    external: id => pkgdependencies.includes(id)
};

export default config;

原文由 Kirill Morozov 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

我有同样的错误消息，也使用 lerna 。

对我来说 ，将 typescript 更新到版本 4.2.3 就成功了。

我 在 rollup/plugins repo 的一个问题 中找到了解决方案。

原文由 simlmx 发布，翻译遵循 CC BY-SA 4.0 许可协议