Giters

phiresky / blog

Source code of my personal blog

Home Page:https://phiresky.github.io/blog/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Compatibility errors with React libraries

willian20091 opened this issue · comments

commented

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
➜  ~
commented

Which command did you run to get that output?

You need to install the dependencies with yarn not npm.

commented

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) ✗
commented

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.

commented

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.
Captura de Tela 2023-06-15 às 15 02 39

➜  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) ✗
commented

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)

commented

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

commented

It worked, thanks for the help.