Next.js: 8.0.0 - '적절한 로더가 필요할 수 있습니다...' 오류를 일으키는 동적 가져오기

에 만든 2019년 02월 11일 · 58코멘트 · 출처: vercel/next.js

버그 신고

방금 8.0.0으로 업그레이드했는데 정말 기쁩니다! 내 프로젝트가 컴파일되지 않는 문제가 발생했습니다.

버그 설명

따라서 dev 를 실행할 때 다음 문제가 발생합니다.

You may need an appropriate loader to handle this file type.
| 
| 
> import('./noop');
| var _window = window,
|     assetPrefix = _window.__NEXT_DATA__.assetPrefix;

webpack 4.29.0 에서 오는 것 같습니다( 여기 참조 ).

acorn": "^6.0.5 를 종속성으로 선언한 문제가 해결된 것 같지만 마스터 에 변경 사항이 없는 것 같습니다.

내가 너무 빨리 업그레이드한 것은 아닐까?

p0 upstream

출처

dunika

👍88 🚀1 😕1

가장 유용한 댓글

자, 여기 우승 콤보가 있습니다(100% 재현 가능해야 함).
내 프로젝트에는 이미 다음 v7이 있습니다.

npm install next@latest -> 다음 v8.0.1을 설치하지만 도토리에 대해 경고합니다.
npm run dev -> 다음에 실행되고 이 자식 문제에 설명된 오류와 함께 실패합니다.
npm install acorn
npm run dev -> 다음에 실행되고 이 자식 문제에 설명된 오류와 함께 실패합니다.
npm install next@latest -> 경고 없음
npm run dev 작동합니다!!! 🎉

결론
열쇠는 다음 전에 도토리를 설치하는 것입니다

vasco3 에 2019년 02월 15일

👍51 ❤16 🎉15 🚀6

모든 58 댓글

나는 같은 문제가있다. 개발 모드를 시작할 수 없습니다. npm을 최신 버전으로 업데이트하고 도토리 패키지도 설치해 보았지만 소용이 없었습니다.
@timneutkens

dimensi 에 2019년 02월 11일

근본 원인이 같을 수 있는 가져오기와 관련된 다른 오류가 있습니다.

