Next.js: 8.0.0: importación dinámica que provoca el error "Puede que necesite un cargador adecuado..."

Creado en 11 feb. 2019  ·  58Comentarios  ·  Fuente: vercel/next.js

Informe de error

¡Acabo de actualizar a 8.0.0 y estoy muy emocionado! Sin embargo, me encontré con un problema que impide que mi proyecto se compile

Describa el error

Así que cuando ejecuto dev obtengo el siguiente problema

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

Parece provenir de webpack 4.29.0 ( ver aquí ).

Parece que el problema se solucionó con esto que declaró acorn": "^6.0.5 como una dependencia pero el cambio no parece estar presente en el maestro

¿Quizás actualicé demasiado pronto?

p0 upstream

Comentario más útil

Ok, aquí está el combo ganador (asegurado de que sea 100% reproducible):
Mi proyecto ya tenía la próxima v7

  1. npm install next@latest -> instala la siguiente v8.0.1 pero advierte sobre bellota
  2. npm run dev -> se ejecuta a continuación y falla con el error descrito en este problema de git
  3. npm install acorn
  4. npm run dev -> se ejecuta a continuación y falla con el error descrito en este problema de git
  5. npm install next@latest -> sin advertencias
  6. npm run dev funciona!!! 🎉

Conclusión
La clave es instalar bellota antes del siguiente

Todos 58 comentarios

Tengo el mismo problema. No se puede iniciar el modo de desarrollo. Actualicé npm a la última versión y también intenté instalar el paquete acorn, pero no funcionó.
@timneutkens

Tengo un error diferente relacionado con las importaciones que podría tener la misma causa principal:

/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

Todo está bien si cambio a [email protected]

@AndrewIngram , ¿puede proporcionar una reproducción? curiosidad por mirar en eso. Suena relacionado con @babel/runtime, no con webpack.

Estoy enfrentando el mismo error. Instalar acorn tampoco me funciona. FYI, uso ts-node para ejecutar mi servidor express.

Para mí, esto se solucionó actualizando @babel/core:

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

Por alguna razón tenemos eso como dependencia directa actualmente.

Experimentando el mismo problema y mensaje de error. @babel/core está configurado en "7.2.2" por lo que puede que ese no sea el problema.

También estamos viendo este problema y seguimos los hilos para encontrar una solución.

  • La producción (con next build ) se construye y funciona bien.
  • Ejecutar en modo de desarrollo produce el mismo error que OP.
  • Invocamos Next.js mediante programación (actualmente lo usamos con Express).
  • Actualizar @babel/core a 7.2.2 no resolvió esto para nosotros.

Siguiendo los problemas vinculados en el hilo e instalando [email protected] y @babel/[email protected] como devDependancy resolvió esto.

(Esto también resolvió el error sobre el paquete Acorn, que no tenemos como dependencia directa).

Tuve el mismo problema, también después de actualizar webpack y @babel/core . Eliminar mi package-lock.json y node_modules y hacer una instalación nueva resolvió el problema.

El mismo problema aquí, desafortunadamente. Aquí hay una réplica: https://github.com/jescalan/nextjs-test/tree/je.canary

La compilación y exportación estática funciona de maravilla, es solo el modo de desarrollo el que falla. Ni babel ni webpack están instalados como dependencias.

Acabo de arreglar con una eliminación de package-lock.json y regenerar. La última confirmación en esa rama muestra qué actualizaciones se realizaron en package-lock.json ; ¡esperemos que esto ayude a determinar la causa!

Quitar node_modules y package-lock.json y luego reinstalar resolvió esto también para mí.

La eliminación node_modules y package-lock.json no me resolvió esto, pero la instalación [email protected] como una dependencia de desarrollo sí lo hizo, como sugirió @iaincollins .

