Next.js: 8.0.0 - importação dinâmica causando erro 'Você pode precisar de um carregador apropriado...'

Criado em 11 fev. 2019  ·  58Comentários  ·  Fonte: vercel/next.js

Relatório de erro

Acabei de atualizar para 8.0.0 e estou muito animado! Eu me deparei com um problema que está impedindo meu projeto de compilar

Descreva o erro

Então, quando executo dev , estou recebendo o seguinte problema

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

Parece estar vindo de webpack 4.29.0 ( veja aqui ).

Parece que o problema foi corrigido com isso que declarou acorn": "^6.0.5 como uma dependência, mas a alteração não parece estar presente no mestre

Talvez eu tenha atualizado muito cedo?

p0 upstream

Comentários muito úteis

Ok, aqui está o combo vencedor (certifique-se de que é 100% reproduzível):
Meu projeto já tinha a próxima v7

  1. npm install next@latest -> instala a próxima v8.0.1, mas avisa sobre bolota
  2. npm run dev -> é executado em seguida e falha com o erro descrito neste problema do git
  3. npm install acorn
  4. npm run dev -> é executado em seguida e falha com o erro descrito neste problema do git
  5. npm install next@latest -> sem avisos
  6. npm run dev funciona!!! 🎉

Conclusão
A chave é instalar acorn antes da próxima

Todos 58 comentários

Eu tenho o mesmo problema. Não é possível iniciar o modo de desenvolvimento. Atualizei o npm para a versão mais recente e também tentei instalar o pacote acorn, mas não adiantou.
@timneutkens

Eu tenho um erro diferente relacionado a importações que podem ter a mesma causa raiz:

/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

Está tudo bem se eu fizer o downgrade para [email protected]

@AndrewIngram você pode fornecer uma reprodução? curioso para olhar para aquele. Parece relacionado a @babel/runtime, não ao webpack.

Estou enfrentando o mesmo erro. Instalar acorn também não funciona para mim. FYI, eu uso ts-node para executar meu servidor expresso.

Para mim, isso foi corrigido atualizando @babel/core:

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

Por alguma razão, temos isso como dependência direta atualmente.

Experimentando o mesmo problema e mensagem de erro. @babel/core está definido como "7.2.2" então esse pode não ser o problema.

Também estamos vendo esse problema e seguimos os tópicos para uma solução alternativa.

  • A produção (com next build ) é construída e funciona bem.
  • A execução no modo de desenvolvimento produz o mesmo erro que o OP.
  • Invocamos o Next.js programaticamente (nós o usamos com o Express atualmente).
  • Atualizar @babel/core para 7.2.2 não resolveu isso para nós.

Seguindo os problemas vinculados no tópico e instalando [email protected] e @babel/[email protected] como devDependancies resolveram isso.

(Isso também resolveu o erro sobre o pacote Acorn, que não temos como dependência direta.)

Eu tive o mesmo problema, também depois de atualizar webpack e @babel/core . Remover meus package-lock.json e node_modules e fazer uma nova instalação resolveu o problema.

Mesmo problema aqui, infelizmente. Aqui está uma replicação: https://github.com/jescalan/nextjs-test/tree/je.canary

A compilação e exportação estáticas funcionam maravilhosamente, é apenas o modo dev que apresenta erros. Nem o babel nem o webpack são instalados como dependências.

Apenas corrigido com uma remoção de package-lock.json e regenerar. O último commit nesse branch mostra quais atualizações foram feitas em package-lock.json -- espero que isso ajude a identificar a causa!

A remoção de node_modules e package-lock.json e a reinstalação também resolveram isso para mim.

A exclusão de node_modules e package-lock.json não resolveu isso para mim, mas instalar [email protected] como uma dependência de desenvolvimento resolveu, como @iaincollins sugeriu.

