Why .js [file Extension] is not added while importing a component in reactJS?

user_9702455 0
Viewed 2725

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?

create-react-app webpack reactjs
3 Answers

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

user_50695050

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.

user_18237400

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

resolve: {
  extensions: [".ts", ".js", ".mjs", ".json"],
  symlinks: false,
  cacheWithContext: false,
},
user_9844710
Related