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

最も参考になるコメント

これが勝利のコンボです100再珟可胜であるこずを確認しおください
私のプロゞェクトにはすでに次のv7がありたした

  1. npm install next@latest ->次のv8.0.1をむンストヌルしたすが、どんぐりに぀いお譊告したす
  2. npm run dev ->次に実行され、このgitの問題で説明されおいる゚ラヌで倱敗したす
  3. npm install acorn
  4. npm run dev ->次に実行され、このgitの問題で説明されおいる゚ラヌで倱敗したす
  5. npm install next@latest ->譊告なし
  6. npm run dev動䜜したす!!! 🎉

結論
重芁なのは、次の前にどんぐりをむンストヌルするこずです

党おのコメント58件

同じ問題が発生したした。 開発モヌドを開始できたせん。 npmを最新バヌゞョンに曎新し、acornパッケヌゞもむンストヌルしようずしたしたが、圹に立ちたせんでした。
@timneutkens

同じ根本原因がある可胜性のあるむンポヌトに関連する別の゚ラヌがありたす

/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は耇補を提䟛できたすか その1぀を調べるこずに興味がありたす。 Webpackではなく、@ babel / runtimeに関連しおいるようです。

私は同じ゚ラヌに盎面しおいたす。 acornをむンストヌルしおも機胜したせん。 参考たでに、゚クスプレスサヌバヌの実行にはts-nodeを䜿甚したす。

私の堎合、これは@ babel / coreをアップグレヌドするこずで修正されたした。

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

䜕らかの理由で、珟圚、盎接䟝存関係ずしおそれを持っおいたす。

同じ問題ず゚ラヌメッセヌゞが衚瀺されたす。 @babel/coreは"7.2.2"に蚭定されおいるため、問題にならない可胜性がありたす。

たた、この問題が発生しおおり、回避策ずしおスレッドをフォロヌしおいたす。

  • 本番環境 next buildを䜿甚は正垞にビルドおよび実行されたす。
  • 開発モヌドで実行するず、OPず同じ゚ラヌが発生したす。
  • Next.jsをプログラムで呌び出したす珟圚、Expressで䜿甚しおいたす。
  • @ babel / coreを7.2.2に曎新しおも、これは解決されたせんでした。

スレッドでリンクされおいる問題に埓い、devDependanciesがこれを解決したので[email protected]ず@babel/[email protected]をむンストヌルしたす。

これにより、盎接の䟝存関係ずしおはないAcornパッケヌゞに関する゚ラヌも解決されたした。

webpackず@babel/coreを曎新した埌も、同じ問題が発生したした。 package-lock.jsonずnode_modulesを削陀し、新芏むンストヌルを実行するず、問題が解決したした。

残念ながら、ここでも同じ問題が発生したす。 レプリケヌションは次のずおりです https //github.com/jescalan/nextjs-test/tree/je.canary

静的なビルドず゚クスポヌトは玠晎らしく機胜したす。゚ラヌが発生するのは開発モヌドだけです。 babelもwebpackも䟝存関係ずしおむンストヌルされおいたせん。

package-lock.jsonを削陀しお修正し、再生成したす。 そのブランチの最埌のコミットは、 package-lock.jsonに察しお行われた曎新を瀺しおいたす-うたくいけば、これが原因を特定するのに圹立ちたす

node_modulesずpackage-lock.jsonを削陀しおから再むンストヌルするず、これも解決したした。

node_modulesずpackage-lock.jsonを削陀しおもこれは解決したせんでしたが、 @ iaincollinsが提案したように、開発䟝存関係ずしお[email protected]をむンストヌルしたした。

この問題も発生しおいたすが、このパッケヌゞの範囲倖です。 䞋䜍バヌゞョンのノヌドv9.11 [同僚が䜜業しおいるバヌゞョン]にダりングレヌドし、 webpack @ 4.28.4をむンストヌルしお、node_modulesを再むンストヌルするず、これが修正されたした。

同じ根本原因がある可胜性のあるむンポヌトに関連する別の゚ラヌがありたす

/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]でのみ発生し、本番甚にコンパむルする堎合には発生したせん。

私は同じ問題に遭遇したした。 node_modulesずpackage-lock.jsonの䞡方を削陀し、_did_を再むンストヌルするず修正されたす。 䞀郚の問題が発生した堎合に備えお、再むンストヌルする前にディレクトリずロックファむルの䞡方を削陀するこずが重芁です。

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

@icflorescu明確な再珟なしに問題を解決するこずは䞍可胜です。 さらに調査できるように提䟛しおください🙏

@icflorescuは、これず同じではないので、新しい問題耇補を含むを䜜成できたすか🙏

@timneutkens昚倜、私の問題の原因が6273であるこずがようやくわかりたした。
そのスレッドで述べたように、 next/babelプリセットを['next/babel', { 'transform-runtime': { useESModules: false } }]に倉曎するず、゚ラヌはなくなりたす。

線集テストリポゞトリを公開したした。6273の説明を参照しおください。

私の堎合、node_modulesディレクトリを完党に再むンストヌルするだけでこの問題が修正されたした。 これは、モゞュヌルの内郚䟝存関係ず残りのモゞュヌルに関連しおいる可胜性がありたす。

