Next.js: 8.0.0 - Dynamischer Import verursacht den Fehler „Sie benötigen möglicherweise ein geeignetes Ladeprogramm ...“.

Erstellt am 11. Feb. 2019  ·  58Kommentare  ·  Quelle: vercel/next.js

Fehlerbericht

Ich habe gerade auf 8.0.0 aktualisiert und bin wirklich aufgeregt! Ich bin jedoch auf ein Problem gestoßen, das verhindert, dass mein Projekt kompiliert wird

Beschreiben Sie den Fehler

Wenn ich also dev ausführe, erhalte ich das folgende Problem

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

Es scheint von webpack 4.29.0 zu kommen ( siehe hier ).

Es sieht so aus, als ob das Problem damit behoben wurde, wodurch acorn": "^6.0.5 als Abhängigkeit deklariert wurde, aber die Änderung scheint auf dem Master nicht vorhanden zu sein

Vielleicht habe ich zu früh aktualisiert?

p0 upstream

Hilfreichster Kommentar

Ok, hier ist die Gewinnkombination (auf 100%ige Reproduzierbarkeit geachtet):
Mein Projekt hatte bereits die nächste v7

  1. npm install next@latest -> installiert die nächste v8.0.1, warnt aber vor Eichel
  2. npm run dev -> wird als nächstes ausgeführt und schlägt mit dem in diesem Git-Problem beschriebenen Fehler fehl
  3. npm install acorn
  4. npm run dev -> wird als nächstes ausgeführt und schlägt mit dem in diesem Git-Problem beschriebenen Fehler fehl
  5. npm install next@latest -> keine Warnungen
  6. npm run dev es funktioniert!!! 🎉

Fazit
Der Schlüssel ist, Eichel vor dem nächsten zu installieren

Alle 58 Kommentare

Ich habe das gleiche Problem. Kann den Entwicklungsmodus nicht starten. Ich habe npm auf die neueste Version aktualisiert und auch versucht, das Acorn-Paket zu installieren, aber es hat nicht geholfen.
@timneutkens

Ich habe einen anderen Fehler im Zusammenhang mit Importen, der möglicherweise dieselbe Ursache hat:

/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

Alles ist in Ordnung, wenn ich auf [email protected] downgrade

@AndrewIngram kannst du eine Reproduktion zur Verfügung stellen? neugierig darauf zu schauen. Es klingt nach @babel/runtime, nicht nach webpack.

Ich stehe vor dem gleichen Fehler. Die Installation acorn funktioniert bei mir auch nicht. FYI, ich verwende ts-node für den Betrieb meines Express-Servers.

Für mich wurde dies durch ein Upgrade von @babel/core behoben:

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

Aus irgendeinem Grund haben wir das derzeit als direkte Abhängigkeit.

Habe das gleiche Problem und die gleiche Fehlermeldung. @babel/core ist auf "7.2.2" gesetzt, das kann also nicht das Problem sein.

Wir sehen dieses Problem auch und haben die Threads für eine Problemumgehung verfolgt.

  • Die Produktion (mit next build ) wird erstellt und läuft einwandfrei.
  • Das Ausführen im Entwicklungsmodus erzeugt denselben Fehler wie OP.
  • Wir rufen Next.js programmgesteuert auf (wir verwenden es derzeit mit Express).
  • Das Aktualisieren von @babel/core auf 7.2.2 hat dieses Problem für uns nicht gelöst.

Das Befolgen der im Thread verlinkten Probleme und das Installieren [email protected] und @babel/[email protected] als devDependancies hat dies behoben.

(Dadurch wurde auch der Fehler bezüglich des Acorn-Pakets behoben, das wir nicht als direkte Abhängigkeit haben.)

Ich hatte das gleiche Problem, auch nach dem Aktualisieren webpack und @babel/core . Das Entfernen meiner package-lock.json und node_modules und eine Neuinstallation löste das Problem.

Hier leider das gleiche Problem. Hier ist eine Replikation: https://github.com/jescalan/nextjs-test/tree/je.canary

Statisches Erstellen und Exportieren funktioniert wunderbar, es ist nur der Entwicklungsmodus, der Fehler verursacht. Weder babel noch webpack werden als Abhängigkeiten installiert.

Nur mit einer Entfernung von package-lock.json behoben und neu generiert. Der letzte Commit auf diesem Zweig zeigt, welche Aktualisierungen an package-lock.json vorgenommen wurden – hoffentlich hilft dies, die Ursache zu finden!

Das Entfernen node_modules und package-lock.json und das anschließende Neuinstallieren löste dies auch für mich.

Das Löschen node_modules und package-lock.json hat das Problem für mich nicht gelöst, aber das Installieren [email protected] als Dev-Abhängigkeit hat es getan, wie @iaincollins vorgeschlagen hat.

