Hi there,
I was working on styling and all of sudden I started getting this error. I didn’t even change a single line of code when it occured. May be project crashes or something?
Is there any fix for this? If yes then please guide me. Thanks 
Hi @hammad
Can you provide a repository with the code of your project?
By doing so the community will be able to clone your project and try to reproduce the error you’re having With this info it’ll be much more easy to help you with your issue
Thanks!
1 Like
I have created another project and its working now. With the same code that i am writing and working on. I didn’t come to know that what was the issue so i created the new project. Its all set now.
Hello Community,
I am currently having this same problem.
All of a sudden this message appears in the console and I get an Internal Server Error message in the browser.
The problem went away for a while and I could make some advances, but eventually, it crept back up.
I tried deleting the whole project and starting again by pulling the repo, but the problem persists.
As far as I can tell, is an issue with reac-helmet-async? Maybe the component? But I haven’t made any changes to that component at all.
I did install a npm package to my theme (inside my theme directory). Mainly react-count-up for some animations.
These are the links to both, the frontity and WP repos:
This is my frontity info output:
## System:
- OS: macOS 11.2.1
- CPU: (8) x64 Intel(R) Core(TM) i5-8279U CPU @ 2.40GHz
- Memory: 44.69 MB / 8.00 GB
- Shell: 5.8 - /bin/zsh
## Binaries:
- Node: 12.19.0 - /usr/local/bin/node
- npm: 6.14.8 - /usr/local/bin/npm
## Browsers:
- Chrome: 88.0.4324.192
- Edge: Not Found
- Firefox: 86.0
- Safari: 14.0.3
## npmPackages:
- @frontity/core: ^1.11.0 => 1.11.0
- @frontity/html2react: ^1.6.1 => 1.6.1
- @frontity/mars-theme: ./packages/mars-theme => 1.4.4
- @frontity/tiny-router: ^1.4.0 => 1.4.0
- @frontity/wp-source: ^1.11.2 => 1.11.2
- dotenv: ^8.2.0 => 8.2.0
- frontity: ^1.14.2 => 1.14.2
- isae-theme: file:packages/isae-theme => 1.0.0
- react-hook-form: ^6.15.4 => 6.15.4
## npmGlobalPackages:
- frontity: Not Found
- npx: Not Found
I hope somebody can help me.
I have been working on this project for a while, and this issue has been very frustrating.
@David can you check this question to se if it’s some bug that can be addressed?
It seems there are several issues in the react-helmet-async package related to this error
Hi @juanma. Sorry for not coming back to close this. The problem was that I misunderstood the docs. I was of the belief that if I needed to use a npm package for my theme, I had to install it directly on my theme folder. Evidently, this is not the case, and is what caused the problem. What I did was uninstall the packages from my theme folder and install them on the frontity root folder and everything is fine now. Thanks for checking.
Yes, that’s exactly the case. Frontity themes are like any other packages and they should work in any Frontity project.
Is the installation of the react-count-up package in your theme package what is triggering the “TypeError: Cannot read property ‘add’ of undefined” error?
Hey @juanmtorrijos 
I cannot access to the links you shared but reading the conversation I guess you tried to install react-helmet-async in your theme? If that’s the case, Frontity already ships it under the Head component so you don’t need to install it (actually, you could probably get errors because of some kind of conflict).
By the way, as @juanma sais, if you want to install an NPM package in your theme you can do so, there shouldn’t be any problem. Actually, Frontity is designed in a way that any Frontity package – like themes – can be installed in any Frontity project, so it’s better if you add your theme’s dependencies in your theme’s package.json, not in the project’s package.json.
Hey @juanma,
That makes sense, since I can publish the theme to npm as a package.
I tried installing react-count-up and react-intersection-observer back in the theme folder, and the problem came back.
It seems as there are some missing dependencies.
This is the output:
SERVER STARTED -- Listening @ http://localhost:3000
- mode: development
- target: module
- public-path: /static/
webpack built client 979033f0e69183e6edb1 in 5495ms
ℹ ｢wdm｣: Hash: 979033f0e69183e6edb1212ec2564feecbaf45cc
Version: webpack 4.46.0
Child client:
Hash: 979033f0e69183e6edb1
Time: 5495ms
Built at: 03/11/2021 8:45:42 AM
Asset Size Chunks Chunk Names
../bundling/chunks.module.json 1.46 KiB [emitted]
isae.module.js 8.65 MiB isae [emitted] [big] isae
Entrypoint isae [big] = isae.module.js
[0] multi webpack-hot-middleware/client ./build/bundling/entry-points/isae/client.ts 40 bytes {isae} [built]
[./build/bundling/entry-points/isae/client.ts] 1.17 KiB {isae} [built]
[./node_modules/@emotion/react/jsx-runtime/dist/emotion-react-jsx-runtime.browser.esm.js] 926 bytes {isae} [built]
[./node_modules/@frontity/connect/src/index.js] 241 bytes {isae} [built]
[./node_modules/@frontity/core/src/app/index.tsx] 713 bytes {isae} [built]
[./node_modules/@frontity/core/src/client/index.tsx] 1.92 KiB {isae} [built]
[./node_modules/@frontity/html2react/src/index.ts] 214 bytes {isae} [built]
[./node_modules/@frontity/tiny-router/src/index.ts] 241 bytes {isae} [built]
[./node_modules/@frontity/wp-source/src/index.ts] 1.45 KiB {isae} [built]
[./node_modules/strip-ansi/index.js] 189 bytes {isae} [built]
[./node_modules/webpack-hot-middleware/client-overlay.js] (webpack)-hot-middleware/client-overlay.js 2.17 KiB {isae} [built]
[./node_modules/webpack-hot-middleware/client.js] (webpack)-hot-middleware/client.js 7.68 KiB {isae} [built]
[./node_modules/webpack-hot-middleware/process-update.js] (webpack)-hot-middleware/process-update.js 4.35 KiB {isae} [built]
[./node_modules/webpack/buildin/module.js] (webpack)/buildin/module.js 497 bytes {isae} [built]
[./packages/isae-theme/src/index.js] 1.02 KiB {isae} [built]
+ 431 hidden modules
Child server:
Hash: 212ec2564feecbaf45cc
Time: 8119ms
Built at: 03/11/2021 8:45:45 AM
Asset Size Chunks Chunk Names
server.js 11.1 MiB main [emitted] [big] main
Entrypoint main [big] = server.js
[./build/bundling/entry-points/server.ts] 475 bytes {main} [built]
[./node_modules/@frontity/core/src/server/index.ts] 2.33 KiB {main} [built]
[./node_modules/@frontity/core/src/server/middlewares/scripts-stats.ts] 593 bytes {main} [built]
[./node_modules/@frontity/core/src/server/middlewares/server-side-rendering.ts] 4.78 KiB {main} [built]
[./node_modules/@frontity/core/src/server/middlewares/settings-and-store.ts] 1.66 KiB {main} [built]
[./node_modules/@frontity/html2react/processors/iframe.tsx] 395 bytes {main} [built]
[./node_modules/@frontity/html2react/processors/image.tsx] 4.48 KiB {main} [built]
[./node_modules/@frontity/html2react/processors/link.tsx] 709 bytes {main} [built]
[./node_modules/@frontity/html2react/processors/script.tsx] 718 bytes {main} [built]
[./node_modules/@frontity/html2react/src/index.ts] 214 bytes {main} [built]
[./node_modules/@frontity/html2react/src/libraries/component.tsx] 5.95 KiB {main} [built]
[./node_modules/@frontity/tiny-router/src/actions.ts] 8.88 KiB {main} [built]
[./node_modules/@frontity/tiny-router/src/index.ts] 241 bytes {main} [built]
[./node_modules/@frontity/wp-source/src/index.ts] 1.45 KiB {main} [built]
[./packages/isae-theme/src/index.js] 1.02 KiB {main} [built]
+ 624 hidden modules
ℹ ｢wdm｣: Compiled successfully.
TypeError: Cannot read property 'add' of undefined
at t.r.init (webpack-internal:///./packages/isae-theme/node_modules/react-helmet-async/lib/index.module.js:14:9540)
at t.r.render (webpack-internal:///./packages/isae-theme/node_modules/react-helmet-async/lib/index.module.js:14:9603)
at processChild (webpack-internal:///./node_modules/react-dom/cjs/react-dom-server.node.development.js:452:631)
at resolve (webpack-internal:///./node_modules/react-dom/cjs/react-dom-server.node.development.js:442:122)
at ReactDOMServerRenderer.render (webpack-internal:///./node_modules/react-dom/cjs/react-dom-server.node.development.js:484:1233)
at ReactDOMServerRenderer.read (webpack-internal:///./node_modules/react-dom/cjs/react-dom-server.node.development.js:484:55)
at renderToString (webpack-internal:///./node_modules/react-dom/cjs/react-dom-server.node.development.js:528:132)
at render (webpack-internal:///./node_modules/@frontity/core/src/server/middlewares/capabilities/render-method.tsx:12:318)
at serverSideRendering (webpack-internal:///./node_modules/@frontity/core/src/server/middlewares/server-side-rendering.ts:29:15)
at dispatch (webpack-internal:///./node_modules/koa-compose/index.js:16:252)
Hi @David
Sorry, the repos were private. I made them public.
If you need to connect frontity to WordPress, you can connect to this URL:
‘https://isae.prontoaqui.com’
I didn’t install react-helmet-async. Could it be that one of the packages (react-count-up or react-intersection-observer) installed it as a dependency?
The problem has come back as I mentioned above, and I am at a loss now. I hope you can help.
Also I ran npm list and I got these error messages:
npm ERR! peer dep missing: react@^16.6.0, required by react-helmet-async@1.0.7
npm ERR! peer dep missing: react-dom@^16.6.0, required by react-helmet-async@1.0.7
npm ERR! peer dep missing: react@^16.6.0, required by react-helmet-async@1.0.7
npm ERR! peer dep missing: react-dom@^16.6.0, required by react-helmet-async@1.0.7
OK, I think I know what the problem is. Let me explain it in detail.
According to the logs you shared, it looks like the error comes from a package inside the ./packages/isae-theme/node_modules folder.
I guess that happened because you would have run npm install inside the ./package/isae-theme folder, thus installing frontity and its dependencies again in a new node_modules inside your package’s folder. The error then comes from a duplicated react-helmet-async package.
In order to fix it, just remove the ./packages/isae-theme/node_modules folder – and also the ./packages/isae-theme/package-lock.json file. After that, you would have to run npm install in the root folder. Actually, there should not be any node_modules folder except the one in the root folder of your project.
This is how NPM works, it treats your local packages as any other NPM package, installing it and their dependencies in the root node_modules folder (because packages inside node_modules don’t have its own node_modules folder, all packages and its dependencies are stored along in the same folder).
I understand this may be confusing, because when you want to add dependencies to your Frontity packages you would run npm install [the-dependency]. But, actually, the right way of adding dependencies would be:
- specifying the dependency manually inside the
package.jsonof your Frontity package - running
npm installin the root folder of you Frontity project.
Hope this helps, @juanmtorrijos! 
PS: @juanma, I guess we should change this in our docs. In 3. Packages - Frontity, we imply that the way of installing a dependency is by running npm install [the-dependency] inside a package folder.
If a developer do that, then they should remove the node_modules folder along with the package-lock.json file and, after that, run npm install in the project’s root folder.
1 Like
You just saved my day @David. Thank you. Deleting node_modules folder inside of my theme solved the issue just like that. I had the same problem.
1 Like
@David, thanks for the heads up. Yes, I’ll review the docs to clarify this a bit more
Besides this, I have created this Feature Discussion to try to detect this in the feature and fixi it automatically
1 Like
For further references a command like this from the root of the folder should solve this issue and other related ones
rm -rf node_modules && rm -rf **/node_modules && rm -rf package-lock.json && rm -rf yarn-error.log && rm -rf yarn.lock && npm cache clean --force && npm i
Oh! Wow! I understand. And also, I just learnt something new, which is a good thing. Thank you very much @David.
2 Likes
Yes, I agree this shouldn’t be the recommended way to add an NPM package to a project.
But let’s just create the issue in the repo for now until it’s more clear how can we face this issue in the easiest way for the user