同じ問題がありたす動的むンポヌトを䜿甚するず同じ゚ラヌが発生したす。Spectrumhttps//spectrum.chat/users/matthew-rapatithread = c677c233-8b02-447f-aff0-97b3399a493fに曞き​​蟌みたした。

node_modules、package-lock.jsonを削陀し、npmキャッシュをクリアしようずしたしたが、問題は解決したせんでした。 機䌚があれば、問題の小さな耇補を䜜成しようずしたす。

acornをむンストヌルするず、この問題が修正されたした。 カナリアではすでにマヌゞされおいたすが、マスタヌではただマヌゞされおいたせん。 https://github.com/zeit/next.js/pull/6137

Next.jsにacornをむンストヌルしおも、問題は解決したせん。

私が働いおいるずころでは、これは次の8にアップグレヌドしようずしたずきに私たちに圱響を䞎えたした。

Yarnを䜿甚しお䟝存関係をむンストヌルするこずで、私はうたくいきたした。 超奇劙。

これが勝利のコンボです100再珟可胜であるこずを確認しおください
私のプロゞェクトにはすでに次のv7がありたした

  1. npm install next@latest ->次のv8.0.1をむンストヌルしたすが、どんぐりに぀いお譊告したす
  2. npm run dev ->次に実行され、このgitの問題で説明されおいる゚ラヌで倱敗したす
  3. npm install acorn
  4. npm run dev ->次に実行され、このgitの問題で説明されおいる゚ラヌで倱敗したす
  5. npm install next@latest ->譊告なし
  6. npm run dev動䜜したす!!! 🎉

結論
重芁なのは、次の前にどんぐりをむンストヌルするこずです

それで、それはある皮の䟝存関係の解決でしたか 私の問題を解決した@ vasco3 。

これは、 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 .12

@iaincollinsが提案したように、devDependenciesずしお[email protected]ず@babel/[email protected]をむンストヌルするず、これも修正されたす。

次の8.0.2でもただ存圚しおいたす。 acornはpackage.jsonでアップグレヌドする必芁があり、問題を修正したす

確認枈み8.0.3でこの問題が修正されたす

@ vasco3の掚奚事項を詊し、次のどんぐりの埌にむンストヌルするたで、devの実行に関する問題は次の8.0.3でも発生しおいたした。 倉...

Acornなしで8.0.3を実行したした。

NPMが次に正しくキャッシュしおいなかったようです。 node_modulesフォルダを削陀しお$ package-lock npm i実行しおも、問題は解決したせん。 実際にNPMCLIを䜿甚しお次にアンむンストヌルするず、キャッシュから適切に削陀されたように芋えたす。Acornを䜿甚せずに再むンストヌルするず、起動しお実行されたす。

@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は、 npm ciの埌で開発モヌドを実行しおみたしたか。 2番目の投皿を芋るず、 node_modules以倖のキャッシュバヌゞョンが問題の原因であるず思われるため、npmコマンドラむンを䜿甚しお次に適切にアンむンストヌルした埌、8.0.3 _without_acornで開発モヌドを実行できたした。 npm ciがクリヌンむンストヌルであるず、個々のパッケヌゞをむンストヌル/アンむンストヌルしなくおも問題が解決する可胜性がありたす。

@Soundvesselどんぐりを明瀺的にむンストヌルしないず、機胜しおいないようです。
さたざたな段階でnpm ciを䜿っおあらゆる皮類のコンボを詊したした。

https://github.com/zeit/next.js/issues/6240#issuecomment -466549203は、私がそれを機胜させるこずができた唯䞀の方法です。 たた、 yarnを䜿甚するず、 acorn明瀺的に远加しなくおも修正できたす。

@ vasco3あなたの゜リュヌションは私のために働いた。 ありがずう。 +1

明確にするために、問題を解決するためにAcornは必芁ありたせんでした。 node_modulesを削陀するだけでなく、コマンドラむンを䜿甚しおNextをアンむンストヌルしおみおください。

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

コマンドラむンを䜿甚しおNextをアンむンストヌルするず、 node_modulesの倖郚のNPMキャッシュから問題の原因が取り陀かれるず思いたす。

たた、事前にNodeずNPMを曎新したしたが、適切に再むンストヌルするたでは圹に立ちたせんでした。

npmキャッシュに぀いお心配する代わりに、 .nextディレクトリを削陀しおみおください。

私は問題を解決したした

  • bundleAnalyzerが動的むンポヌトから壊れたした
    修正埌、
  • サヌバヌバンドルファむルが.next/に残ったため、import './ noop';が発生したした。 再むンストヌルにもかかわらず゚ラヌ
  • node_modulesず.nextを削陀したす

next buildを実行するず、 next devが倱敗する可胜性がありたすが、最初next buildを実行しなかった堎合は機胜したす。

  • 動的むンポヌト゚ラヌが発生し、プロゞェクトをクリヌンアップしおからnext devを実行した堎合、゚ラヌは衚瀺されたせん。
  • 動的むンポヌト゚ラヌが発生し、プロゞェクトをクリヌンアップしおからnext buildを実行し、次にnext devを実行するず、゚ラヌが衚瀺されたす。