Dieses Problem tritt auch auf, aber außerhalb dieses Pakets; Ein Downgrade auf eine niedrigere Version von node (v9.11 [eine Arbeitsversion eines Kollegen]), die Installation von [email protected] und die Neuinstallation von node_modules haben dies für mich behoben.

Ich habe einen anderen Fehler im Zusammenhang mit Importen, der möglicherweise dieselbe Ursache hat:

/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

Alles ist in Ordnung, wenn ich auf [email protected] downgrade

Stehe vor dem gleichen Problem wie @AndrewIngram bei einem komplexen Projekt. Das Problem tritt nur für [email protected] im Entwicklungsmodus auf, nicht beim Kompilieren für die Produktion.

Ich bin auf das gleiche Problem gestoßen. Das Entfernen von node_modules und package-lock.json und die Neuinstallation von _did_ hat es für mich behoben. Es ist wichtig, sowohl das Verzeichnis als auch die Sperrdatei vor der Neuinstallation zu entfernen, nur für den Fall, dass dies das Problem ist, auf das einige stoßen.

Ich habe das gleiche Verhalten in TypeScript-Dateien:

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 Es ist unmöglich, das Problem ohne eine klare Reproduktion zu lösen. Bitte geben Sie eine an, damit wir weiter nachforschen können 🙏

@icflorescu könntest du eine neue Ausgabe dafür erstellen (einschließlich Reproduktion), weil es nicht dasselbe ist wie dieses 🙏

@timneutkens Ich habe letzte Nacht endlich herausgefunden, dass mein Problem durch #6273 verursacht wurde.
Wie ich in diesem Thread erwähnt habe, verschwindet der Fehler, wenn ich meine Voreinstellung next/babel auf ['next/babel', { 'transform-runtime': { useESModules: false } }] .

EDIT: Ich habe gerade ein Test-Repo veröffentlicht, siehe Diskussion in #6273.

In meinem Fall hat eine einfache vollständige Neuinstallation des node_modules-Verzeichnisses dieses Problem behoben. Dies kann mit den internen Abhängigkeiten der Module und den verbleibenden Modulen zusammenhängen.

