React Template Setup

App Platform
1

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

2

@ajithr did u tried like this

import HelloUser from “./components/HelloUser”

3

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”

4

You need to create a custom webpack config like this.

image
image1284×1273 156 KB

5

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?

6

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.