I have been trying to build my gatsby (react) site recently using an external package. The link to this package is "https://github.com/transitive-bullshit/react-particle-animation".
As I only have the option to change the props from the components detail, I cannot read/write the package file where it all gets together in the end as it is not included in the public folder of 'gatsby-build'.
What I have tried:
- Editing the package file locally, which worked only on my machine but when I push it to netlify, which just receives the public folder and the corresponding package.json files and not the 'node-modules folder', I cannot make netlify read the file that I myself changed, as it requests it directly from the github page.
As a solution I found from a comment to this question, we can use the "Patch-Package" to save our fixes to the node module and then use it wherever we want. This actually worked for me!
To explain how I fixed it: (As most of it is already written in the "Patch Package DOCS), so mentioning the main points:
- I first made changes to my local package files that were giving the error.(For me they were in my node_modules folder)
- Then I used the Patch Package Documentation to guide my self through the rest.
- It worked after I pushed my changes to github such that now, Patch Package always gives me my edited version of the node_module.
When dealing with third-party modules that use
window
in Gatsby you need to add anull
loader to its own webpack configuration to avoid the transpilation during the SSR (Server-Side Rendering). This is becausegatsby develop
occurs in the browser (where there is awindow
) whilegatsby build
occurs in the Node server where obviously there isn't awindow
or other global objects (because they are not even defined yet).Keep in mind that the
test
value is a regular expression that will match a folder undernode_modules
so, ensure that the/react-particle-animation/
is the right name.Using a patch-package may work but keep in mind that you are adding an extra package, another bundled file that could potentially affect the performance of the site. The proposed snippet is a built-in solution that is fired when you build your application.