Compatibility errors with React libraries

[willian20091]

Hello, I found your blog project very interesting, and I tried to replicate it in my local environment, but it is showing some compatibility errors with React libraries.

Below is the error that is happening.

npm WARN using --force Recommended protections disabled.
npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: react-katex@2.0.2
npm WARN Found: react@18.2.0
npm WARN node_modules/react
npm WARN   react@"^18.2.0" from the root project
npm WARN   32 more (@emotion/react, ...)
npm WARN 
npm WARN Could not resolve dependency:
npm WARN peer react@"^15.3.2 || ^16.0.0" from react-katex@2.0.2
npm WARN node_modules/react-katex
npm WARN   react-katex@"^2.0.2" from the root project
npm WARN 
npm WARN Conflicting peer dependency: react@16.14.0
npm WARN node_modules/react
npm WARN   peer react@"^15.3.2 || ^16.0.0" from react-katex@2.0.2
npm WARN   node_modules/react-katex
npm WARN     react-katex@"^2.0.2" from the root project

➜  ~ node -v 
v18.13.0
➜  ~ npm -v 
9.6.5
➜  ~ yarn -v 
1.22.17
➜  ~ 

[phiresky]

Which command did you run to get that output?

You need to install the dependencies with yarn not npm.

[willian20091]

Initially I tested it with yarn, and the errors occurred as per the log below. Later I tried to install the dependencies with npm.

➜  blog git:(master) yarn install 
➤ YN0000: ┌ Resolution step
➤ YN0060: │ next-blog@workspace:. provides react (p04a35) with version 18.2.0, which doesn't satisfy what react-katex requests
➤ YN0002: │ next-blog@workspace:. doesn't provide webpack (p119f0), requested by ts-loader
➤ YN0002: │ next-blog@workspace:. doesn't provide webpack (pb0499), requested by url-loader
➤ YN0002: │ recharts@npm:2.1.12 [b12ba] doesn't provide prop-types (p64d7f), requested by react-smooth
➤ YN0000: │ Some peer dependencies are incorrectly met; run yarn explain peer-requirements <hash> for details, where <hash> is the six-letter p-prefixed code
➤ YN0000: └ Completed
➤ YN0000: ┌ Fetch step
➤ YN0013: │ @next/swc-darwin-arm64@npm:12.2.0 can't be found in the cache and w
➤ YN0013: │ fsevents@patch:fsevents@npm%3A2.3.2#~builtin<compat/fsevents>::vers
➤ YN0000: └ Completed
➤ YN0000: ┌ Link step
➤ YN0000: │ ESM support for PnP uses the experimental loader API and is therefore experimental
➤ YN0007: │ @fortawesome/fontawesome-common-types@npm:6.1.1 must be built because it never has been before or the last one failed
➤ YN0007: │ @fortawesome/free-regular-svg-icons@npm:6.1.1 must be built because it never has been before or the last one failed
➤ YN0007: │ @fortawesome/free-solid-svg-icons@npm:6.1.1 must be built because it never has been before or the last one failed
➤ YN0007: │ @fortawesome/fontawesome-svg-core@npm:6.1.1 must be built because it never has been before or the last one failed
➤ YN0000: └ Completed in 1s 92ms
➤ YN0000: Done with warnings in 1s 344ms
➜  blog git:(master) ✗ yarn dev 
ready - started server on 0.0.0.0:3000, url: http://localhost:3000
error - Failed to load next.config.js, see more info here https://nextjs.org/docs/messages/next-config-error
Error: Qualified path resolution failed: we looked for the following paths, but none could be accessed.

Source path: /Users/willianferreira/Downloads/blog/posts-built/summary.json
Not found: /Users/willianferreira/Downloads/blog/posts-built/summary.json
Not found: /Users/willianferreira/Downloads/blog/posts-built/summary.json.js
Not found: /Users/willianferreira/Downloads/blog/posts-built/summary.json.json
Not found: /Users/willianferreira/Downloads/blog/posts-built/summary.json.node
Not found: /Users/willianferreira/Downloads/blog/posts-built/summary.json.ts
Not found: /Users/willianferreira/Downloads/blog/posts-built/summary.json.tsx
Not found: /Users/willianferreira/Downloads/blog/posts-built/summary.json.jsx

Require stack:
- /Users/willianferreira/Downloads/blog/client/next.config.js
    at Function.call (/Users/willianferreira/Downloads/blog/.pnp.cjs:17104:13)
    at Function.mod._resolveFilename (/Users/willianferreira/Downloads/blog/.yarn/__virtual__/next-virtual-c3747343ad/0/cache/next-npm-12.2.0-735322d5c2-38456c3393.zip/node_modules/next/build/webpack/require-hook.ts:142:26)
    at Function.Module._resolveFilename.sharedData.moduleResolveFilenameHook.installedValue [as _resolveFilename] (/Users/willianferreira/Downloads/blog/.yarn/cache/@cspotcode-source-map-support-npm-0.8.1-964f2de99d-5718f26708.zip/node_modules/@cspotcode/source-map-support/source-map-support.js:811:30)
    at Function.require$$0.Module._load (/Users/willianferreira/Downloads/blog/.pnp.cjs:16958:42)
    at Module.require (node:internal/modules/cjs/loader:1105:19)
    at require (node:internal/modules/cjs/helpers:103:18)
    at Object.<anonymous> (/Users/willianferreira/Downloads/blog/client/next.config.js:10:17)
    at Module._compile (node:internal/modules/cjs/loader:1218:14)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1272:10)
    at Object.require$$0.Module._extensions..js (/Users/willianferreira/Downloads/blog/.pnp.cjs:17148:33)
