Hello,
I would like to pack a react app, however, I got the error “Package size exceeds the 5MB limit” since my react Freshdesk app contains many libraries in node modules. Can I pack the app without the node-modules folder, or it is a must-have? Is there any solution to this problem?
Thank you
Hi Nhat,
Can you share your folder structure?
The app folder contains the built/compiled assets of the app, and the src folder is at root. Therefore no node_modules folder would be present in the app, and this should not gives us error while packing the app through fdk pack.
This is my folder structure. Perhaps too many SVG in the resource folder causes the error? The SVG is generated when I import a library for creating Dashboard.
Oh, that might be the reason. In that case, I am sorry, I won’t be able to help much.
Hope this gets figure out soon for you 
That might be the reason. Let us check with the app platform and get back to you.
Hello,
I have optimized by using the webpack.config.js and the size I saw in the report Webpack Bundle Analyzer has gone down to 4.93MB. However, when I run fdk pack, it still throws the error “Package size exceeds the 5MB limit”. What size does the FreshDesk mean here? This is the report generated by Webpack Bundle Analyzer.report.zip (148.2 KB) . Could you have a look on it and tell me why?
As you run fdk pack this time, can you do it this way NODE_DEBUG=fdk fdk run as described here,
Share the areas in the logs those direct towards Package Size Exceeds error. Or you can copy-paste the suspected couple of lines or all lines on this thread. This will help us understand if it’s really problem with CLI or any 3rd party dependency. Depending on what we learn, I will initiate a private message with you to see how I can reproduce this issue.
Hey @Nhat_Nguyen,
The FDK packs the src folder by default for the code review process, maybe that is why the size of the package always exceeds 5MB, you can overcome this by writing a custom webpack config, or making a minor change in the webpack config if you already have one.
The FDK is programmed to pack the folder named src. As a workaround, in your project change the name of the src folder to something like source `source’, and in the custom webpack config change the entry point to
main: ['@babel/polyfill', `${process.cwd()}/source/index.js`]
from
main: ['@babel/polyfill', `${process.cwd()}/src/index.js`]
This workaround will not alter any other behavior of your application, it will just make the FDK ignore the src during packing.
module.exports = {
entry: {
main: ['@babel/polyfill', `${process.cwd()}/source/index.js`]
},
...
...
...
...
}
P.S: The src folder is not deployed, it is packed only for code review purposes, if this is a public app you can send the source code separately to us for review.
Hope this Helps
Stay Safe