Building Typescript: [!] Error: Unexpected token (Note that you need plugins to import files that are not 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'

错误指向 "export type" 标记，这很好......令人困惑，打字稿为什么不理解自己的构造我不确定。

可以通过克隆 repository 和运行 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 上运行。它与问题相关，因为 mokui-header Header 构建得很好取决于 mokui-base Component，Header 工厂在 index.ts 中使用并且没有错误，按预期工作并提供定义的行为。

我的第一直觉是选择退出 cjs 构建，因为这是两个构建（build:packages 和 build:dev）之间的主要区别，但这没有任何区别，所以剩下的@organization/package 我猜是分辨率问题，我不确定...如果是这样的话我不知道从那里去哪里。在 component.ts 源中删除 export type Component =... 处的 export 可以消除错误，但当然会在 mokui-header HeaderComponent 中产生新的错误，抱怨 Component is a value but used as type，因为...没有 Component 类型的导出可以再使用了。

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

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

提前致谢！

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;

Answer 2

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

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

我在 an issue on the rollup/plugins repo 中找到了解决方案。

Answer 3

清除（手动删除）由先前汇总创建的 *.d.ts 文件将解决问题。如果您有 dist 文件夹（将在其中创建汇总文件的文件夹），请清除它。这为我解决了问题。

Building Typescript: [!] Error: Unexpected token (Note that you need plugins to import files that are not JavaScript)

Building Typescript: [!] Error: Unexpected token (Note that you need plugins to import files that are not JavaScript)

javascript

typescript

rollupjs

lerna

monorepo