Next.js: 8.0.0 - importation dynamique provoquant l'erreur "Vous avez peut-être besoin d'un chargeur approprié..."

Créé le 11 févr. 2019  ·  58Commentaires  ·  Source: vercel/next.js

Rapport d'erreur

Je viens de passer à la version 8.0.0 et je suis vraiment excité ! J'ai rencontré un problème qui empêche la compilation de mon projet

Décrivez le bogue

Ainsi, lorsque je lance dev , je reçois le problème suivant

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

Il semble provenir de webpack 4.29.0 ( voir ici ).

Il semble que le problème ait été résolu avec this qui a déclaré acorn": "^6.0.5 comme dépendance mais le changement ne semble pas être présent sur master

Peut-être ai-je fait la mise à jour trop tôt ?

p0 upstream

Commentaire le plus utile

Ok, voici le combo gagnant (assurez-vous qu'il est reproductible à 100%) :
Mon projet avait déjà la prochaine v7

  1. npm install next@latest -> installe la prochaine v8.0.1 mais met en garde contre le gland
  2. npm run dev -> s'exécute ensuite et échoue avec l'erreur décrite dans ce problème git
  3. npm install acorn
  4. npm run dev -> s'exécute ensuite et échoue avec l'erreur décrite dans ce problème git
  5. npm install next@latest -> aucun avertissement
  6. npm run dev ça marche !!! 🎉

Conclusion
La clé est d'installer le gland avant la prochaine

Tous les 58 commentaires

J'ai le même problème. Impossible de démarrer le mode développement. J'ai mis à jour npm vers la dernière version et j'ai également essayé d'installer le paquet acorn, mais cela n'a pas aidé.
@timneutkens

J'ai une autre erreur liée aux importations qui pourrait avoir la même cause première :

/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

Tout va bien si je rétrograde à [email protected]

@AndrewIngram pouvez-vous fournir une reproduction ? curieux de se pencher sur celui-là. Cela semble lié à @babel/runtime, pas à webpack.

Je suis confronté à la même erreur. L'installation acorn ne fonctionne pas non plus pour moi. Pour votre information, j'utilise ts-node pour faire fonctionner mon serveur express.

Pour moi, cela a été corrigé en mettant à niveau @babel/core :

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

Pour une raison quelconque, nous avons actuellement cela comme dépendance directe.

Même problème et message d'erreur. @babel/core est défini sur "7.2.2" donc ce n'est peut-être pas le problème.

Nous voyons également ce problème et avons suivi les discussions pour une solution de contournement.

  • La production (avec next build ) se construit et fonctionne correctement.
  • L'exécution en mode développement produit la même erreur que OP.
  • Nous invoquons Next.js par programme (nous l'utilisons actuellement avec Express).
  • La mise à jour de @babel/core vers la version 7.2.2 n'a pas résolu ce problème pour nous.

Suite aux problèmes liés dans le fil et l'installation [email protected] et @babel/[email protected] en tant que devDependancies a résolu ce problème.

(Cela a également résolu l'erreur concernant le package Acorn, que nous n'avons pas en tant que dépendance directe.)

J'ai eu le même problème, également après la mise à jour webpack et @babel/core . La suppression de mes package-lock.json et node_modules et une nouvelle installation ont résolu le problème.

Même problème ici, malheureusement. Voici une réplication : https://github.com/jescalan/nextjs-test/tree/je.canary

La construction et l'exportation statiques fonctionnent à merveille, c'est juste le mode de développement qui génère des erreurs. Ni babel ni webpack ne sont installés en tant que dépendances.

Juste corrigé avec une suppression de package-lock.json et régénéré. Le dernier commit sur cette branche montre quelles mises à jour ont été apportées à package-lock.json -- espérons que cela aide à identifier la cause !

La suppression node_modules et package-lock.json puis la réinstallation ont également résolu ce problème pour moi.

La suppression node_modules et package-lock.json n'a pas résolu ce problème pour moi, mais l'installation [email protected] en tant que dépendance de développement l'a fait, comme l'a suggéré @iaincollins .

Vous rencontrez également ce problème mais en dehors de ce package ; La rétrogradation vers une version inférieure de node (v9.11 [une version de travail de collègues], l'installation de [email protected] et la réinstallation de node_modules ont résolu ce problème pour moi.

J'ai une autre erreur liée aux importations qui pourrait avoir la même cause première :

/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

Tout va bien si je rétrograde à [email protected]

Confronté au même problème que @AndrewIngram sur un projet complexe. Le problème n'apparaît que pour [email protected] en mode dev, pas lors de la compilation pour la production.

J'ai rencontré le même problème. Supprimer à la fois node_modules et package-lock.json et réinstaller _did_ le corrige pour moi. Il est important de supprimer à la fois le répertoire et le fichier de verrouillage avant de réinstaller, juste au cas où c'est le problème que certains rencontrent.

J'ai le même comportement dans les fichiers 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 il est impossible de résoudre le problème sans une reproduction claire. Veuillez en fournir un afin que nous puissions enquêter plus avant 🙏

@icflorescu pourriez-vous lui créer un nouveau numéro (y compris la reproduction) car ce n'est pas le même que celui-ci 🙏

@timneutkens J'ai finalement découvert hier soir que mon problème était causé par #6273.
Comme je l'ai mentionné dans ce fil, l'erreur disparaît si je modifie mon préréglage next/babel en ['next/babel', { 'transform-runtime': { useESModules: false } }] .

EDIT : Je viens de publier un rapport de test, voir la discussion dans # 6273.

Dans mon cas, une simple réinstallation complète du répertoire node_modules a résolu ce problème. Cela peut être lié aux dépendances internes des modules et aux modules restants.

J'ai le même problème (j'obtiens également la même erreur lors de l'utilisation d'importations dynamiques, j'en ai parlé sur Spectrum https://spectrum.chat/users/matthew-rapati?thread=c677c233-8b02-447f-aff0-97b3399a493f).

J'ai essayé de supprimer node_modules, package-lock.json et de vider mon cache npm, mais cela n'a pas résolu le problème. Si j'en ai l'occasion, j'essaierai de créer une petite reproduction du problème.

L'installation acorn a résolu ce problème pour moi. Il est déjà fusionné sur canary mais pas encore sur master. https://github.com/zeit/next.js/pull/6137

L'installation d'acorn dans Next.js ne résout pas le problème.

Là où je travaille, cela nous a eu un impact lorsque nous avons essayé de passer à la version 8 suivante.

L'utilisation de Yarn pour installer des dépendances a fait l'affaire pour moi. Hyper bizarre.

Ok, voici le combo gagnant (assurez-vous qu'il est reproductible à 100%) :
Mon projet avait déjà la prochaine v7

  1. npm install next@latest -> installe la prochaine v8.0.1 mais met en garde contre le gland
  2. npm run dev -> s'exécute ensuite et échoue avec l'erreur décrite dans ce problème git
  3. npm install acorn
  4. npm run dev -> s'exécute ensuite et échoue avec l'erreur décrite dans ce problème git
  5. npm install next@latest -> aucun avertissement
  6. npm run dev ça marche !!! 🎉

Conclusion
La clé est d'installer le gland avant la prochaine

Était-ce donc une sorte de résolution de dépendance? @ vasco3 qui a résolu mon problème.

Cela se produit pour moi directement entre v8.0.0-canary.11 et v8.0.0-canary.12 https://github.com/zeit/next.js/compare/v8.0.0-canary.11...v8.0.0-canary .12

L'installation [email protected] et @babel/[email protected] en tant que devDependencies comme suggéré par @iaincollins corrige cela pour moi également.

toujours présent avec la prochaine version 8.0.2. acorn doit être mis à jour dans package.json, cela résout le problème

confirmé : 8.0.3 corrige ce problème

Le problème d'exécution du dev était toujours présent avec la version 8.0.3 suivante jusqu'à ce que j'essaie la recommandation de @ vasco3 et que j'installe le prochain gland APRÈS. Étrange...

Vous avez 8.0.3 en cours d'exécution sans Acorn.

Il semble que NPM ne mette pas correctement en cache ensuite. Même en supprimant mon dossier node_modules et en réexécutant package-lock npm i , le problème persistait. En fait, l'utilisation de la CLI NPM pour la désinstallation suivante semble l'avoir supprimée correctement du cache et après une réinstallation sans Acorn, elle est opérationnelle.

Identique à @Soundvessel

L'installation acorn avant next@8 a résolu le problème.

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

@Magelol avez-vous essayé d'exécuter le mode de développement après seulement le npm ci . Si vous voyez mon deuxième message, j'ai pu exécuter le mode de développement avec 8.0.3 _sans_ acorn après avoir utilisé la ligne de commande npm pour désinstaller correctement ensuite, car je pense qu'une version mise en cache en dehors de node_modules était à l'origine du problème. npm ci étant une installation propre peut résoudre le problème sans avoir à installer/désinstaller des packages individuels.

@Soundvessel Ne semble pas fonctionner si je n'installe pas explicitement Acorn.
J'ai essayé toutes sortes de combos avec npm ci à différentes étapes.

https://github.com/zeit/next.js/issues/6240#issuecomment -466549203 est la seule façon dont j'aurais pu le faire fonctionner. Utiliser également yarn corrige sans avoir besoin d'ajouter acorn explicitement.

@ vasco3 Votre solution a fonctionné pour moi. Merci. :+1:

Pour clarifier, je n'avais pas besoin d'Acorn pour résoudre le problème. Essayez de désinstaller Next en utilisant la ligne de commande au lieu de simplement supprimer node_modules .

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

Je pense que l'utilisation de la ligne de commande pour désinstaller Next supprime la cause des problèmes d'un cache NPM en dehors de node_modules .

J'ai également mis à jour Node et NPM au préalable, mais cela n'a pas aidé tant que je n'ai pas réinstallé correctement.

Essayez de supprimer votre répertoire .next au lieu de vous soucier du cache npm.

J'ai résolu le problème :

  • bundleAnalyzer a été interrompu lors de l'importation dynamique
    après fixation,
  • les fichiers du bundle du serveur sont restés dans .next/ provoquant import('./noop'); erreur malgré la réinstallation
  • supprimer node_modules et .next

L'exécution next build peut entraîner l'échec du développement de next , mais cela fonctionne si vous n'avez pas exécuté next build en premier :

  • Si vous avez une erreur d'importation dynamique et que vous nettoyez le projet, puis exécutez next dev, vous ne verrez pas l'erreur
  • Si vous avez une erreur d'importation dynamique et que vous nettoyez le projet, puis exécutez next build , puis exécutez next dev, vous verrez l'erreur

L'erreur est réapparue après la mise à jour d'autres modules.

J'ai supprimé /.next , / node_modules , package-lock.json et /npm-cache/ dans mon dossier utilisateur, puis j'ai réexécuté npm i et l'erreur a persisté.

A abandonné et ajouté acorn à mes dépendances pour éviter l'erreur.

Obtenir la version "itérateur" de cette erreur. Rien de ce qui précède n'a aidé :

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

Conditions requises :

1) le server.js le plus basique avec les modules ES.

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",
  }
}

Et alors

$ babel-node server.js

produit l'erreur ci-dessus. Ce n'est donc même pas une importation dynamique, dans mon cas, les modules ES ont complètement cessé de fonctionner avec NextJS. @timneutkens Je peux télécharger un dépôt de démonstration si cela peut aider.

@ivan-kleshnin c'est un autre problème : #6273 qui est corrigé sur canary.

J'ai essayé de supprimer simplement le répertoire package-lock.json et node_modules, mais cela n'a pas fonctionné pour moi. La solution pour moi était de passer au fil:

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

L'erreur a disparu !

J'ai eu la même erreur lors de l'exécution en essayant d'exécuter le projet dans https://github.com/zeit/next-learn-demo/tree/master/E2-lazy-loading-modules. Après avoir effectué une installation de développement npm de [email protected] , il a recommencé à fonctionner.

@vasco3 Grand merci ! Ça marche pour moi:

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

J'ai également utilisé Yarn pour installer des dépendances et cela fonctionne)

Ok, voici le combo gagnant (assurez-vous qu'il est reproductible à 100%) :
Mon projet avait déjà la prochaine v7

  • npm install next@latest -> installe la prochaine v8.0.1 mais met en garde contre le gland
  • npm run dev -> s'exécute ensuite et échoue avec l'erreur décrite dans ce problème git
  • npm install acorn
  • npm run dev -> s'exécute ensuite et échoue avec l'erreur décrite dans ce problème git
  • npm install next@latest -> aucun avertissement
  • npm run dev ça marche !!! 🎉

Conclusion:
La clé est d'installer le gland avant la prochaine

Merci! prouve une fois de plus que l'ordre compte ! m'a sauvé.

Ok, voici le combo gagnant (assurez-vous qu'il est reproductible à 100%) :
Mon projet avait déjà la prochaine v7

  • npm install next@latest -> installe la prochaine v8.0.1 mais met en garde contre le gland
  • npm run dev -> s'exécute ensuite et échoue avec l'erreur décrite dans ce problème git
  • npm install acorn
  • npm run dev -> s'exécute ensuite et échoue avec l'erreur décrite dans ce problème git
  • npm install next@latest -> aucun avertissement
  • npm run dev ça marche !!! tada

Conclusion:
La clé est d'installer le gland avant la prochaine

Cela a résolu le problème pour moi aussi, merci! :taper:

Ok, voici le combo gagnant (assurez-vous qu'il est reproductible à 100%) :
Mon projet avait déjà la prochaine 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!!! 🎉

Conclusion:
La clé est d'installer le gland avant la prochaine

Merci beaucoup, cela a résolu le problème. 👏👏

Cela sera-t-il bientôt corrigé dans la branche canarienne ?

@TidyIQ nous essaierons de le réparer bientôt ! Il est important de noter qu'il s'agit d'un bogue npm .

@Timer webpack a déjà résolu ce problème voir https://github.com/webpack/webpack/pull/9370

Cela ne semble pas résoudre le problème pour moi. Traiter avec une base de code plus ancienne qui ne peut pas encore tout à fait passer aux nouvelles fonctionnalités, et j'ai toujours besoin d'un serveur transpilé.

J'ai suivi les étapes ci-dessus et elles ne résolvent pas le problème. Je n'utilise même pas les importations dynamiques :/

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

J'ai peut-être résolu ce problème ci-dessus en rm-ing node-modules et en réinstallant, mais peut-être en ne réinstallant pas tout, il pourrait y avoir un paquet spécifique qui en est la cause

Les étapes de résolution finales doivent consister à rm package-lock.json et rm -rf node_modules , puis à réinstaller.

Il est important de noter que cela n'est corrigé que dans Next 9 .

@Timer J'utilise [email protected] et j'ai toujours le problème. J'ai essayé:
1) supprimer ensuite, ajouter un gland avec yarn add acorn puis exécuter yarn next@latest en vain
2) supprimer tous les node_modules et yarn.lock et les réinstaller. Quelqu'un d'autre voit-il encore ce problème ? Je viens seulement de commencer à l'expérimenter avec react-datepicker

@Sm00g15 c'est assez difficile de t'aider quand une reproduction n'est pas fournie. Peut-être avez-vous installé Webpack manuellement ?

J'ai eu le même problème, également après la mise à jour webpack et @babel/core . La suppression de mes package-lock.json et node_modules et une nouvelle installation ont résolu le problème.

Merci, cette solution a résolu le problème pour moi. J'avais travaillé sur un autre projet Node.js (pas Next.js) où j'avais mis à jour ma version de Node vers la dernière - cela semble être la cause du problème. Où la solution pour supprimer les lock.json et node_modules, puis réinstaller les packages a parfaitement fonctionné. Merci.

Cette page vous a été utile?
0 / 5 - 0 notes

Questions connexes

wagerfield picture wagerfield  ·  3Commentaires

swrdfish picture swrdfish  ·  3Commentaires

rauchg picture rauchg  ·  3Commentaires

jesselee34 picture jesselee34  ·  3Commentaires

formula349 picture formula349  ·  3Commentaires