[Error] @react-three/drei 관련 에러

./node_modules/@react-three/drei/core/Text3D.js
Error: 
  × Unexpected token `...`. Expected yield, an identifier, [ or {
    ╭─[C:\Users\82103\Desktop\hyunjeong\node_modules\@react-three\drei\core\Text3D.js:60:1]
 60 │    */
 61 │   const {
 62 │     0: label,
 63 │     1: ...rest
    ·        ───
 64 │   } = useMemo(() => getTextFromChildren(children), [children]);
 65 │   const args = React.useMemo(() => [label, opts], [label, opts]);
 66 │   React.useLayoutEffect(() => {
    ╰────

Caused by:
    Syntax Error

위와 같은 에러가 뜬다... 슬프다ㅜㅜㅜ

https://github.com/pmndrs/drei/issues/1500

can't import drei into next.js / "unexpected token import" problem · Issue #1500 · pmndrs/drei

위의 사이트에서 전혀 해결이 안됨

 

chat GPT한테 물어본 결과

The error you're encountering seems to be related to the usage of the spread (...) operator in an unexpected location. This might be due to compatibility issues between the version of TypeScript, React, and the @react-three/drei library.

Here are a few steps you can take to resolve this issue:

Update Dependencies:
Make sure you are using the latest versions of your dependencies. Update your @react-three/fiber, react, react-dom, and @react-three/drei packages to the latest versions compatible with each other.

//아래의 것으로 다시 설치하고
npm install @react-three/fiber@latest react@latest react-dom@latest @react-three/drei@latest

//tsconfig.json파일 재정의하라
TypeScript Configuration:
Ensure your tsconfig.json file is correctly configured for TypeScript and React. Here's a basic example:

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "react-jsx"
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
  "exclude": ["node_modules"]
}

//재시작하셈
Restart Development Server:
After updating dependencies and configuration files, restart your development server to ensure that the changes take effect.

If the issue persists, you may want to check the release notes of @react-three/drei and related libraries for any breaking changes or compatibility issues. You can also consider reaching out to the library's maintainers or community for assistance.

 

---

2023.11.27 오류 해결

해결방법 : Next14를 사용하는데, 13.2.0으로 다운그레이드 하니까 해결되었다
허무 그잡채... 새로운버전으로 하려했는데, 함부로 하고 그러면 안되겠다 흑 ㅠㅠㅠ

//기존에 있던것 지움
$ yarn remove next react react-dom 
//13.2.0이랑 그에 맞는 버전들 깔음
$ yarn add next@13.2.0 react@^18 react-dom@^18