React Template Setup

[ajithr]

Hi Team,

I’m using React Template, we would like to remove the extension dependency during import, but we are unable to achieve

My .babelrc file

{
	"presets": ["@babel/preset-env", "@babel/preset-react"],
	"plugins": [
		[
			"module-resolver",
			{
				"root": ["./src"],
				"extensions": [".js", ".jsx"],
				"alias": {
					"@": "./src"
				}
			}
		]
	]
}

No Error:
import HelloUser from “@/components/HelloUser.jsx”

Got Error:
import HelloUser from “@/components/HelloUser”

this module-resolver helps to set the import alias as expected, but for the extension, I’m getting the following error,

Module not found: Error: Can’t resolve ‘./components/HelloUser’ in ‘D:\projects\Freshworks\Global\recurring-ticket\sdk\src’
resolve ‘./components/HelloUser’ in ‘D:\projects\Freshworks\Global\recurring-ticket\sdk\src’
using description file: D:\projects\Freshworks\Global\recurring-ticket\sdk\package.json (relative path: ./src)
Field ‘browser’ doesn’t contain a valid alias configuration
using description file: D:\projects\Freshworks\Global\recurring-ticket\sdk\package.json (relative path: ./src/components/HelloUser)
no extension
Field ‘browser’ doesn’t contain a valid alias configuration
D:\projects\Freshworks\Global\recurring-ticket\sdk\src\components\HelloUser doesn’t exist
.js

[Mani_Tamilarasan]

@ajithr

‘./components/HelloUser’

@ajithr did u tried like this

import HelloUser from “./components/HelloUser”

[ajithr]

Thanks for the response @Mani_Tamilarasan

Yes we tired without import aliases, but same error. currently import aliases not a issue the extension.js/.jsx is problem.

No Error:
import HelloUser from “@/components/HelloUser.jsx”

Got Error:
import HelloUser from “@/components/HelloUser”

[arunrajkumar235 (Arun Rajkumar)]

You need to create a custom webpack config like this.

[ajithr]

Thanks for the response @arunrajkumar235

I hope if we use our custom webpack config, then we need to handle the whole entry, output, plugin modules, and pack (can’t utilize the existing fdk run, fdk pack).

Is it possible to achieve with minimal change (the way import alias handled in .babelrc file)

@Saif @Raviraj your thoughts?

[arunrajkumar235 (Arun Rajkumar)]

Here’s the official Freshworks tutorial on using a custom webpack config. It’s not as hard as you think it is; give it a shot.
https://developers.freshworks.com/tutorials/codelabs/custom-webpack-config/#0
You will be able to use fdk run and fdk pack after this.

[Mani_Tamilarasan]

Without web config
Install the necessary Babel plugins:
npm install --save-dev babel-plugin-module-resolver
Update your .babelrc configuration:
Your .babelrc file looks good, but make sure it’s properly configured to resolve extensions:
Ensure your runtime environment supports this configuration:
npm install --save-dev @babel/cli @babel/node @babel/preset-env @babel/preset-react

"scripts": {
  "start": "babel-node src/index.js"
}

Now, you can run your project with npm start, and it should respect the .babelrc configuration.

If your using Using Create React App
Install react-app-rewired and customize-cra:
npm install --save-dev react-app-rewired customize-cra babel-plugin-module-resolver

Create a config-overrides.js file in the root of your project:

const { override, addBabelPlugin } = require('customize-cra');

module.exports = override(
  addBabelPlugin([
    'module-resolver',
    {
      root: ['./src'],
      extensions: ['.js', '.jsx'],
      alias: {
        '@': './src',
      },
    },
  ])
);

Update your package.json to use react-app-rewired:

"scripts": {
  "start": "react-app-rewired start",
  "build": "react-app-rewired build",
  "test": "react-app-rewired test",
  "eject": "react-scripts eject"
}

Using Vite

npm create vite@latest

****Configure aliasing in vite.config.js:

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import path from 'path';

export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src'),
    },
  },
});