10

We are creating different components in reactJS,

Example:

App.js
index.js
LandingPage.js
.....

While importing this component in another component, we are not adding the extension .js

Example:

index.js:

import App from './App'

// here './App' we are not adding .js

Does anyone know the reason why?

Bassem
  • 3,582
  • 2
  • 24
  • 47
SDK
  • 1,356
  • 3
  • 19
  • 44
  • You can find your answer here https://stackoverflow.com/questions/44481851/does-es6-import-export-need-js-extension – dungmidside May 20 '20 at 04:23

3 Answers3

10

Your Webpack config is taking care of resolving the common extensions (ie: .js or .jsx). If your project is using create-react-app, then this is already done for you behind the scenes.

Create-react-app already resolves the following extensions automatically:

extensions: [".web.js", ".mjs", ".js", ".json", ".web.jsx", ".jsx"],

More info here https://github.com/webpack/docs/wiki/Configuration#resolveextensions

Bassem
  • 3,582
  • 2
  • 24
  • 47
  • 3
    Well, to make life a little bit easier so you don't have to include the extension every single time. Plus, in case you change your file name from `.js` to `.jsx` for example, you don't have to modify your code! – Bassem May 20 '20 at 12:14
  • Thanks, this pointed me in the right direction. For my case, I used a community template for create-react-app called `typescript-empty`. For some reason, they neglected to keep in the functionality that generates the `tsconfig.json` file. This causes a problem inside CRA's webpack config, where it will essentially ignore `.ts` and `.tsx` files. Resolved by copying a valid tsconfig from another project created with the plain 'ol `typescript` CRA template. :) – Jeremiah Shore May 05 '22 at 02:07
1

It all done by webpack module resolution, a resolver is a library which helps in locating a module by its absolute path.

The dependency module can be from the application code or a third-party library. The resolver helps webpack find the module code that needs to be included in the bundle for every such require/import statement. webpack uses enhanced-resolve to resolve file paths while bundling modules.

Once the path is resolved based on the above rule, the resolver checks to see if the path points to a file or a directory. If the path points to a file:

  • If the path has a file extension, then the file is bundled straightaway.
  • Otherwise, the file extension is resolved using the resolve.extensions option, which tells the resolver which extensions are acceptable for resolution e.g. .js, .jsx.

Resolve extensions: These options change how modules are resolved. webpack provides reasonable defaults, but it is possible to change the resolving in detail.

In webpack.config.js 

module.exports = {
  //...
  resolve: {
    enforceExtension: false
  }
};

If the value is true here, it will not allow extension-less files. So by default require('./foo') works if ./foo has a .js extension, but with this (enforceExtension) enabled only require('./foo.js') will work.

Dipak
  • 6,532
  • 8
  • 63
  • 87
  • It Resolves destination URLs. Feed it a source url and the resolver returns with the destination url if any redirects happened. – Dipak May 27 '20 at 07:37
0

Add .js to resolve/extensions in webpack.config.js

resolve: {
  extensions: [".ts", ".js", ".mjs", ".json"],
  symlinks: false,
  cacheWithContext: false,
},
Manohar Reddy Poreddy
  • 25,399
  • 9
  • 157
  • 140