I'm trying to use some enum from a library I made in another project. The library is made with Vue and typescript, bundled with rollup, the project is made Synfony, and the front with Vue and typescript too, builded with Webpack Encore.
The library is a dependency from my project, so I try to import the enum like this:
import { MyEnum } from 'myLibrary/src/enum/MyEnum';
And the enum looks like this
// node_modules/myLibrary/src/enum/MyEnum.ts
export enum MyEnum {
One = 'one',
Two = 'two',
Three = 'three'
}
But when I build I got this error (with Symfony's 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.
I obviously already added enableTypeScriptLoader() in webpack.config.js, and I don't know how to solve this.
If I create the same enum file into my project and import it, it works, but I have to keep it in my library and I don't want to duplicate code. And I import interfaces from the same library the same way, and it works fine.
I tried things that don't work :
export const enum kinda work, but I get the 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. error, and I have to redeclare the enum in another object to use it in my template :/export declare enum but still get the Add Encore.enableTypeScriptLoader() errorAny idea how to solve this?
I have another error message in my browser that add some information:
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'
I also test to import the same enum from the same library in a fresh project made with Vue Cli, and I have no error. I'm pretty sure the issue come from Webpack Encore.
Solution found, some details in this Webpack Encore's issue : https://github.com/symfony/webpack-encore/issues/1060
And here's the fix :
allowTsInNodeModules in enableTypeScriptLoader options:Encore.enableTypeScriptLoader((options) => {
options.allowTsInNodeModules = true;
});
exclude option that excludes node_modules, and exclude node_modules but my own modules (where @myCompany is the folder in node_modules where my own modules are.Encore.configureLoaderRule('typescript', (rule) => {
rule.exclude = /node_modules\/(?!@myCompany)/;
});
This generates a warning when compiling, but for now it's the only way I found to fix this.