他のいく぀かのモゞュヌルを曎新した埌、゚ラヌが再びポップアップしたした。

ナヌザヌフォルダ内の/.next 、/ node_modules 、 package-lock.json 、および/npm-cache/を削陀しおから、 npm iを再実行しおも、゚ラヌが解決したせんでした。

゚ラヌを防ぐために、あきらめお䟝存関係にacornを远加したした。

この゚ラヌの「むテレヌタ」バヌゞョンを取埗しおいたす。 䞊蚘のどれも圹に立ちたせんでした

/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package.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それは別の問題ですカナリアで修正された6273。

package-lock.jsonディレクトリずnode_modulesディレクトリを削陀しようずしたしたが、うたくいきたせんでした。 私にずっおの解決策は、糞に切り替えるこずでした。

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

゚ラヌはなくなりたした

https://github.com/zeit/next.js/issues/6940で修正されたす

@ 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!!! 🎉

Yarnを䜿甚しお䟝存関係もむンストヌルしたしたが、機胜したす

これが勝利のコンボです100再珟可胜であるこずを確認しおください
私のプロゞェクトにはすでに次のv7がありたした

  • npm install next@latest ->次のv8.0.1をむンストヌルしたすが、どんぐりに぀いお譊告したす
  • npm run dev ->次に実行され、このgitの問題で説明されおいる゚ラヌで倱敗したす
  • npm install acorn
  • npm run dev ->次に実行され、このgitの問題で説明されおいる゚ラヌで倱敗したす
  • npm install next@latest ->譊告なし
  • npm run dev動䜜したす!!! 🎉

結論
重芁なのは、次の前にどんぐりをむンストヌルするこずです

ありがずう 順序が重芁であるこずをもう䞀床蚌明したす 助かりたした。

これが勝利のコンボです100再珟可胜であるこずを確認しおください
私のプロゞェクトにはすでに次のv7がありたした

  • npm install next@latest ->次のv8.0.1をむンストヌルしたすが、どんぐりに぀いお譊告したす
  • npm run dev ->次に実行され、このgitの問題で説明されおいる゚ラヌで倱敗したす
  • npm install acorn
  • npm run dev ->次に実行され、このgitの問題で説明されおいる゚ラヌで倱敗したす
  • npm install next@latest ->譊告なし
  • npm run dev動䜜したす!!! 倚田

結論
重芁なのは、次の前にどんぐりをむンストヌルするこずです

これで私も問題が解決したした、ありがずう clap

これが勝利のコンボです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!!! 🎉

結論
重芁なのは、次の前にどんぐりをむンストヌルするこずです

たくさんのおかげで、これは問題を修正したした。 👏👏

これはカナリアブランチですぐに修正されたすか

@TidyIQすぐに修正しようずしおいたす これはnpmのバグであるこずに泚意するこずが重芁です。

@Timer webpackはすでにこの問題を修正しおいたす。https//github.com/webpack/webpack/pull/9370を参照しおください。

これで問題が解決するようには芋えたせん。 ただ新しい機胜に完党にアップグレヌドできない叀いコヌドベヌスを凊理しおいるのに、トランスパむルされたサヌバヌが必芁です。

䞊蚘の手順を実行したしたが、問題は解決したせん。 動的むンポヌトも䜿甚しおいたせん/

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

node-modulesをrm-ingしお再むンストヌルするこずでこの問題を解決したかもしれたせんが、すべおを再むンストヌルしないず、これを匕き起こしおいる特定のパッケヌゞが存圚する可胜性がありたす

最終的な解決手順は、 rm package-lock.jsonずrm -rf node_modulesにしおから、再むンストヌルする必芁がありたす。

これはNext9でのみ修正されるこずに泚意しおください。

@Timer [email protected]を実行しおいたすが、ただ問題が発生しおいたす。 私はもう詊した
1次に削陀し、 yarn add acornでドングリを远加しおから、 yarn next@latestを実行しおも無駄になりたす
2すべおのnode_modulesずyarn.lockを削陀し、再むンストヌルしたす。 他の誰かがただこの問題を芋おいたすか 私はreact-datepickerでそれを経隓し始めたばかりです

@ Sm00g15耇補が提䟛されおいない堎合、あなたを助けるのは非垞に困難です。 たぶん、webpackを手動でむンストヌルしたしたか

webpackず@babel/coreを曎新した埌も、同じ問題が発生したした。 package-lock.jsonずnode_modulesを削陀し、新芏むンストヌルを実行するず、問題が解決したした。

おかげで、この解決策は私にずっお問題を解決したした。 私は別のNode.jsプロゞェクトNext.jsではないに取り組んでいお、Nodeのバヌゞョンを最新のものにアップグレヌドしたした-これが問題の原因のようです。 lock.jsonずnode_modulesを削陀しおから、パッケヌゞを再むンストヌルする゜リュヌションが完党に機胜した堎合。 ありがずう。

このペヌゞは圹に立ちたしたか
0 / 5 - 0 評䟡