Is there any fix for this? If yes then please guide me. Thanks
github.com
- 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.
@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
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.
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?
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
,
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 https://isae.prontoaqui.com ’npm list and I got these error messages:
npm ERR! peer dep missing: react@^16.6.0, required by [email protected]
npm ERR! peer dep missing: react-dom@^16.6.0, required by [email protected]
npm ERR! peer dep missing: react@^16.6.0, required by [email protected]
npm ERR! peer dep missing: react-dom@^16.6.0, required by [email protected]
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.json of your Frontity package
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.
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 🗣 Feature Discussions 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…
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
the right way of adding dependencies would be:
specifying the dependency manually inside the package.json of your Frontity package
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?
