构建 typescript :[!]错误:意外的令牌(注意,您需要插件来导入非JavaScript的文件)

0g0grzrc  于 2023-03-28  发布在  Java
关注(0)|答案(5)|浏览(261)

我在lerna managed monorepo中创建带有汇总的打印脚本包时遇到了问题。
Error

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'

错误指向“导出类型”标记,这很好……令人困惑,为什么typescript不理解自己的构造,我不确定。
通过克隆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-headerHeader构建得很好,这取决于mokui-baseComponentHeader工厂在index.ts内部使用,并且没有错误,按预期工作并提供定义的行为。
我的第一React是选择退出cjs版本,因为这是两个版本(build:packages和build:dev)之间的主要区别,但这并没有产生任何差异,所以我猜留下了@organization/package分辨率问题,我不确定......不像我知道从哪里去,如果是这样的话。删除component.ts源代码中export type Component =...处的export可以消 debugging 误,但当然这会在mokui-headerHeaderComponent中产生新的错误,抱怨Component is a value but used as type,因为......不再有Component类型导出可以使用。
所以,是的,如果你有任何想法,我应该从这里去或确切地知道我应该如何去建设typescript包,这取决于其他兄弟之一,请分享他们。
我很抱歉,如果我来了粗鲁,但请不要建议我选择退出自定义构建和使用预配置样板或类似的东西。
先谢了!

bnlyeluc

bnlyeluc1#

如果有人遇到同样的问题,下面我提供解决方案:
当一个人试图在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;
1bqhqjot

1bqhqjot2#

我也有同样的错误消息,也使用lerna
对我来说,typescript更新到4.2.3版本就成功了。
我在an issue on the rollup/plugins repo中找到了解决方案。

vpfxa7rd

vpfxa7rd3#

我有错误,因为我依赖于Webstorm自动导入🤦‍♂️。
我有一个主项目,它从一个npm mono-repo导入了两个库A和B。
我在B中开发了一个更改,并在A中自动导入。
而不是将其解析为:

import {myNewFunction} from '@org/B';

Webstorm将其导入为:

import {myNewFunction} from '@org/B/src';

这对于库的构建和测试都很好,但是,当我最终在我的主项目中本地使用库时,我也遇到了OP的错误。
手动更正导入-删除/src-修复了该问题。

xj3cbfub

xj3cbfub4#

我也有这个问题,我的解决方案是使用@rollup/plugin-sucraseacorn-jsx

import sucrase from '@rollup/plugin-sucrase';

  export default [
    ...

    sucrase({
        exclude: ['node_modules/**'],
        transforms: ['typescript', 'jsx'],
      }),
  ]
41zrol4v

41zrol4v5#

清除(手动删除)*.d.ts文件,由以前的汇总创建将解决这个问题.如果你有dist文件夹(文件夹中的汇总文件将被创建),清除它.这为我解决了问题.

相关问题