There was an issue with loading the configuration file in Webpack while utilizing typescript@5 moduleResolution for the "bundler"

My email addresses are 

<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="46323f36233525342f3632067368766874">[email protected]</a>
, 
<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d5a2b0b7a5b4b6bef8b6b9bc95e0fbe5fbe4">[email protected]</a>
, and 
<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a7d0c2c5d7c6c4cce7928990918995">[email protected]</a>
. I attempted to utilize the new feature moduleResolution with value bundler from typescript@5. Moreover, I have set 
"type": "module"
in my package.json file.

The values in my tsconfig.json file are as follows:

        "target": "ESNext",
        "module": "ESNext",
        "moduleResolution": "bundler",

I also configured a file named webpack.config.prod.ts and attempted to build my application using 

webpack --config ./webpack/webpack.config.prod.ts
.

However, I encountered an error message: 

[webpack-cli] Failed to load '/myProject/webpack/webpack.config.prod.ts' config

Additionally,

[webpack-cli] TypeError [ERR_UNKNOWN_FILE_EXTENSION]: Unknown file extension ".ts" for /myProject/webpack/webpack.config.prod.ts
    at new NodeError (node:internal/errors:393:5)
    at Object.getFileProtocolModuleFormat [as file:] (node:internal/modules/esm/get_format:79:11)
    at defaultGetFormat (node:internal/modules/esm/get_format:121:38)
    at defaultLoad (node:internal/modules/esm/load:81:20)
    at nextLoad (node:internal/modules/esm/loader:163:28)
    at ESMLoader.load (node:internal/modules/esm/loader:605:26)
    at ESMLoader.moduleProvider (node:internal/modules/esm/loader:457:22)
    at new ModuleJob (node:internal/modules/esm/module_job:63:26)
    at ESMLoader.#createModuleJob (node:internal/modules/esm/loader:480:17)
    at ESMLoader.getModuleJob (node:internal/modules/esm/loader:434:34) {
  code: 'ERR_UNKNOWN_FILE_EXTENSION'
}
javascripttypescriptwebpack

Answer №1

Seems like there is a persistent issue ongoing, but don't worry, here are some steps you can take to address it:

Check out this link for more information
Another helpful resource can be found here

I recently encountered an issue where I needed to import an ESM module (webpack plugin) from webpack.config.ts. To resolve this, I had to make changes in my tsconfig.json file as follows:

{   // ...   
    "ts-node": {
      // Make sure ts-node CLI installs the --loader automatically
      "esm": true,
      "compilerOptions": {
        "module": "CommonJS",
        "moduleResolution": "NodeNext",
       }
    }   
},

This solution was based on previous feedback received. Using 'ts-node' itself instead of TS_NODE_COMPILER_OPTIONS was key. In addition, setting "esm": true eliminated the need for passing --loader ts-node/esm to Node (More details here).

Environment versions used: - node: v16.14.1 - ts-node: v10.8.1 - typescript: 4.7.3 - webpack: 5.73.0 - webpack-cli: 4.10.0

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to prevent event propagation in d3 with TypeScript?