Também enfrentando esse problema, mas fora deste pacote; Fazer o downgrade para uma versão inferior do nó (v9.11 [uma versão de trabalho dos colegas], instalar o [email protected] e reinstalar o node_modules corrigiu isso para mim.

Eu tenho um erro diferente relacionado a importações que podem ter a mesma causa raiz:

/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

Está tudo bem se eu fizer o downgrade para [email protected]

Enfrentando o mesmo problema que @AndrewIngram em um projeto complexo. O problema aparece apenas para [email protected] no modo dev, não ao compilar para produção.

Eu tive o mesmo problema. Removendo node_modules e package-lock.json e reinstalando _did_ corrigi-lo para mim. É importante remover o diretório e o arquivo de bloqueio antes de reinstalar, caso esse seja o problema que alguns estejam atingindo.

Eu tenho o mesmo comportamento em arquivos 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 é impossível resolver o problema sem uma reprodução clara. Forneça um para que possamos investigar mais 🙏

@icflorescu você poderia criar uma nova edição para ela (incluindo reprodução) porque não é igual a esta 🙏

@timneutkens Eu finalmente descobri ontem à noite que meu problema foi causado por # 6273.
Como mencionei nesse tópico, o erro desaparece se eu modificar minha predefinição next/babel para ['next/babel', { 'transform-runtime': { useESModules: false } }] .

EDIT: Acabei de publicar um repositório de teste, veja a discussão em # 6273.

No meu caso, uma simples reinstalação completa do diretório node_modules corrigiu esse problema. Pode estar relacionado às dependências internas dos módulos e aos módulos restantes.

Eu tenho o mesmo problema (também recebo o mesmo erro ao usar importações dinâmicas, escrevi sobre isso no Spectrum https://spectrum.chat/users/matthew-rapati?thread=c677c233-8b02-447f-aff0-97b3399a493f).

Tentei remover node_modules, package-lock.json e limpar meu cache npm, mas não resolveu o problema. Se tiver oportunidade, tentarei criar uma pequena reprodução da edição.

A instalação de acorn corrigiu esse problema para mim. Ele já está mesclado no canary, mas ainda não no master. https://github.com/zeit/next.js/pull/6137

Instalar acorn no Next.js não resolve o problema.

Onde eu trabalho, isso nos impactou ao tentar atualizar para o próximo 8.

Usar o Yarn para instalar dependências fez o truque para mim. Super estranho.

Ok, aqui está o combo vencedor (certifique-se de que é 100% reproduzível):
Meu projeto já tinha a próxima v7

  1. npm install next@latest -> instala a próxima v8.0.1, mas avisa sobre bolota
  2. npm run dev -> é executado em seguida e falha com o erro descrito neste problema do git
  3. npm install acorn
  4. npm run dev -> é executado em seguida e falha com o erro descrito neste problema do git
  5. npm install next@latest -> sem avisos
  6. npm run dev funciona!!! 🎉

Conclusão
A chave é instalar acorn antes da próxima

Então foi algum tipo de resolução de dependência? @vasco3 que resolveu meu problema.

Isso acontece para mim diretamente entre v8.0.0-canary.11 e 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] e @babel/[email protected] como devDependencies como @iaincollins sugeriu corrige isso para mim também.

ainda presente com o próximo 8.0.2. acorn precisa ser atualizado no package.json, ele corrige o problema

confirmado: 8.0.3 corrige este problema

O problema em execução dev ainda estava presente com o próximo 8.0.3 até que eu tentei a recomendação do @vasco3 e instalei o próximo APÓS acorn. Estranho...

Tem 8.0.3 rodando sem Acorn.

Parece que o NPM estava fazendo o cache em seguida incorretamente. Mesmo ao excluir minha pasta node_modules e package-lock executar novamente npm i o problema persistiria. Na verdade, usar o NPM CLI para desinstalar o próximo parece tê-lo removido do cache corretamente e, após uma reinstalação sem o Acorn, ele está funcionando.

O mesmo que @Soundvessel

A instalação de acorn antes next@8 corrigiu o problema.

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

@Magellol você tentou executar o modo dev após apenas npm ci . Se você vir meu segundo post, consegui executar o modo dev com 8.0.3 _without_ acorn depois de usar a linha de comando npm para desinstalar corretamente em seguida, porque acredito que uma versão em cache fora de node_modules estava causando o problema. npm ci ser uma instalação limpa pode resolver o problema sem ter que instalar/desinstalar pacotes individuais.

@Soundvessel Não parece estar funcionando se eu não instalar o bolota explicitamente.
Eu tentei todos os tipos de combinação com npm ci em diferentes estágios.

https://github.com/zeit/next.js/issues/6240#issuecomment -466549203 é a única maneira que eu poderia fazer funcionar. Também usar yarn corrige sem a necessidade de adicionar acorn explicitamente.

@vasco3 Sua solução funcionou para mim. Obrigado. :+1:

Para esclarecer, não precisei do Acorn para resolver o problema. Tente desinstalar Next usando a linha de comando em vez de apenas excluir node_modules .

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

Acredito que usar a linha de comando para desinstalar Next remove a causa do problema de um cache NPM fora de node_modules .

Eu também atualizei o Node e o NPM de antemão, mas isso não ajudou até que eu reinstalasse corretamente.

Tente remover seu diretório .next em vez de se preocupar com o cache npm.

Resolvi o problema:

  • bundleAnalyzer foi interrompido na importação dinâmica
    após a fixação,
  • os arquivos do pacote do servidor ficaram em .next/ causando import('./noop'); erro apesar de reinstalar
  • remover node_modules e .next

A execução next build pode fazer com que next dev falhe, mas funciona se você não executou next build primeiro:

  • Se você tiver um erro de importação dinâmica e limpar o projeto, execute next dev, você não verá o erro
  • Se você tiver um erro de importação dinâmica e limpar o projeto, execute next build , execute next dev, você verá o erro

O erro apareceu novamente após atualizar alguns outros módulos.

Eu deletei /.next , / node_modules , package-lock.json e /npm-cache/ na minha pasta de usuário e executei novamente npm i e o erro persistiu.

Desisti e adicionei acorn às minhas dependências para evitar o erro.

Obtendo a versão "iteradora" deste erro. Nenhuma das opções acima ajudou:

/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) o server.js mais básico com módulos ES.

