Error message occurs when using Typescript with es2017 target, indicating a potential need for a loader despite successful project builds in es5

Question

Error message occurs when using Typescript with es2017 target, indicating a potential need for a loader despite successful project builds in es5

We are working on a typescript react 'main' project. In the package.json file, there is a dependency on another internal library that we utilize. The 'main' project builds successfully when both projects are set to target es5. However, changing to es2017 results in the following error:

You may need an appropriate loader to handle this file type, as currently no loaders are configured to process this file.

This error occurs for all files that declare enums in the dependent project.

Here is the tsconfig.json configuration for the main project:

{
  "compilerOptions": {
    "resolveJsonModule": true,
    "noImplicitAny": false,
    "module": "commonjs",
    "noEmitOnError": true,
    "removeComments": false,
    "sourceMap": true,
    "target": "es2017",
    "jsx": "react",
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "experimentalDecorators": true,
    "downlevelIteration": true,
    "types": ["node", "jest"],
    "baseUrl": "./src"
  },
  "exclude": ["node_modules"],
  "includes": ["./src"]
}

And here is the webpack.config.js settings:

// webpack configurations here...

This is the babel.config.json setup:

// babel configurations here...

The issue arises when trying to target es2017, and one solution was found by changing the package json to point to the local copy of the dependent repository ('models').

For more information, refer to the IMPORTANT UPDATE section above.

Additionally, be aware of the 2nd UPDATE regarding the preset-react setting in babel.config.json causing issues with enum declarations.

typescript webpack babeljs

Answer 1

Answer №1

I found the solution through 2 key discoveries. Firstly:

Upon examining the babel.config.json file, I noticed:

"@babel/preset-react"

This line instructed babel to "remove typescript types", as explained here. By removing it, the errors were resolved, but this meant that all types were eliminated (resulting in babel not being able to process JSX).

Realizing that the enum files are ambient, and that babel-loader, particularly preset-react, was unable to handle them (unlike tsc), was a breakthrough.

This realization led me to a helpful Stack Overflow question, where I learned that I needed to explicitly specify the location of the enum files for babel-loader by adding the following code snippet to my package.json:

  {
    test: /\.(ts|tsx)$/,
    include: path.resolve('./node_modules/@tplp/models/src/enumerations'),
    use: [
      {
        loader: 'babel-loader',
        options: {
          cacheDirectory: true,
        },
      },
    ]
  },

Answer 2

I found the solution through 2 key discoveries. Firstly:

Upon examining the babel.config.json file, I noticed:

"@babel/preset-react"

This line instructed babel to "remove typescript types", as explained here. By removing it, the errors were resolved, but this meant that all types were eliminated (resulting in babel not being able to process JSX).

Realizing that the enum files are ambient, and that babel-loader, particularly preset-react, was unable to handle them (unlike tsc), was a breakthrough.

This realization led me to a helpful Stack Overflow question, where I learned that I needed to explicitly specify the location of the enum files for babel-loader by adding the following code snippet to my package.json:

  {
    test: /\.(ts|tsx)$/,
    include: path.resolve('./node_modules/@tplp/models/src/enumerations'),
    use: [
      {
        loader: 'babel-loader',
        options: {
          cacheDirectory: true,
        },
      },
    ]
  },

Error message occurs when using Typescript with es2017 target, indicating a potential need for a loader despite successful project builds in es5

Answer №1

Similar questions

Can you explain the purpose of the GenericType parameter in a TypeScript promise declaration for me?

Should I use Object.assign or define class properties?

Retrieve a specific number from an equation

Triggering ngSubmit function when button is clicked inside an Ionic alert

Using Google OAuth2Client with Angular 4

Implementing CSS Pre-loading in an Angular Application with Webpack and Heroku

"Adjusting the position of an Ionic Menu on-the-fly

Where should an Angular application begin when it has distinct files for controllers, services, and other components?

Combining nested Observables within an outer array without using inner subscribe (RxJS)

Improving the structure of a TypeScript switch statement

The output from the map() function does not accurately represent the data returned by my REST call

Encountered an Error While Compiling GeoJson File in Vue

An uncaught exception has occurred: An error was encountered indicating that the specified path is not valid for either posix or windows systems, and it appears that there is no 'join' method defined in the

Typescript compilation fails to include require statements in certain files

Tips on how to effectively unit test error scenarios when creating a DOM element using Angular

I am having trouble establishing a connection between two containers on Heroku

Use the ngFor directive to iterate over the most recently created array from the parent ng

Angular - Is there a specific type for the @HostListener event that listens for scrolling on the window?

Here's how to retrieve a property from a union type object in Typescript without the need for type casting

Encountering a module resolve error when a tsx file is added to the project item group