Cannot custom webpack config in React app

App Platform
,
1

Hello,

I am trying to config webpack in React according to the Tutorial https://developers.freshworks.com/tutorials/codelabs/custom-webpack-config.
I put the folder webpack-config inside the project folder, with the same level as the package.json and app folder. However, when I run fdk run, I get undefined.
In package.json, I added the config path as below:

"fdkConfig": {
"frontendFramework": "react",
"configPath": "webpack-config/webpack.config.js"
},

I don’t know what I’m doing wrong. Can you help me with this?
image.png
The picture below show where I created webpack-config folder:

image
image309×525 8.92 KB

Regards,
Nhat Nguyen

2 Likes
3

hey @Nhat_Nguyen,

The issue might happen if one of the imports in the Webpack config is unavailable, to find out which you can wrap the Webpack config in a try catch block or you can install the imports used in Webpack config through npm install

if the above suggested methods did not workout please send us the webpack.config.js we will investigate it from our end.

Hope this helps!

Stay safe :slight_smile:

2 Likes
4

Hello,

I have run npm install, however it didn’t fix the issue though it works well when I use default webpack.config.js.
I have tried the try-catch block, and if I put the import package into a try block, it shows the message Failed inside the catch block. Therefore, I understand that the config path was right and it actually runs into my webpack.config.js.
I haven’t know what really goes wrong. I’ll send you my webpack.config.js, please help me investigate it.

Thank you very muchwebpack.config.zip (915 Bytes)

2 Likes
5

Hello,

Would you mind keeping me updated, I still don’t know the reason why I can’t custom webpack.config.js.

Thank you

2 Likes
6

Hey @Nhat_Nguyen,

Apologies for the delay in the response, the reason you get undefined is because the dependencies used in the custom config are not available in the project, for eg the following are the dependencies used in the custom webpack config,
html-webpack-plugin clean-webpack-plugin mini-css-extract-plugin
you have to install these dependencies in the project root.
npm i -D html-webpack-plugin clean-webpack-plugin mini-css-extract-plugin

please let us know if this works

4 Likes