CODEWITHSUNDEEP
reactjswebpackcreate-react-app
SDK
SDK

Reputation: 1508

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

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?

Upvotes: 10

Views: 5982

Answers (3)

Manohar Reddy Poreddy
Manohar Reddy Poreddy

Reputation: 27395

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

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

Upvotes: 1

Dipak
Dipak

Reputation: 6940

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.

Upvotes: 2

Bassem
Bassem

Reputation: 4030

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

Upvotes: 10

Related Questions