Ich habe das gleiche Problem (ich bekomme auch den gleichen Fehler, wenn ich dynamische Importe verwende, ich habe darüber auf Spectrum https://spectrum.chat/users/matthew-rapati?thread=c677c233-8b02-447f-aff0-97b3399a493f geschrieben).

Ich habe versucht, node_modules, package-lock.json zu entfernen und meinen npm-Cache zu leeren, aber das Problem wurde dadurch nicht behoben. Wenn ich die Möglichkeit habe, werde ich versuchen, eine kleine Reproduktion des Problems zu erstellen.

Durch die Installation acorn wurde dieses Problem für mich behoben. Es ist bereits auf Canary gemergt, aber noch nicht auf Master. https://github.com/zeit/next.js/pull/6137

Das Installieren von Acorn in Next.js löst das Problem nicht.

Wo ich arbeite, hat sich dies auf uns ausgewirkt, als wir versuchten, auf die nächsten 8 zu aktualisieren.

Die Verwendung von Yarn zum Installieren von Abhängigkeiten hat für mich ausgereicht. Super seltsam.

Ok, hier ist die Gewinnkombination (auf 100%ige Reproduzierbarkeit geachtet):
Mein Projekt hatte bereits die nächste v7

  1. npm install next@latest -> installiert die nächste v8.0.1, warnt aber vor Eichel
  2. npm run dev -> wird als nächstes ausgeführt und schlägt mit dem in diesem Git-Problem beschriebenen Fehler fehl
  3. npm install acorn
  4. npm run dev -> wird als nächstes ausgeführt und schlägt mit dem in diesem Git-Problem beschriebenen Fehler fehl
  5. npm install next@latest -> keine Warnungen
  6. npm run dev es funktioniert!!! 🎉

Fazit
Der Schlüssel ist, Eichel vor dem nächsten zu installieren

War es also eine Art Abhängigkeitsauflösung? @ vasco3 das hat mein Problem gelöst.

Das passiert bei mir direkt zwischen v8.0.0-canary.11 und v8.0.0-canary.12 https://github.com/zeit/next.js/compare/v8.0.0-canary.11...v8.0.0-canary .12

Die Installation [email protected] und @babel/[email protected] als DevDependencies, wie @iaincollins vorgeschlagen hat, behebt dies auch für mich.

noch vorhanden mit nächsten 8.0.2. acorn muss in package.json aktualisiert werden, es behebt das Problem

bestätigt: 8.0.3 behebt dieses Problem

Das Problem mit dem Ausführen von dev war mit next 8.0.3 immer noch vorhanden, bis ich die Empfehlung von @ vasco3 ausprobierte und next AFTER acorn installierte. Seltsam...

Habe 8.0.3 ohne Acorn laufen lassen.

Es scheint, dass NPM als nächstes falsch zwischengespeichert hat. Selbst wenn ich meinen Ordner $#$ node_modules $#$ lösche und package-lock npm i $ erneut ausführe, blieb das Problem bestehen. Die tatsächliche Verwendung der NPM-CLI zum Deinstallieren als nächstes scheint sie ordnungsgemäß aus dem Cache entfernt zu haben, und nach einer Neuinstallation ohne Acorn ist sie betriebsbereit.

Das gleiche wie @Soundvessel

Durch die Installation acorn vor next@8 wurde das Problem behoben.

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

@Magellol hast du versucht, den Dev-Modus nach nur dem npm ci auszuführen. Wenn Sie meinen zweiten Beitrag sehen, konnte ich den Dev-Modus mit 8.0.3 _ohne_ Eichel ausführen, nachdem ich die npm-Befehlszeile verwendet hatte, um als nächstes ordnungsgemäß zu deinstallieren, da ich glaube, dass eine zwischengespeicherte Version außerhalb von node_modules das Problem verursacht hat. npm ci durch eine Neuinstallation könnte das Problem lösen, ohne dass einzelne Pakete installiert/deinstalliert werden müssen.

@Soundvessel Scheint nicht zu funktionieren, wenn ich acorn nicht explizit installiere.
Ich habe alle möglichen Kombinationen mit npm ci in verschiedenen Stadien ausprobiert.

https://github.com/zeit/next.js/issues/6240#issuecomment -466549203 ist die einzige Möglichkeit, wie ich es hätte zum Laufen bringen können. Auch die Verwendung yarn behebt das Problem, ohne dass acorn explizit hinzugefügt werden muss.

@vasco3 Ihre Lösung hat bei mir funktioniert. Danke. :+1:

Zur Verdeutlichung brauchte ich Acorn nicht, um das Problem zu lösen. Versuchen Sie, Next über die Befehlszeile zu deinstallieren, anstatt einfach node_modules zu löschen.

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

Ich glaube, dass die Verwendung der Befehlszeile zum Deinstallieren von Next die Ursache von Problemen in einem NPM-Cache außerhalb von node_modules beseitigt.

Ich habe Node und NPM auch vorher aktualisiert, aber das hat nicht geholfen, bis ich es richtig neu installiert habe.

Versuchen Sie, Ihr .next -Verzeichnis zu entfernen, anstatt sich Gedanken über den npm-Cache zu machen.

Ich habe das Problem gelöst:

  • bundleAnalyzer wurde vom dynamischen Import unterbrochen
    nach Fixierung,
  • Server-Bundle-Dateien wurden in .next/ zurückgelassen und verursachten import('./noop'); Fehler trotz Neuinstallation
  • entfernen Sie node_modules und .next

Das Ausführen next build kann dazu führen, dass next dev fehlschlägt, aber es funktioniert, wenn Sie nicht zuerst next build ausgeführt haben:

  • Wenn ein dynamischer Importfehler auftritt und Sie das Projekt bereinigen und dann next dev ausführen, wird der Fehler nicht angezeigt
  • Wenn ein dynamischer Importfehler auftritt und Sie das Projekt bereinigen, dann next build und dann next dev ausführen, wird der Fehler angezeigt

Der Fehler tauchte erneut auf, nachdem einige andere Module aktualisiert wurden.

Ich habe /.next , / node_modules , package-lock.json und /npm-cache/ in meinem Benutzerordner gelöscht und dann npm i erneut ausgeführt, und der Fehler blieb bestehen.

Aufgegeben und acorn zu meinen Abhängigkeiten hinzugefügt, um den Fehler zu verhindern.

Abrufen der „Iterator“-Version dieses Fehlers. Nichts davon hat geholfen:

/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";

Voraussetzungen:

1) die grundlegendsten server.js mit ES-Modulen.

2) .babelrc:

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

3) Paket.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",
  }
}

Und dann

$ babel-node server.js

erzeugt den obigen Fehler. Es ist also nicht einmal ein dynamischer Import, in meinem Fall funktionierten ES-Module nicht mehr mit NextJS. @timneutkens Ich kann ein Demo-Repo hochladen, wenn es helfen kann.

@ivan-kleshnin, das ist ein weiteres Problem: #6273, das auf Canary behoben ist.

Ich habe versucht, das Verzeichnis package-lock.json und node_modules zu entfernen, aber das hat bei mir nicht funktioniert. Die Lösung für mich war die Umstellung auf Garn:

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

Der Fehler ist weg!

