Next.js: 8.0.0 - динамический импорт вызывает ошибку "Вам может понадобиться соответствующий загрузчик..."

Созданный на 11 февр. 2019  ·  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 , можете ли вы предоставить репродукцию? любопытно заглянуть в тот. Это похоже на @babel/runtime, а не на webpack.

Я сталкиваюсь с той же ошибкой. Установка 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 не решило эту проблему.

После проблем, связанных в потоке, и установки [email protected] и @babel/[email protected] , поскольку devDependancies действительно решили эту проблему.

(Это также устранило ошибку с пакетом 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 не помогло мне решить эту проблему, но установка [email protected] в качестве зависимости от разработчиков помогла, как предложил @iaincollins .

Также возникает эта проблема, но за пределами этого пакета; Переход на более раннюю версию узла (v9.11 [рабочая версия коллеги], установка [email protected] и переустановка 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. Это может быть связано с внутренними зависимостями модулей и оставшимися модулями.

У меня такая же проблема (такая же ошибка при динамическом импорте, я писал об этом на Спектруме https://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

Установка acorn в Next.js не решает проблему.

Там, где я работаю, это повлияло на нас, когда мы пытались перейти на следующую версию 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

Установка [email protected] и @babel/[email protected] в качестве devDependencies, как предложил @iaincollins , также исправляет это для меня.

все еще присутствует в следующем 8.0.2. acorn необходимо обновить в package.json, это устраняет проблему

подтверждено: 8.0.3 исправляет эту проблему

Проблема с запуском dev все еще присутствовала в следующем 8.0.3, пока я не попробовал рекомендацию @vasco3 и не установил следующий ПОСЛЕ желудя. Странный...

Получил 8.0.3 без Acorn.

Похоже, что NPM кэшировал следующее неправильно. Даже при удалении моей папки node_modules и повторном запуске $# package-lock npm i проблема сохранялась. На самом деле использование NPM CLI для удаления затем, по-видимому, правильно удалило его из кеша, и после переустановки без Acorn он запущен и работает.

То же, что @Soundvessel

Установка acorn до next@8 устранила проблему.

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

@Magelllol , вы пытались запустить режим разработки только после npm ci . Если вы видите мой второй пост, я смог запустить режим разработки с 8.0.3 _without_ acorn после использования командной строки npm для правильной деинсталляции, потому что я считаю, что кешированная версия за пределами node_modules вызывала проблему. npm ci , будучи чистой установкой, может решить проблему без необходимости установки/удаления отдельных пакетов.

@Soundvessel Похоже, не работает, если я не установлю желудь явно.
Я пробовал всевозможные комбо с npm ci на разных этапах.

https://github.com/zeit/next.js/issues/6240#issuecomment -466549203 - единственный способ заставить его работать. Также использование yarn исправляет это без необходимости явно добавлять acorn .

@vasco3 Ваше решение сработало для меня. Спасибо. :+1:

Чтобы уточнить, мне не нужен Acorn для решения проблемы. Попробуйте удалить Next с помощью командной строки, а не просто удалить node_modules .

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

Я считаю, что использование командной строки для удаления Next устраняет причину проблем из кеша NPM за пределами node_modules .

Я также заранее обновил Node и NPM, но это не помогло, пока я не переустановил их должным образом.

Попробуйте удалить каталог .next вместо того, чтобы беспокоиться о кеше npm.

Я решил проблему:

  • bundleAnalyzer был сломан из-за динамического импорта
    после фиксации,
  • файлы пакетов сервера остались в .next/ , что привело к импорту ('./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) самый простой server.js с модулями ES.

2) .babelrc:

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

3) пакет.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-learn-demo/tree/master/E2-lazy-loading-modules. После установки npm dev [email protected] он снова заработал.

Будет исправлено 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 работает!!! тада

Заключение:
Ключ в том, чтобы установить желудь перед следующим

Это решило проблему и для меня, спасибо! :хлопок:

Хорошо, вот выигрышная комбинация (убедитесь, что она воспроизводима на 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 уже исправил эту проблему, см. 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

Возможно, я решил эту вышеописанную проблему, rm-ing node-modules и переустановив, но, возможно, не переустанавливая все, может быть определенный пакет, который вызывает это

Последними шагами разрешения должны быть rm package-lock.json и rm -rf node_modules , а затем переустановите.

Важно отметить, что это исправлено только в Next 9 .

@Timer Я запускаю [email protected], но проблема все еще не устранена. Я пробовал:
1) удаление следующего, добавление желудя с yarn add acorn , а затем запуск yarn next@latest безрезультатно
2) удаление всех node_modules и yarn.lock и переустановка. Кто-нибудь еще видит эту проблему? Я только начал испытывать это с помощью react-datepicker

@ Sm00g15 Sm00g15 довольно сложно помочь вам, когда нет репродукции. Может быть, вы установили веб-пакет вручную?

У меня была такая же проблема, также после обновления webpack и @babel/core . Удаление моих package-lock.json и node_modules и повторная установка решили проблему.

Спасибо, это решение решило проблему для меня. Я работал над другим проектом Node.js (не Next.js), где я обновил свою версию Node до последней версии — похоже, это и есть причина проблемы. Там, где решение удалить lock.json и node_modules, а затем переустановить пакеты, сработало отлично. Спасибо.

Была ли эта страница полезной?
0 / 5 - 0 рейтинги