从 node_modules 导入枚举时，webpack encore 失败答案

【问题标题】：webpack encore fails when importing enum from node_modules从 node_modules 导入枚举时，webpack encore 失败
【发布时间】：2021-12-27 18:24:33
【问题描述】：

我正在尝试使用我在另一个项目中创建的库中的一些枚举。库是用 Vue 和 typescript 做的，捆绑 rollup，项目是 Synfony，前端也是用 Vue 和 typescript，用 Webpack Encore 构建的。

该库是我项目的依赖项，因此我尝试像这样导入枚举： import { MyEnum } from 'myLibrary/src/enum/MyEnum';

枚举看起来像这样

// node_modules/myLibrary/src/enum/MyEnum.ts

export enum MyEnum {
  One = 'one',
  Two = 'two',
  Three = 'three'
}

但是当我构建时我得到了这个错误（使用 Symfony 的 Webpack Encore）：

 ERROR  Failed to compile with 1 errors                                                       4:37:05 PM

Error loading ./node_modules/myLibrary/src/enum/MyEnum.ts

 FIX  To process TypeScript files:
        1. Add Encore.enableTypeScriptLoader() to your webpack.config.js file.

我显然已经在 webpack.config.js 中添加了enableTypeScriptLoader()，我不知道如何解决这个问题。

如果我在我的项目中创建相同的枚举文件并导入它，它可以工作，但我必须将它保存在我的库中并且我不想重复代码。而且我以同样的方式从同一个库中导入接口，效果很好。

我尝试了一些不起作用的东西：

export const enum 有点工作，但我收到 TS2475: 'const' enums can only be used in property or index access expressions or the right hand side of an import declaration or export assignment or type query. 错误，我必须在另一个对象中重新声明枚举才能在我的模板中使用它：/
export declare enum 但仍然收到 Add Encore.enableTypeScriptLoader() 错误

知道如何解决这个问题吗？

编辑

我的浏览器中有另一条错误消息，其中添加了一些信息：

Module parse failed: Unexpected token (4:7)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> export enum MyEnum {
|   One = 'one',
|   Two = 'two'

我还测试在使用 Vue Cli 制作的新项目中从同一个库中导入相同的枚举，我没有错误。我很确定问题来自 Webpack Encore。

【问题讨论】：

标签： javascript typescript vue.js enums webpack-encore

【解决方案1】：

已找到解决方案，此 Webpack Encore 问题中的一些详细信息：https://github.com/symfony/webpack-encore/issues/1060

这是解决方法：

1/在enableTypeScriptLoader选项中添加allowTsInNodeModules：

Encore.enableTypeScriptLoader((options) => {
  options.allowTsInNodeModules = true;
});

2/ 更新规则以更改排除 node_modules 的 exclude 选项，并排除 node_modules 但我自己的模块（其中@myCompany 是我自己的模块所在的 node_modules 中的文件夹。

Encore.configureLoaderRule('typescript', (rule) => {
  rule.exclude = /node_modules\/(?!@myCompany)/;
});

这会在编译时生成警告，但目前这是我发现的唯一解决方法。

【讨论】：