What causes certain webpack / Babel ES6 imports without a specified extension to resolve as "undefined"?

When I try to import certain ES6 files (such as .js, .jsx, .ts, .tsx) using the syntax import ComponentName from './folder/ComponentName'; (without extension), they end up resolving as undefined. This occurs even though there are no errors from Webpack or Typescript, and the files resolve correctly when the extension is added. Strangely, other files are able to resolve properly with or without the extension. What could be causing this inconsistency?

This issue tends to occur more frequently with React components, but it can happen regardless of the content of the imported file or whether it has a default export.

javascripttypescriptwebpackecmascript-6babeljs

Answer №1

The reason for this issue is because there were files with identical names but different extensions (such as '.less') in the same folder. For instance, both ComponentName.tsx and ComponentName.less would exist in the same directory.

There are two potential solutions:

  1. To resolve this in Webpack configuration, ensure that JS/ES6/TypeScript extensions are placed ahead of the .less / .css extensions within the resolves section. For example, change from ['.less', '.tsx', ...] to ['.tsx', '.less', ...]. This way, JavaScript files will be resolved first.
  2. Alternatively, it is even better practice to avoid keeping files with the same name in the same directory altogether.

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

Expanding MaterialUi styled components by incorporating TableCellProps: A guide

When trying to create a styled TableCell component in a separate file, I encountered an error in TypeScript (ts(2322)). TypeScript was indicating that the properties "component," "scope," and "colSpan" could not be used because they do not exist in StyledC ...

typescriptmaterial-uistyled-components

Is there a method to display a loading animation while the micro apps are being loaded in a single spa project?

Currently, I am working on a project using single spa and I need to implement a loader while my micro app is being loaded. Additionally, I also need the loader to be displayed when switching between these micro apps. Are there any methods to accomplish t ...

javascriptmicro-frontendsingle-spa-angularsingle-spa

Troubleshooting Node.js import module errors

I have just discovered two files that I created using the TS language specification manual (on page 111). The first file, called geometry.ts, contains the following code: export interface Point { x: number; y: number }; export function point(x: number, y ...

node.jstypescript

The error encountered in the Node crud app states that the function console.log is not recognized as a

I am attempting to develop a CRUD application, however, I keep encountering an error message that states "TypeError: console.log is not a function" at Query. (C:\Users\Luis Hernandez\Desktop\gaming-crud\server\app.js:30:25) h ...

javascriptnode.jsreactjs

Transform the JavaScript function to a Node.js module

My function serves as an abstract factory for creating JavaScript objects. Here is the code: var $class = function(definition) { var constructor = definition.constructor; var parent = definition.Extends; if (parent) { var F = function ...

javascriptnode.jsrewriting

Utilizing combinedReducers will not prompt a re-render when dispatching actions

When I refrain from using combineReducers: const store = createStore<StoreState,any,any,any>(pointReducer, { points: 1, languageName: 'Points', }); function tick() { store.dispatch(gameTick()); requestAnimationFrame(tick) ...

reactjstypescriptreduxreact-redux

Link to Reply Comment Feature in Wordpress

It seems like I've tried numerous solutions to fix my issue but haven't had any luck, so now I'm seeking help here. Despite trying methods that have worked for others, they do not seem to work for me. My problem lies with nested comments on ...

javascriptphpwordpressnestedcomments

Avoiding the triggering of jQuery events from child elements

Here is the code snippet I am working with: <html> <head> <script src="http://code.jquery.com/jquery-1.6.2.min.js" type="text/javascript"> </script> </head> <body> <div id=&q ...

javascriptjqueryeventsjquery-events

Error message shows explicit Typescript type instead of using generic type name

I am looking to use a more explicit name such as userId instead of the type number in my error message for error types. export const primaryKey: PrimaryKey = `CONSUMPTION#123a4`; // The error 'Type ""CONSUMPTION#123a4"" is not assignable to ...

typescripttypes

The error message "The type 'DynamicModule' from Nest.js cannot be assigned to the type 'ForwardReference' within the nest-modules/mailer" was encountered during development

Recently, I decided to enhance my Nest.js application by integrating the MailerModule. I thought of using the helpful guide provided at this link: Acting on this idea, I went ahead and performed the following steps: To start with, I executed the command ...

node.jstypescriptnpm

The conventional method for including React import statements

I'm curious if there is a standard convention for writing import statements in React. For instance, I currently have the following: import React, { useState, FormEvent } from 'react'; import Avatar from '@material-ui/core/Avatar'; ...

javascriptreactjstypescriptimportmaterial-ui

When using Angular2, I have found that I am unable to extract the body data from JSONP responses. However, I have discovered that this issue

Initially, I developed the SERVER using spring-boot framework. The code for this looks like: public class App { @RequestMapping("/") @ResponseBody String home(HttpServletRequest request) { String aa=request.getParameter("callback"); System.out.pri ...

javascriptjqueryajaxangularjsonp

Having trouble with the line of code right before a $timeout in AngularJS

I am wondering about an issue in my code. vm.showSuccess = true; $timeout(function() { close(); }, 2000); vm.showSuccess = false; Interestingly, the timeout function is executing properly but the first line seems to be ignored. This piece of code is me ...

javascriptangularjstimeout

Can whitelist functionality be applied in the browser version of Babel?

While working on a project for my university, I wanted to utilize React. Since installation wasn't allowed, I had to resort to using the browser version of React. Everything was functioning well until I attempted to incorporate JSX into the browser. ...

javascriptreactjsbabeljs

Shuffling arrays with JavaScript and jQuery for a touch of randomness

Looking to add some variability to your font choices? I've got an idea for you! How about randomizing three arrays for fonts, font size, and font weight? Then, we can display the results of these arrays in a div with the class name "randomFont." Each ...

javascriptjqueryarraysrandom

Sending AJAX request within a Twitter Bootstrap modal in Symfony2

After exhausting countless Google and StackOverflow search results, I have come to the conclusion that seeking help is my best option. I am currently developing a Symfony2 application. In every view of my app, I have integrated a Twitter Bootstrap modal e ...

javascriptjqueryajaxtwitter-bootstrapmodal-dialog

Receiving data from a service in Angular 2 with rxjs subscribe throws an error: it is not a

I've recently started working with Angular and I'm encountering an issue when trying to pass the _newArray to my child component using a shared service. Service fetchData(): Observable < any > { return forkJoin(this.fetchQuestions(), th ...

angulartypescriptrxjs

Error encountered while compiling NextJS: Unexpected use of single quotation mark in jsx-quotes

I can't seem to compile my NextJs 13 app without encountering errors. Take a look at my shortened eslintrc.js file below: module.exports = { env: { browser: true, es2021: true, }, extends: [ 'plugin:react/recommended', ...

javascriptreactjsnext.jseslint

Utilize javascript/jquery for transforming HTML table data to JSON

Whenever I click the "+" button, my table rows are dynamically generated. After populating the fields and clicking the submit button next to "+", the JSON data is displayed in the console, as shown in the image below. While generating the JSON data, I aim ...

javascriptjqueryjson

I am struggling to make the while loop in JavaScript stop even when I command it to

var dataStatus = '1'; while (dataStatus != 0) { $.ajax({ url: '/ajax.php?updateData='+dataStatus, dataType: 'json', async: false, success: function(response) { dataStatus = respo ...

phpjavascriptjqueryajaxjson