從 node_modules 導入枚舉時，webpack encore 失敗

Question

我正在嘗試使用我在另一個項目中創建的庫中的一些枚舉。 該庫由 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。

Answer 1

找到解決方案，此 Webpack Encore 問題中的一些詳細信息： https ://github.com/symfony/webpack-encore/issues/1060

這是修復：

• 1/ 在enableTypeScriptLoader選項中添加allowTsInNodeModules ：

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

• 2/ 更新規則以更改exclude選項，並排除 node_modules 但我自己的模塊（其中@myCompany是我自己的模塊所在的 node_modules 中的文件夾。

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

這會在編譯時生成警告，但目前這是我發現解決此問題的唯一方法。