➜  blog git:(master) ✗ 

[phiresky]

Ah yes, that error is because you need to run yarn posts before running yarn dev to generate the summary.json and other files. I've just added that info to the readme.

[willian20091]

I tested it, but the same problem still occurs. I realized that after running yarn install, the node module folder should be created with all the dependencies, but this does not happen.

➜  blog git:(master) ✗ yarn install 
➤ YN0000: ┌ Resolution step
➤ YN0060: │ next-blog@workspace:. provides react (p04a35) with version 18.2.0, which doesn't satisfy what react-katex requests
➤ YN0002: │ next-blog@workspace:. doesn't provide webpack (pd41b9), requested by ts-loader
➤ YN0002: │ next-blog@workspace:. doesn't provide webpack (pb0499), requested by url-loader
➤ YN0000: │ Some peer dependencies are incorrectly met; run yarn explain peer-requirements <hash> for details, where <hash> is the six-letter p-prefixed code
➤ YN0000: └ Completed
➤ YN0000: ┌ Fetch step
➤ YN0000: └ Completed
➤ YN0000: ┌ Link step
➤ YN0000: │ ESM support for PnP uses the experimental loader API and is therefore experimental
➤ YN0000: └ Completed
➤ YN0000: Done with warnings in 0s 255ms
➜  blog git:(master) ✗ yarn posts
processing 2019/about.md
Error: spawn pandoc ENOENT
    at Process.ChildProcess._handle.onexit (node:internal/child_process:283:19)
    at onErrorNT (node:internal/child_process:476:16)
    at processTicksAndRejections (node:internal/process/task_queues:82:21) {
  errno: -2,
  code: 'ENOENT',
  syscall: 'spawn pandoc',
  path: 'pandoc',
  spawnargs: [
    '-t',
    'json',
    '-M',
    'url2cite-link-output=sup',
    '--filter=../../pandoc-url2cite.sh',
    '--citeproc',
    '--csl=../ieee-with-url.csl',
    '--',
    '/Users/willianferreira/Downloads/blog/posts/2019/about.md'
  ],
  cmd: 'pandoc -t json -M url2cite-link-output=sup --filter=../../pandoc-url2cite.sh --citeproc --csl=../ieee-with-url.csl -- /Users/willianferreira/Downloads/blog/posts/2019/about.md',
  stdout: '',
  stderr: ''
}
➜  blog git:(master) ✗ 
➜  blog git:(master) ✗ 
➜  blog git:(master) ✗ 
➜  blog git:(master) ✗ yarn dev 
ready - started server on 0.0.0.0:3000, url: http://localhost:3000
error - Failed to load next.config.js, see more info here https://nextjs.org/docs/messages/next-config-error
Error: Qualified path resolution failed: we looked for the following paths, but none could be accessed.

Source path: /Users/willianferreira/Downloads/blog/posts-built/summary.json
Not found: /Users/willianferreira/Downloads/blog/posts-built/summary.json
Not found: /Users/willianferreira/Downloads/blog/posts-built/summary.json.js
Not found: /Users/willianferreira/Downloads/blog/posts-built/summary.json.json
Not found: /Users/willianferreira/Downloads/blog/posts-built/summary.json.node
Not found: /Users/willianferreira/Downloads/blog/posts-built/summary.json.ts
Not found: /Users/willianferreira/Downloads/blog/posts-built/summary.json.tsx
Not found: /Users/willianferreira/Downloads/blog/posts-built/summary.json.jsx

Require stack:
- /Users/willianferreira/Downloads/blog/client/next.config.js
    at Function.call (/Users/willianferreira/Downloads/blog/.pnp.cjs:17598:13)
    at Function.call (/Users/willianferreira/Downloads/blog/.yarn/__virtual__/next-virtual-43d5643878/0/cache/next-npm-12.3.4-cdaf2db0a7-d96fc4f5bc.zip/node_modules/next/build/webpack/require-hook.ts:25:28)
    at Function.mod._resolveFilename (/Users/willianferreira/Downloads/blog/.yarn/__virtual__/next-virtual-43d5643878/0/cache/next-npm-12.3.4-cdaf2db0a7-d96fc4f5bc.zip/node_modules/next/build/webpack/require-hook.ts:25:28)
    at Function.Module._resolveFilename.sharedData.moduleResolveFilenameHook.installedValue [as _resolveFilename] (/Users/willianferreira/Downloads/blog/.yarn/cache/@cspotcode-source-map-support-npm-0.8.1-964f2de99d-5718f26708.zip/node_modules/@cspotcode/source-map-support/source-map-support.js:811:30)
    at Function.require$$0.Module._load (/Users/willianferreira/Downloads/blog/.pnp.cjs:17452:42)
    at Module.require (node:internal/modules/cjs/loader:1105:19)
    at require (node:internal/modules/cjs/helpers:103:18)
    at Object.<anonymous> (/Users/willianferreira/Downloads/blog/client/next.config.js:10:17)
    at Module._compile (node:internal/modules/cjs/loader:1218:14)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1272:10)
➜  blog git:(master) ✗ 

[phiresky]

I'm using yarn pnp so no node_modules folder is needed. the issue is you need to install pandoc (see the error spawn pandoc ENOENT)

[willian20091]

Thanks for the clarifications. I will install and test again later.

[willian20091]

It worked, thanks for the help.