También experimenta este problema pero fuera de este paquete; Bajar a una versión inferior de nodo (v9.11 [una versión de trabajo de colegas], instalar [email protected] y reinstalar node_modules me solucionó esto.

Tengo un error diferente relacionado con las importaciones que podría tener la misma causa principal:

/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

Todo está bien si cambio a [email protected]

Enfrentando el mismo problema que @AndrewIngram en un proyecto complejo. El problema solo aparece para [email protected] en modo de desarrollo, no cuando se compila para producción.

Me encontré con el mismo problema. Eliminando tanto node_modules como package-lock.json y reinstalando _did_ me lo arregló. Es importante eliminar tanto el directorio como el archivo de bloqueo antes de volver a instalar, en caso de que ese sea el problema que algunos están experimentando.

Tengo el mismo comportamiento en los archivos 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 es imposible resolver el problema sin una reproducción clara. Proporcione uno para que podamos investigar más a fondo 🙏

@icflorescu podrías crearle un nuevo número (incluida la reproducción) porque no es igual a este 🙏

@timneutkens Finalmente descubrí anoche que mi problema fue causado por #6273.
Como mencioné en ese hilo, el error desaparece si modifico mi next/babel preestablecido a ['next/babel', { 'transform-runtime': { useESModules: false } }] .

EDITAR: acabo de publicar un repositorio de prueba, vea la discusión en #6273.

En mi caso, una simple reinstalación completa del directorio node_modules solucionó este problema. Podría estar relacionado con las dependencias internas de los módulos y los módulos sobrantes.

Tengo el mismo problema (también recibo el mismo error cuando utilizo importaciones dinámicas, escribí al respecto en Spectrum https://spectrum.chat/users/matthew-rapati?thread=c677c233-8b02-447f-aff0-97b3399a493f).

Intenté eliminar node_modules, package-lock.json y borrar mi caché npm, pero no resolvió el problema. Si tengo la oportunidad, intentaré crear una pequeña reproducción del problema.

La instalación acorn me solucionó este problema. Ya está fusionado en Canary pero aún no en Master. https://github.com/zeit/next.js/pull/6137

Instalar bellota en Next.js no resuelve el problema.

Donde trabajo, esto nos ha impactado cuando intentamos actualizar a los próximos 8.

Usar Yarn para instalar dependencias fue el truco para mí. Súper raro.

Ok, aquí está el combo ganador (asegurado de que sea 100% reproducible):
Mi proyecto ya tenía la próxima v7

  1. npm install next@latest -> instala la siguiente v8.0.1 pero advierte sobre bellota
  2. npm run dev -> se ejecuta a continuación y falla con el error descrito en este problema de git
  3. npm install acorn
  4. npm run dev -> se ejecuta a continuación y falla con el error descrito en este problema de git
  5. npm install next@latest -> sin advertencias
  6. npm run dev funciona!!! 🎉

Conclusión
La clave es instalar bellota antes del siguiente

Entonces, ¿fue algún tipo de resolución de dependencia? @ vasco3 que resolvió mi problema.

Esto me sucede directamente entre v8.0.0-canary.11 y v8.0.0-canary.12 https://github.com/zeit/next.js/compare/v8.0.0-canary.11...v8.0.0-canary .12

Instalar [email protected] y @babel/[email protected] como devDependencies como sugirió @iaincollins también me soluciona esto.

todavía presente con el próximo 8.0.2. acorn necesita actualizarse en package.json, soluciona el problema

confirmado: 8.0.3 soluciona este problema

El problema de ejecución del desarrollo aún estaba presente con el próximo 8.0.3 hasta que probé la recomendación de @vasco3 e instalé el siguiente DESPUÉS de la bellota. Extraño...

Tengo 8.0.3 ejecutándose sin Acorn.

Parece que NPM estaba almacenando en caché de forma incorrecta. Incluso cuando borraba mi carpeta node_modules y package-lock volvía a ejecutar npm i el problema persistía. En realidad, el uso de la CLI de NPM para desinstalar a continuación parece haberlo eliminado de la memoria caché correctamente y, después de una reinstalación sin Acorn, está en funcionamiento.

Igual que @Soundvessel

Instalar acorn antes next@8 solucionó el problema.

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

@Magellol , ¿intentó ejecutar el modo de desarrollo después de solo npm ci ? Si ve mi segunda publicación, pude ejecutar el modo dev con 8.0.3 _sin_acorn después de usar la línea de comando npm para desinstalar correctamente a continuación porque creo que una versión en caché fuera de node_modules estaba causando el problema. npm ci ser una instalación limpia podría resolver el problema sin tener que instalar/desinstalar paquetes individuales.

@Soundvessel No parece funcionar si no instalo acorn explícitamente.
He probado todo tipo de combos con npm ci en diferentes etapas.

https://github.com/zeit/next.js/issues/6240#issuecomment -466549203 es la única forma en que podría haberlo hecho funcionar. También usando yarn lo arregla sin necesidad de agregar acorn explícitamente.

@ vasco3 Tu solución funcionó para mí. Gracias. :+1:

Para aclarar, no necesitaba Acorn para resolver el problema. Intente desinstalar Next usando la línea de comandos en lugar de simplemente eliminar node_modules .

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

Creo que usar la línea de comando para desinstalar Next elimina la causa del problema de un caché NPM fuera de node_modules .

También actualicé Node y NPM de antemano, pero eso no ayudó hasta que reinstalé correctamente.

Intente eliminar su directorio .next en lugar de preocuparse por el caché de npm.

Resolví el problema:

  • bundleAnalyzer se rompió de la importación dinámica
    después de arreglar,
  • los archivos del paquete del servidor quedaron en .next/ causando import('./noop'); error a pesar de reinstalar
  • quitar node_modules y .next

Ejecutar next build puede hacer que el desarrollo next falle, pero funciona si no ejecutó next build primero:

  • Si tiene un error de importación dinámica y limpia el proyecto, luego ejecuta next dev, no verá el error
  • Si tiene un error de importación dinámica y limpia el proyecto, luego ejecuta next build , luego ejecuta next dev, verá el error

El error apareció nuevamente después de actualizar algunos otros módulos.

Eliminé /.next , / node_modules , package-lock.json y /npm-cache/ en mi carpeta de usuario, luego volví a ejecutar npm i y el error persistió.

Me rendí y agregué acorn a mis dependencias para evitar el error.

Obteniendo la versión "iterador" de este error. Nada de lo anterior ayudó:

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

Requisitos:

1) el server.js más básico con módulos ES.

2) .babelrc:

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

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