2) .babelrc:

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

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

E então

$ babel-node server.js

produz o erro acima. Portanto, nem é uma importação dinâmica, no meu caso, os módulos ES pararam de funcionar totalmente com o NextJS. @timneutkens Posso fazer upload de um repositório de demonstração se puder ajudar.

@ivan-kleshnin esse é outro problema: # 6273 que é corrigido no canário.

Eu tentei apenas remover o diretório package-lock.json e node_modules, mas isso não funcionou para mim. A solução para mim foi mudar para o fio:

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

O erro acabou!

Eu tive o mesmo erro ao tentar executar o projeto em https://github.com/zeit/next-learn-demo/tree/master/E2-lazy-loading-modules. Depois de fazer uma instalação npm dev do [email protected] , ele começou a funcionar novamente.

@vasco3 Muito obrigado! Funciona para mim:

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

Eu usei o Yarn para instalar dependências também e funciona)

Ok, aqui está o combo vencedor (certifique-se de que é 100% reproduzível):
Meu projeto já tinha a próxima v7

  • npm install next@latest -> instala a próxima v8.0.1, mas avisa sobre bolota
  • npm run dev -> é executado em seguida e falha com o erro descrito neste problema do git
  • npm install acorn
  • npm run dev -> é executado em seguida e falha com o erro descrito neste problema do git
  • npm install next@latest -> sem avisos
  • npm run dev funciona!!! 🎉

Conclusão:
A chave é instalar acorn antes da próxima

obrigado! prova mais uma vez que a ordem importa! me salvou.

Ok, aqui está o combo vencedor (certifique-se de que é 100% reproduzível):
Meu projeto já tinha a próxima v7

  • npm install next@latest -> instala a próxima v8.0.1, mas avisa sobre bolota
  • npm run dev -> é executado em seguida e falha com o erro descrito neste problema do git
  • npm install acorn
  • npm run dev -> é executado em seguida e falha com o erro descrito neste problema do git
  • npm install next@latest -> sem avisos
  • npm run dev funciona!!! tada

Conclusão:
A chave é instalar acorn antes da próxima

Isso resolveu o problema para mim também, obrigado! :aplaudir:

Ok, aqui está o combo vencedor (certifique-se de que é 100% reproduzível):
Meu projeto já tinha a 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!!! 🎉

Conclusão:
A chave é instalar acorn antes da próxima

Muito obrigado, isso resolveu o problema. 👏👏

Isso será corrigido no ramo canário em breve?

@TidyIQ , tentaremos corrigi-lo em breve! É importante notar que este é um bug do npm .

@Timer webpack já corrigiu este problema veja https://github.com/webpack/webpack/pull/9370

Isso não parece resolver o problema para mim. Lidar com uma base de código mais antiga que ainda não pode atualizar para os novos recursos e ainda preciso de um servidor transpilado.

Já fiz os passos acima e não resolvem o problema. Eu nem estou usando importações 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

Eu posso ter resolvido este problema acima rm-ing node-modules e reinstalando, mas talvez não reinstalando tudo, pode haver um pacote específico que está causando isso

As etapas finais de resolução devem ser rm package-lock.json e rm -rf node_modules e reinstalar.

É importante observar que isso só é corrigido no Next 9 .

@Timer Estou executando o [email protected] e ainda estou com o problema. Eu tentei:
1) removendo em seguida, adicionando bolota com yarn add acorn e depois executando yarn next@latest sem sucesso
2) removendo todos os node_modules e yarn.lock e reinstalando. Alguém mais ainda está vendo esse problema? Eu apenas comecei a experimentá-lo com react-datepicker

@Sm00g15 é muito difícil ajudá-lo quando uma reprodução não é fornecida. Talvez você instalou o webpack manualmente?

Eu tive o mesmo problema, também depois de atualizar webpack e @babel/core . Remover meus package-lock.json e node_modules e fazer uma nova instalação resolveu o problema.

Obrigado, esta solução resolveu o problema para mim. Eu estava trabalhando em outro projeto Node.js (não Next.js) onde eu atualizei minha versão do Node para a mais recente - essa parece ser a causa do problema. Onde a solução para remover o lock.json e node_modules, depois reinstalar os pacotes funcionou perfeitamente. Obrigado.

Esta página foi útil?
0 / 5 - 0 avaliações

Questões relacionadas

havefive picture havefive  ·  3Comentários

wagerfield picture wagerfield  ·  3Comentários

olifante picture olifante  ·  3Comentários

renatorib picture renatorib  ·  3Comentários

knipferrc picture knipferrc  ·  3Comentários