I am started getting error "TypeError: Cannot read property 'add' of undefined"

[hammad]

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

[juanma]

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!

[hammad]

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.

[juanmtorrijos]

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:

moitorrijos/isaeuniversidad-frontity

moitorrijos/isaeuniversidad

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.

[juanma]

@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

• Uncaught TypeError: Cannot read property 'add' of undefined · Issue #1 · staylor/react-helmet-async · GitHub
• TypeError: Cannot read property 'add' of undefined · Issue #27 · staylor/react-helmet-async · GitHub

[juanmtorrijos]

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.

[juanma]

Hi @juanmtorrijos

@juanmtorrijos

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

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?

[David]

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.

[juanmtorrijos]

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)

[juanmtorrijos]

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

[David]

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:

1. specifying the dependency manually inside the package.json of your Frontity package
2. running npm install in 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.

[mh123]

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.

[juanma]

@David

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.

@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

Detect "node-modules" under "packages" folder, remove them and launch reinstall from root

Description Some users are installing things under the folder of their package which creates a “node_modules” folder. When launching the project locally the project fails as there are confilcts between packages like in here Possible solution I suggest we detect if there is a “node_modules” folder under the packages folder, we remove it and we launch again automatically a install from roor when we detect this from commands dev & build We can lunch internally something like rm -rf node_modules…

[juanma]

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

[juanmtorrijos]

Oh! Wow! I understand. And also, I just learnt something new, which is a good thing. Thank you very much @David.

[mburridge]

@David

the right way of adding dependencies would be:

1. specifying the dependency manually inside the package.json of your Frontity package
2. running npm install in the root folder of you Frontity project.

In the light of this should we also be changing the instructions here in the step-by-step tutorial?

[juanma]

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