Ich hatte den gleichen Fehler, als ich versuchte, das Projekt in https://github.com/zeit/next-learn-demo/tree/master/E2-lazy-loading-modules auszuführen. Nach einer npm-Entwicklerinstallation von [email protected] funktionierte es wieder.

@vasco3 Vielen Dank! Für mich geht das:

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

Ich habe Yarn auch zum Installieren von Abhängigkeiten verwendet und es funktioniert)

Ok, hier ist die Gewinnkombination (auf 100%ige Reproduzierbarkeit geachtet):
Mein Projekt hatte bereits die nächste v7

  • npm install next@latest -> installiert die nächste v8.0.1, warnt aber vor Eichel
  • npm run dev -> wird als nächstes ausgeführt und schlägt mit dem in diesem Git-Problem beschriebenen Fehler fehl
  • npm install acorn
  • npm run dev -> wird als nächstes ausgeführt und schlägt mit dem in diesem Git-Problem beschriebenen Fehler fehl
  • npm install next@latest -> keine Warnungen
  • npm run dev es funktioniert!!! 🎉

Fazit:
Der Schlüssel ist, Eichel vor dem nächsten zu installieren

Danke! beweist einmal mehr, dass Ordnung zählt! rettete mich.

Ok, hier ist die Gewinnkombination (auf 100%ige Reproduzierbarkeit geachtet):
Mein Projekt hatte bereits die nächste v7

  • npm install next@latest -> installiert die nächste v8.0.1, warnt aber vor Eichel
  • npm run dev -> wird als nächstes ausgeführt und schlägt mit dem in diesem Git-Problem beschriebenen Fehler fehl
  • npm install acorn
  • npm run dev -> wird als nächstes ausgeführt und schlägt mit dem in diesem Git-Problem beschriebenen Fehler fehl
  • npm install next@latest -> keine Warnungen
  • npm run dev es funktioniert!!! tada

Fazit:
Der Schlüssel ist, Eichel vor dem nächsten zu installieren

Das hat das Problem auch bei mir behoben, danke! :klatschen:

Ok, hier ist die Gewinnkombination (auf 100%ige Reproduzierbarkeit geachtet):
Mein Projekt hatte bereits die nächste 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!!! 🎉

Fazit:
Der Schlüssel ist, Eichel vor dem nächsten zu installieren

Tausend Dank, das hat das Problem behoben. 👏👏

Wird dies in Kürze im kanarischen Zweig behoben?

@TidyIQ , wir werden versuchen, es bald zu beheben! Es ist wichtig zu beachten, dass dies ein npm-Fehler ist.

@Timer Webpack hat dieses Problem bereits behoben, siehe https://github.com/webpack/webpack/pull/9370

Dies scheint das Problem für mich nicht zu beheben. Umgang mit einer älteren Codebasis, die noch nicht ganz auf die neuen Funktionen aktualisiert werden kann, und ich brauche immer noch einen transpilierten Server.

Ich habe die obigen Schritte durchgeführt, und sie lösen das Problem nicht. Ich verwende nicht einmal dynamische Importe :/

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

Ich habe dieses obige Problem möglicherweise gelöst, indem ich Knotenmodule rm-ing und neu installiert habe, aber möglicherweise nicht alles neu installiert habe, könnte ein bestimmtes Paket dies verursachen

Die letzten Lösungsschritte sollten rm package-lock.json und rm -rf node_modules sein und dann neu installieren.

Es ist wichtig zu beachten, dass dies nur in Next 9 behoben wird.

@Timer Ich führe [email protected] aus und habe immer noch das Problem. Ich habe es versucht:
1) als nächstes entfernen, Eichel mit yarn add acorn hinzufügen und dann yarn next@latest ausführen, ohne Erfolg
2) Entfernen aller node_modules und wool.lock und Neuinstallation. Hat noch jemand dieses Problem? Ich habe erst begonnen, es mit React-Datepicker zu erleben

@ Sm00g15 Es ist ziemlich schwierig, Ihnen zu helfen, wenn keine Reproduktion bereitgestellt wird. Vielleicht hast du Webpack manuell installiert?

Ich hatte das gleiche Problem, auch nach dem Aktualisieren webpack und @babel/core . Das Entfernen meiner package-lock.json und node_modules und eine Neuinstallation löste das Problem.

Danke, diese Lösung hat das Problem für mich gelöst. Ich hatte an einem anderen Node.js-Projekt (nicht Next.js) gearbeitet, bei dem ich meine Version von Node auf die neueste Version aktualisiert hatte - dies scheint die Ursache des Problems zu sein. Wo die Lösung, lock.json und node_modules zu entfernen, dann die Pakete neu zu installieren, funktionierte perfekt. Danke.

War diese Seite hilfreich?
0 / 5 - 0 Bewertungen