Compilation error when importing enum from node modules in typescript

See original GitHub issue

Hi,

I’m trying to use some enum from a library I made in a Symfony project. The library is made with Vue and typescript, bundled with rollup.

The project is made Symfony 4.2, and the front with Vue 2 and typescript, Webpack Encore version is 1.6.1

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 compile I got this error in console:

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.

And this error in browser:

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 obviously already added enableTypeScriptLoader() in webpack.config.js.

If I create the same enum file into my project and import it, it works. And if I import interfaces from the same library, it works too.

I test my library in another project with VueCli and I got no error, so I’m pretty sure it comes from Webpack Encore.

Any idea how to solve this?

Thanks

Issue Analytics

  • State:closed
  • Created 2 years ago
  • Comments:5 (1 by maintainers)

github_iconTop GitHub Comments

2reactions
Pochwarcommented, Jan 20, 2022

Hello, I finally find how to fix this.

First, it wasn’t only an enum import issue, because I had the same error message when importing some Classes from .ts files in the library.

@Kocal 's solution was the first step, I added allowTsInNodeModules option in enableTypeScriptLoader’s options

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

But this issue bring some info : https://github.com/symfony/webpack-encore/issues/186 : node_modules are excluded for this rule.

So, instead of deleting rule.exclude as mentioned in the issue, I modified the “exclude” regex to exclude node_modules but my own modules (that are in a ‘@myCompany’ folder) like this

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

and so, it works fine!

0reactions
Pochwarcommented, Nov 25, 2021

Hi @floviolleau

I always get the same error. Do you declare the module in a .d.ts file in the library?

Do you have a node_modules/whitelisted_module.ts file or is it a typo? (=> "include": ["node_modules/whitelisted_module"])

Thanks!

Read more comments on GitHub >

github_iconTop Results From Across the Web

webpack encore fails when importing enum from node_modules
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.
Read more >
Documentation - Modules - TypeScript
Modules import one another using a module loader. At runtime the module loader is responsible for locating and executing all dependencies of a...
Read more >
ts-node - npm
ts-node is a TypeScript execution engine and REPL for Node.js. It JIT transforms TypeScript into JavaScript, enabling you to directly execute ...
Read more >
TypeScript: Don't Export const enums - ncjamieson
If you are writing a library and you export a const enum , some developers will not be able to compile their applications...
Read more >
Features | Vite
Native ES imports do not support bare module imports like the following: js import { someMethod } from 'my-dep'. The above will throw...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found