When working with JavaScript, I often use the following code to prevent event propagation when dragging something. var drag = d3.behavior.drag() .origin(function(d) { return d; }) .on('dragstart', function(e) { d3.event.sourceEvent ...

javascriptd3.jstypescripttypescript-typings

What is the best way to compare a JSON object and a string in JavaScript?

Currently, I am working on developing the website layout for . Most of the data retrieval and display have been successful so far. However, when attempting to filter my search results to show only stop names associated with Subways, I encountered some err ...

javascriptjsonstringobjectequals

Displaying a binary PDF file in a web browser using JavaScript

I am facing an issue with displaying files from a MSSQL Server Database that are stored as a column Content of type VARBINARY(MAX) in a SQL table. To access the database, I have developed a backend Node.js server using Express.js. There is a route called ...

javascriptexpresspdfblob

Servlet question: What causes the XMLHttpRequest responseText to consistently appear empty?

I've been going crazy trying to figure out how to solve this issue. I have a servlet deployed in Tomcat running on localhost:8080 that looks like this: @WebServlet(urlPatterns = { "/createcon" }, asyncSupported = true) public class CreateCon extends ...

javascriptajaxtomcatservlets

What will be the quickest and most reliable trigger - matchMedia, window.resize, orientationchange, or perhaps both combined?

I am trying to trigger a function when a user rotates their device and I'm seeking advice on which event would be most effective for this purpose. In your experience, which event do you recommend that will call the function quickly and consistently? I ...

javascriptandroidiphonemobilewebkit

Questioning the way spyOn "halts all execution of a function" is described in the Jasmine documentation (specifically in the section on Spies in version 2.2)

I am struggling to comprehend the last test in the Jasmine 2.2 documentation which showcases the basic usage of Spies. In the beforeEach() section, we initialize bar = null, then we spy on foo.setBar and proceed to call foo.setBar twice. I am puzzled as t ...

javascriptjasminespyon

A guide on extracting text content exclusively from Markdown files using Javascript

I've been working on a blogging platform with Vue that serves Markdown (*.md) files for posts. My goal is to display a list of published posts on the main page along with a preview of the first 30 words of each post. Currently, I have a function that ...

javascriptvue.jsmarkdown

Exploring Discord.js: Sorting a Collection of Retrieved Messages Using .sort()

This is a code example I am working with: .sort((a, b) => b.createdAt - a.createdAt) After fetching and filtering messages from a channel (which has a total of 8 messages), the filter operation returns a collection that may not be sorted in order. Ho ...

javascriptdiscorddiscord.js

Modify data in JSON using ngModel and then send it via HTTP POST request

Greetings, I am relatively new to Angular and find myself in a bit of a quandary. It seems like the solution to my issue might be simpler than I think. My Angular App consists of a basic "Page View/Controller" and an "Admin View/Controller" that both util ...

javascriptangularjsjsonangular-ngmodel

Reflector has no definition in three.js - a software mystery

After implementing the code snippet from the webgl_mirror example, I attempted to add a reflector surface to my scene. It seems that the following code snippet is all that's needed to introduce a reflective object to the scene: var geometry = new TH ...

javascriptthree.js

Tips for incorporating conditional types into function parameters based on existing input

The title might be confusing, so allow me to clarify. My Objective I am referring to the code snippet below. I aim to specify the route property based on the types property as either a string or a function that returns a string. The Code Let's b ...

typescripttypescript-generics

Splitting Angular modules into separate projects with identical configurations

My Angular project currently consists of approximately 20 different modules. Whenever there is a code change in one module, the entire project needs to be deployed. I am considering breaking down my modules into separate projects for individual deployment. ...

javascriptangulartypescriptuser-interfacemicro-frontend

Prevent the propagation of JS events when clicking on a table row

Here is the scenario with an HTML-table: <table> <tr> <td> Row 1 </td> <td> <!-- Hidden JSF-button --> <button class="hide" /> </td> </tr> </table> ...

javascriptjqueryjquery-events

Modifying Label text dynamically using jQuery on Click event

My website HTML contains the following code snippet: <script src="js/jquery.flexslider.js"></script> <script src="js/jquery.rings.js"></script> The contents of jquery.rings.js are as follows: $('input[type="image"]') ...

javascriptphpjqueryhtml

Navigate your cursor over the dynamically generated link

I am struggling to create a hover effect similar to the example here in jQuery because the link is being dynamically generated. Here's what I've tried: $(document).ready( function() { $('a.g-tabs').on('hover', 'a&ap ...

javascriptjqueryhtmlcss

Creating a diagram to visually represent how different components of a system interact with each

I have data from transactions stored in an Oracle database, and I am looking for the best method to display this information as flowcharts on a webpage. Here is a sample of the data in tables: txn1|sourcesys txn1|system1 txn1|system2 txn1|system3 ...

javascriptangularjsflot

Change web page in JavaScript using post data

Is there a method to utilize JavaScript for navigating to a new URL while including POST parameters? I am aware that with GET requests, you can simply add a parameter string to the URL using window.location.replace(). Is there a way to achieve this with ...

javascriptjqueryajaxpost

The issue of flickering during the combination of slideToggle and animate in jQuery

I want to incorporate a hidden div that, when triggered by a button click, will smoothly reveal itself and "push" away part of another div without changing the overall size of the containing div. However, I have encountered an issue where the div below th ...

javascriptjqueryhtmlcss

Displaying React components using Bootstrap in the navigation bar

I'm feeling a little stuck here. I'm currently working with React Bootstrap and the Navigation component. One of the routes in my application is the dashboard, which is only accessible after logging in. When a user navigates to the dashboard, I ...

javascriptcsstwitter-bootstrapreactjsreact-bootstrap

Exploring the world of Chrome extensions with jQuery

Starting my first Chrome extension and feeling a bit stuck. I've gone through the information on https://developer.chrome.com/extensions/getstarted I understand how to modify the pop-up page, but I'm unsure how to allow JavaScript to alter a tab ...

javascriptjquerygoogle-chromegoogle-chrome-extension