Y luego

$ babel-node server.js

produce el error anterior. Entonces, ni siquiera es una importación dinámica, en mi caso, los módulos ES dejaron de funcionar con NextJS por completo. @timneutkens Puedo subir un repositorio de demostración si puede ayudar.

@ ivan-kleshnin, ese es otro problema: # 6273 que se corrigió en Canary.

Intenté simplemente eliminar el directorio package-lock.json y node_modules, pero eso no funcionó para mí. La solución para mí fue cambiar a hilo:

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

¡El error se ha ido!

Tuve el mismo error al intentar ejecutar el proyecto en https://github.com/zeit/next-learn-demo/tree/master/E2-lazy-loading-modules. Después de realizar una instalación de desarrollo de npm de [email protected] , comenzó a funcionar nuevamente.

@vasco3 ¡Muchas gracias! Esto funciona para mi:

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

Usé Yarn para instalar dependencias también y funciona)

Ok, aquí está el combo ganador (asegurado de que sea 100% reproducible):
Mi proyecto ya tenía la próxima v7

  • npm install next@latest -> instala la siguiente v8.0.1 pero advierte sobre bellota
  • npm run dev -> se ejecuta a continuación y falla con el error descrito en este problema de git
  • npm install acorn
  • npm run dev -> se ejecuta a continuación y falla con el error descrito en este problema de git
  • npm install next@latest -> sin advertencias
  • npm run dev funciona!!! 🎉

Conclusión:
La clave es instalar bellota antes del siguiente

¡Gracias! demuestra una vez más que el orden importa! me salvó.

Ok, aquí está el combo ganador (asegurado de que sea 100% reproducible):
Mi proyecto ya tenía la próxima v7

  • npm install next@latest -> instala la siguiente v8.0.1 pero advierte sobre bellota
  • npm run dev -> se ejecuta a continuación y falla con el error descrito en este problema de git
  • npm install acorn
  • npm run dev -> se ejecuta a continuación y falla con el error descrito en este problema de git
  • npm install next@latest -> sin advertencias
  • npm run dev funciona!!! tada

Conclusión:
La clave es instalar bellota antes del siguiente

Esto solucionó el problema para mí también, ¡gracias! :aplaudir:

Ok, aquí está el combo ganador (asegurado de que sea 100% reproducible):
Mi proyecto ya tenía la próxima 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!!! 🎉

Conclusión:
La clave es instalar bellota antes del siguiente

Muchas gracias, esto solucionó el problema. 👏👏

¿Se solucionará esto en el ramo canario en el corto plazo?

@TidyIQ ¡intentaremos solucionarlo pronto! Es importante tener en cuenta que este es un error de npm .

@Timer webpack ya solucionó este problema, consulte https://github.com/webpack/webpack/pull/9370

Esto no parece solucionar el problema para mí. Lidiando con una base de código más antigua que aún no puede actualizarse a las nuevas funciones, y todavía necesito un servidor transpilado.

He realizado los pasos anteriores y no resuelven el problema. Ni siquiera estoy usando importaciones dinámicas:/

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

Es posible que haya resuelto este problema anterior mediante la activación de módulos de nodo y la reinstalación, pero tal vez no reinstale todo, podría haber un paquete específico que está causando esto

Los pasos finales de resolución deben ser rm package-lock.json y rm -rf node_modules , luego reinstalar.

Es importante tener en cuenta que esto solo se corrige en Next 9 .

@Timer Estoy ejecutando [email protected] y sigo teniendo el problema. He intentado:
1) eliminar a continuación, agregar bellota con yarn add acorn y luego ejecutar yarn next@latest en vano
2) eliminando todos los node_modules e yarn.lock y reinstalando. ¿Alguien más sigue viendo este problema? Recién comencé a experimentarlo con react-datepicker

@ Sm00g15 es bastante difícil ayudarlo cuando no se proporciona una reproducción. ¿Quizás instaló el paquete web manualmente?

Tuve el mismo problema, también después de actualizar webpack y @babel/core . Eliminar mi package-lock.json y node_modules y hacer una instalación nueva resolvió el problema.

Gracias, esta solución me solucionó el problema. Estuve trabajando en otro proyecto de Node.js (no Next.js) en el que actualicé mi versión de Node a la última; esta parece ser la causa del problema. Donde la solución para eliminar lock.json y node_modules, luego reinstalar los paquetes funcionó perfectamente. Gracias.

¿Fue útil esta página
0 / 5 - 0 calificaciones