/Users/andrewingram/Repositories/tego/website-next/node_modules/@babel/runtime-corejs2/helpers/esm/typeof.js:1
(function (exports, require, module, __filename, __dirname) { import _Symbol$iterator from "../../core-js/symbol/iterator";
                                                                      ^^^^^^^^^^^^^^^^

SyntaxError: Unexpected identifier

[email protected] 으로 다운그레이드하면 모든 것이 정상입니다.

AndrewIngram 에 2019년 02월 11일

👍3

@AndrewIngram 복제품 을 제공할 수 있습니까? 그 내용이 궁금합니다. webpack이 아닌 @babel/runtime과 관련된 것 같습니다.

timneutkens 에 2019년 02월 11일

나는 같은 오류에 직면하고 있습니다. acorn 를 설치해도 작동하지 않습니다. 참고로 저는 익스프레스 서버를 실행하기 위해 ts-node 를 사용합니다.

incleaf 에 2019년 02월 11일

👍1

나를 위해 이것은 @babel/core를 업그레이드하여 수정되었습니다.

-        "@babel/core": "^7.1.0",
+        "@babel/core": "7.2.2",

어떤 이유로 우리는 현재 직접 의존성을 가지고 있습니다.

TomiTakussaari 에 2019년 02월 11일

👍1

동일한 문제 및 오류 메시지가 발생합니다. @babel/core 는 "7.2.2" 로 설정되어 있으므로 문제가 되지 않을 수 있습니다.

cnasc 에 2019년 02월 11일

우리는 또한 이 문제를 보고 해결 방법을 위해 스레드를 따랐습니다.

프로덕션( next build 포함)이 제대로 빌드되고 실행됩니다.
개발 모드에서 실행하면 OP와 동일한 오류가 발생합니다.
프로그래밍 방식으로 Next.js를 호출합니다(현재 Express와 함께 사용).
@babel/core를 7.2.2로 업데이트해도 이 문제가 해결되지 않았습니다.

스레드에 링크된 문제에 따라 [email protected] 및 @babel/[email protected] 를 devDependancies로 설치하면 이 문제 가 해결되었습니다.

(직접 의존하지 않는 도토리 패키지에 대한 오류도 해결했습니다.)

iaincollins 에 2019년 02월 11일

👍36 ❤11 🎉11 😄9

webpack 및 @babel/core 업데이트 후에도 동일한 문제가 발생했습니다. 내 package-lock.json 및 node_modules 을 제거하고 새로 설치하면 문제가 해결되었습니다.

kpoelhekke 에 2019년 02월 11일

👍13

불행히도 동일한 문제가 있습니다. 복제는 다음과 같습니다. https://github.com/jescalan/nextjs-test/tree/je.canary

정적 빌드 및 내보내기는 훌륭하게 작동합니다. 오류가 발생하는 것은 개발 모드일 뿐입니다. babel도 webpack도 종속성으로 설치되지 않습니다.

jescalan 에 2019년 02월 11일

package-lock.json 를 제거하고 재생성하여 수정했습니다. 해당 분기의 마지막 커밋은 package-lock.json 에 대한 업데이트를 보여줍니다. -- 이것이 원인을 찾는 데 도움이 되었으면 합니다!

jescalan 에 2019년 02월 11일

node_modules 및 package-lock.json 를 제거한 다음 다시 설치하면 이 문제도 해결되었습니다.

pdlug 에 2019년 02월 11일

👍2

node_modules 및 package-lock.json 를 삭제해도 이 문제가 해결되지 않았지만 @iaincollins 가 제안한 대로 [email protected] 를 개발자 종속성으로 설치하면 해결되었습니다.

bitmap 에 2019년 02월 11일

👍11 🎉1

또한 이 문제가 있지만 이 패키지 외부에 있습니다. 더 낮은 버전의 노드(v9.11[동료 작업 버전]로 다운그레이드하고 [email protected]를 설치하고 node_modules 를 다시 설치하면 이 문제가 해결되었습니다.

paulschneider 에 2019년 02월 12일

근본 원인이 같을 수 있는 가져오기와 관련된 다른 오류가 있습니다.
/Users/andrewingram/Repositories/tego/website-next/node_modules/@babel/runtime-corejs2/helpers/esm/typeof.js:1
(function (exports, require, module, __filename, __dirname) { import _Symbol$iterator from "../../core-js/symbol/iterator";
                                                                      ^^^^^^^^^^^^^^^^

SyntaxError: Unexpected identifier
[email protected] 으로 다운그레이드하면 모든 것이 정상입니다.

복잡한 프로젝트에서 @AndrewIngram 과 동일한 문제에 직면했습니다. 이 문제는 프로덕션용으로 컴파일할 때가 아니라 개발 모드의 [email protected] 에만 나타납니다.

icflorescu 에 2019년 02월 12일

👍1

나는 같은 문제에 부딪쳤다. node_modules 및 package-lock.json 를 모두 제거하고 다시 설치하면 _did_ 해결됩니다. 일부 문제가 발생하는 경우를 대비하여 재설치하기 전에 디렉토리와 잠금 파일을 모두 제거하는 것이 중요합니다.

shaunchurch 에 2019년 02월 12일

👍1

TypeScript 파일에서 동일한 동작이 있습니다.

error  in ./stores/index.ts

Module parse failed: Export 'IStore' is not defined (77:9)
You may need an appropriate loader to handle this file type.
|   return Store;
| };
> export { IStore, IStoreSnapshotIn, IStoreSnapshotOut };

 @ ./pages/_app.tsx 16:0-37 38:24-32 83:18-26

schabluk 에 2019년 02월 12일

👍3

@icflorescu 명확한 재생산 없이 문제를 해결하는 것은 불가능합니다. 우리가 더 조사할 수 있도록 하나를 제공하십시오 🙏

timneutkens 에 2019년 02월 12일

@icflorescu 이 문제와 동일하지 않기 때문에 새 문제(복제 포함)를 만들 수 있습니까 🙏

timneutkens 에 2019년 02월 12일

@timneutkens 지난 밤에 내 문제가 #6273에 의해 발생했다는 것을 마침내 발견했습니다.
해당 스레드에서 언급했듯이 next/babel 사전 설정을 ['next/babel', { 'transform-runtime': { useESModules: false } }] 로 수정하면 오류가 사라집니다.

편집: 방금 테스트 리포지토리를 게시했습니다. #6273의 토론을 참조하세요.

icflorescu 에 2019년 02월 13일

👍3

제 경우에는 node_modules 디렉토리를 완전히 다시 설치하여 이 문제를 해결했습니다. 모듈의 내부 종속성 및 남은 모듈과 관련될 수 있습니다.

BiscuiTech 에 2019년 02월 13일

동일한 문제가 있습니다(동적 가져오기를 사용할 때도 동일한 오류가 발생합니다. Spectrum https://spectrum.chat/users/matthew-rapati?thread=c677c233-8b02-447f-aff0-97b3399a493f에 대해 썼습니다).

node_modules, package-lock.json을 제거하고 npm 캐시를 지우려고 시도했지만 문제가 해결되지 않았습니다. 기회가 된다면 문제의 작은 재현을 만들려고 노력할 것입니다.

goshdarnheck 에 2019년 02월 13일

acorn 를 설치하면 이 문제가 해결되었습니다. 이미 카나리아에 병합되었지만 아직 마스터에는 병합되지 않았습니다. https://github.com/zeit/next.js/pull/6137

obedparla 에 2019년 02월 14일

Next.js에 도토리를 설치해도 문제가 해결되지 않습니다.

timneutkens 에 2019년 02월 14일

내가 일하는 곳에서 이것은 다음 8로 업그레이드하려고 할 때 영향을 미쳤습니다.

ograycode 에 2019년 02월 14일

Yarn을 사용하여 종속성을 설치하는 것이 효과적이었습니다. 이상해.

Robbatron 에 2019년 02월 14일

👍3

자, 여기 우승 콤보가 있습니다(100% 재현 가능해야 함).
내 프로젝트에는 이미 다음 v7이 있습니다.

npm install next@latest -> 다음 v8.0.1을 설치하지만 도토리에 대해 경고합니다.
npm run dev -> 다음에 실행되고 이 자식 문제에 설명된 오류와 함께 실패합니다.
npm install acorn
npm run dev -> 다음에 실행되고 이 자식 문제에 설명된 오류와 함께 실패합니다.
npm install next@latest -> 경고 없음
npm run dev 작동합니다!!! 🎉

결론
열쇠는 다음 전에 도토리를 설치하는 것입니다

vasco3 에 2019년 02월 15일

👍51 ❤16 🎉15 🚀6

일종의 의존성 해결이었을까? 내 문제를 해결한 @vasco3 .

andrewgremlich 에 2019년 02월 15일

👍2

이것은 v8.0.0-canary.11 와 v8.0.0-canary.12 https://github.com/zeit/next.js/compare/v8.0.0-canary.11...v8.0.0-canary 사이에서 직접 발생합니다.

@iaincollins 가 제안한 대로 [email protected] 및 @babel/[email protected] 를 devDependencies로 설치하면 이 문제도 해결됩니다.

KB1RMA 에 2019년 02월 19일

👍2

다음 8.0.2와 함께 여전히 존재합니다. 도토리는 package.json에서 업그레이드해야 합니다. 문제가 해결됩니다.

cellog 에 2019년 02월 22일

확인됨: 8.0.3이 이 문제를 수정함

cellog 에 2019년 02월 22일

@vasco3 의 권장 사항을 시도하고 다음 AFTER 도토리를 설치할 때까지 dev 실행 문제는 다음 8.0.3에서 계속 발생했습니다. 이상한...

Soundvessel 에 2019년 02월 22일

Acorn 없이 8.0.3을 실행했습니다.

NPM이 다음에 잘못 캐싱한 것 같습니다. 내 node_modules 폴더를 삭제하고 package-lock npm i $를 다시 실행해도 문제가 지속됩니다. 실제로 NPM CLI를 사용하여 다음에 제거하면 캐시에서 올바르게 제거된 것으로 보이며 Acorn 없이 다시 설치한 후에는 실행 중입니다.

Soundvessel 에 2019년 02월 22일

👍1

@Soundvessel 과 동일

$ next@8 acorn 설치하면 문제가 해결되었습니다.

npm ci
npm i -S acorn<strong i="10">@latest</strong>
npm i -S next<strong i="11">@latest</strong>

Magellol 에 2019년 02월 22일

👎1 👍1

@Magellol npm ci 이후에 개발 모드를 실행해 보셨습니까? 내 두 번째 게시물을 보면 node_modules 외부의 캐시된 버전이 문제의 원인이라고 생각하기 때문에 npm 명령줄을 사용하여 다음에 제대로 제거한 후 8.0.3 _without_ acorn으로 개발 모드를 실행할 수 있었습니다. npm ci 새로 설치하면 개별 패키지를 설치/제거하지 않고도 문제를 해결할 수 있습니다.

Soundvessel 에 2019년 02월 22일

@Soundvessel 도토리를 명시적으로 설치하지 않으면 작동하지 않는 것 같습니다.
나는 다른 단계에서 npm ci 와 모든 종류의 콤보를 시도했습니다.

https://github.com/zeit/next.js/issues/6240#issuecomment -466549203 만이 내가 작동하게 만들 수 있는 유일한 방법입니다. 또한 yarn 를 사용하면 acorn 를 명시적으로 추가할 필요 없이 수정됩니다.

Magellol 에 2019년 02월 23일

@vasco3 귀하의 솔루션이 저에게 효과적이었습니다. 감사 해요. :+1:

pankaj1433 에 2019년 02월 25일

명확히하기 위해 문제를 해결하는 데 Acorn이 필요하지 않았습니다. node_modules 를 삭제하는 대신 명령줄을 사용하여 Next를 제거해 보십시오.

npm uninstall --save next
npm install --save next<strong i="7">@latest</strong>

다음을 제거하기 위해 명령줄을 사용하면 node_modules 외부의 NPM 캐시에서 문제의 원인이 제거된다고 믿습니다.

또한 Node 및 NPM을 미리 업데이트했지만 제대로 다시 설치할 때까지 도움이 되지 않았습니다.

Soundvessel 에 2019년 02월 25일

👍1

npm 캐시에 대해 걱정하는 대신 .next 디렉토리를 제거해 보십시오.

문제를 해결했습니다.

bundleAnalyzer가 동적 가져오기에서 손상되었습니다.
고정 후,
서버 번들 파일이 .next/ 에 남아 있어 import('./noop'); 재설치에도 불구하고 오류
node_modules 및 .next 제거

next build 를 실행하면 next dev가 실패할 수 있지만 next build 먼저 실행하지 않으면 작동합니다.

동적 가져오기 오류가 있고 프로젝트를 정리한 다음 next dev를 실행하면 오류가 표시되지 않습니다.
동적 가져오기 오류가 있고 프로젝트를 정리한 다음 next build 를 실행한 다음 next dev를 실행하면 오류가 표시됩니다.

Yzrsah 에 2019년 02월 27일

다른 모듈을 업데이트한 후 오류가 다시 발생했습니다.

내 사용자 폴더에서 /.next , / node_modules , package-lock.json 및 /npm-cache/ 를 삭제한 다음 npm i 를 다시 실행했는데 오류가 지속되었습니다.

오류를 방지하기 위해 포기하고 acorn 를 내 종속성에 추가했습니다.

Soundvessel 에 2019년 03월 01일

이 오류의 "반복자" 버전을 가져오는 중입니다. 위의 어느 것도 도움이되지 않았습니다.

/Users/username/Sandboxes/mynext/node_modules/@babel/runtime-corejs2/helpers/esm/typeof.js:1
(function (exports, require, module, __filename, __dirname) { import _Symbol$iterator from "../../core-js/symbol/iterator";

요구 사항:

1) ES 모듈에서 가장 기본적인 server.js .

2) .babelrc:

{
  "presets": [
    "@babel/preset-env",
    "next/babel",
  ],
}

3) 패키지.json

{
  "name": "nownext",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "dependencies": {
    "@babel/cli": "^7.2.3",
    "@babel/core": "7.2.2",
    "@babel/node": "^7.2.2",
    "@babel/preset-env": "^7.3.4",
    "acorn": "^6.1.1",
    "express": "^4.16.4",
    "next": "^8.0.3",
    "react": "^16.8.4",
    "react-dom": "^16.8.4",
    "webpack": "4.28.4"
  },
  "scripts": {
    "dev": "babel-node server.js",
  }
}

그런 다음

$ babel-node server.js

위의 오류를 생성합니다. 따라서 동적 가져오기도 아닙니다. 제 경우에는 ES 모듈이 NextJS에서 완전히 작동을 멈췄습니다. @timneutkens 도움이 된다면 데모 리포지토리를 업로드할 수 있습니다.

ivan-kleshnin 에 2019년 03월 19일

@ivan-kleshnin 그것은 또 다른 문제입니다: #6273 이것은 카나리아에서 수정되었습니다.

timneutkens 에 2019년 03월 19일

package-lock.json 및 node_modules 디렉토리를 제거하려고 시도했지만 작동하지 않았습니다. 나를위한 해결책은 원사로 전환하는 것이 었습니다.

rm package-lock.json
rm -rf node_modules
yarn dev

오류가 사라졌습니다!

dknell 에 2019년 03월 31일

https://github.com/zeit/next-learn-demo/tree/master/E2-lazy-loading-modules에서 프로젝트를 실행하려고 할 때 동일한 오류가 발생했습니다. [email protected] 의 npm dev 설치를 수행한 후 다시 작동하기 시작했습니다.

thomasledoux1 에 2019년 04월 10일

https://github.com/zeit/next.js/issues/6940 에서 수정됩니다.

timneutkens 에 2019년 04월 21일

🎉2

@vasco3 감사합니다! 그것은 나를 위해 작동합니다:

npm install acorn
npm run dev // -> runs next and fails with the error described in this git issue
npm install next<strong i="7">@latest</strong> // -> no warnings
npm run dev // it works!!! 🎉

alexbaumgertner 에 2019년 05월 17일

나는 Yarn을 사용하여 종속성도 설치했으며 작동합니다)

scub111 에 2019년 05월 22일

👍1

자, 여기 우승 콤보가 있습니다(100% 재현 가능해야 함).
내 프로젝트에는 이미 다음 v7이 있습니다.
npm install next@latest -> 다음 v8.0.1을 설치하지만 도토리에 대해 경고합니다.
npm run dev -> 다음에 실행되고 이 자식 문제에 설명된 오류와 함께 실패합니다.
npm install acorn
npm run dev -> 다음에 실행되고 이 자식 문제에 설명된 오류와 함께 실패합니다.
npm install next@latest -> 경고 없음
npm run dev 작동합니다!!! 🎉
결론:
열쇠는 다음 전에 도토리를 설치하는 것입니다

감사 해요! 순서가 중요하다는 것을 다시 한 번 증명합니다! 나를 구했다.

matt-reactlabs 에 2019년 05월 29일

👍1

자, 여기 우승 콤보가 있습니다(100% 재현 가능해야 함).
내 프로젝트에는 이미 다음 v7이 있습니다.
npm install next@latest -> 다음 v8.0.1을 설치하지만 도토리에 대해 경고합니다.
npm run dev -> 다음에 실행되고 이 자식 문제에 설명된 오류와 함께 실패합니다.
npm install acorn
npm run dev -> 다음에 실행되고 이 자식 문제에 설명된 오류와 함께 실패합니다.
npm install next@latest -> 경고 없음
npm run dev 작동합니다!!! 타다
결론:
열쇠는 다음 전에 도토리를 설치하는 것입니다

이것은 나에게도 문제를 해결했습니다. 감사합니다! :박수:

naomiHauret 에 2019년 06월 14일

👍2

자, 여기 우승 콤보가 있습니다(100% 재현 가능해야 함).
내 프로젝트에는 이미 다음 v7이 있습니다.
* `npm install next@latest` -> installs next v8.0.1 but warns about acorn

* `npm run dev` -> runs next and fails with the error described in this git issue

* `npm install acorn`

* `npm run dev` -> runs next and fails with the error described in this git issue

* `npm install next@latest` -> no warnings

* `npm run dev` it works!!! 🎉
결론:
열쇠는 다음 전에 도토리를 설치하는 것입니다

덕분에 문제가 해결되었습니다. 👏👏

dixitpeeyush 에 2019년 07월 02일

👍1

이 문제는 곧 카나리아 브랜치에서 수정될 예정입니까?

TidyIQ 에 2019년 07월 05일

@TidyIQ 곧 수정하도록 하겠습니다! 이것은 npm 버그 라는 점에 유의하는 것이 중요합니다.

Timer 에 2019년 07월 05일

@Timer webpack은 이미 이 문제를 수정했습니다. https://github.com/webpack/webpack/pull/9370 참조

c0b41 에 2019년 07월 08일

이것은 나를 위해 문제를 해결하지 못하는 것 같습니다. 아직 새 기능으로 완전히 업그레이드할 수 없는 이전 코드 기반을 처리하고 여전히 트랜스파일된 서버가 필요합니다.

위의 단계를 수행했지만 문제가 해결되지 않습니다. 동적 가져오기를 사용하지도 않습니다./

Compiling client app. 
Compiling server app. 
[ error ] ./node_modules/next/dist/client/next-dev.js 23:6
Module parse failed: Unexpected token (23:6)
You may need an appropriate loader to handle this file type.
| 
| 
> import('./dev/noop'); // Support EventSource on Internet Explorer 11
| 
| if (!window.EventSource) {
[ wait ]  compiling ...
[ error ] ./node_modules/next/dist/client/next-dev.js 23:6
Module parse failed: Unexpected token (23:6)
You may need an appropriate loader to handle this file type.
| 
| 
> import('./dev/noop'); // Support EventSource on Internet Explorer 11
| 
| if (!window.EventSource) {
2019-07-13T08:07:59.942Z app:server:log Connected to redis
2019-07-13T08:07:59.947Z app:server:log > Ready on http://localhost:3000

aequasi 에 2019년 07월 13일

👍1

노드 모듈을 rm-ing하고 다시 설치하여 위의 문제를 해결할 수 있지만 모든 것을 다시 설치하지 않을 수 있습니다. 이 문제를 일으키는 특정 패키지가 있을 수 있습니다.

zargold 에 2019년 07월 16일

최종 해결 단계는 rm package-lock.json 및 rm -rf node_modules 이며 다시 설치해야 합니다.

이것은 Next 9에서만 수정 되었다는 점에 유의하는 것이 중요합니다.

Timer 에 2019년 07월 16일

👍1

@Timer [email protected] 를 실행 중인데 여전히 문제가 있습니다. 난 노력 했어:
1) 다음을 제거하고 yarn add acorn 로 도토리를 추가한 다음 yarn next@latest 를 실행해도 소용이 없습니다.
2) 모든 node_modules 및 yarn.lock을 제거하고 다시 설치합니다. 다른 사람이 여전히 이 문제를 보고 있습니까? 나는 react-datepicker로 그것을 경험하기 시작했습니다.

sean-magin 에 2019년 08월 23일

👍3

@Sm00g15 복제품이 제공되지 않을 때 도움을 드리기가 상당히 어렵습니다. 웹팩을 수동으로 설치했나요?

timneutkens 에 2019년 08월 23일

webpack 및 @babel/core 업데이트 후에도 동일한 문제가 발생했습니다. 내 package-lock.json 및 node_modules 을 제거하고 새로 설치하면 문제가 해결되었습니다.

감사합니다. 이 솔루션으로 문제가 해결되었습니다. 나는 내 버전의 Node를 최신 버전으로 업그레이드한 다른 Node.js 프로젝트(Next.js가 아님)에서 작업하고 있었습니다. 이것이 문제의 원인인 것 같습니다. lock.json 및 node_modules를 제거한 다음 패키지를 다시 설치하는 솔루션이 완벽하게 작동하는 경우. 감사 해요.

nicktaras 에 2020년 01월 07일

이 페이지가 도움이 되었나요?

0 / 5 - 0 등급

Next.js: 8.0.0 - '적절한 로더가 필요할 수 있습니다...' 오류를 일으키는 동적 가져오기

버그 신고

버그 설명

가장 유용한 댓글

모든 58 댓글

관련 문제