Next.js: 8.0.0 - 动态导入导致“您可能需要适当的加载程序...”错误

创建于 2019-02-11 · 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声明为依赖项，但master上似乎没有更改

也许我升级太快了？

p0 upstream

资料来源

dunika

👍88 🚀1 😕1

最有用的评论

好的，这是获胜的组合（确保 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有效！！！ 🎉

结论
关键是在下一步之前安装橡子

vasco3 于 2019-02-15

👍51 ❤16 🎉15 🚀6

所有58条评论

我遇到了同样的问题。无法启动开发模式。我将 npm 更新到最新版本并尝试安装 acorn 包，但没有帮助。
@timneutkens

dimensi 于 2019-02-11

我有一个与导入相关的不同错误，它可能具有相同的根本原因：

/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 于 2019-02-11

👍3

@AndrewIngram你能提供一个复制品吗？好奇地调查那个。这听起来与 @babel/runtime 相关，而不是 webpack。

timneutkens 于 2019-02-11

我面临同样的错误。安装acorn对我也不起作用。仅供参考，我使用ts-node来运行我的快递服务器。

incleaf 于 2019-02-11

👍1

对我来说，这是通过升级 @babel/core 解决的：

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

出于某种原因，我们目前将其作为直接依赖项。

TomiTakussaari 于 2019-02-11

👍1

遇到相同的问题和错误消息。 @babel/core设置为"7.2.2"所以这可能不是问题。

cnasc 于 2019-02-11

我们也看到了这个问题，并按照线程寻求解决方法。

生产（使用next build ）构建并运行良好。
在开发模式下运行会产生与 OP 相同的错误。
我们以编程方式调用 Next.js（我们目前在 Express 中使用它）。
将 @babel/core 更新到 7.2.2 并没有为我们解决这个问题。

按照线程中链接的问题并安装[email protected]和@babel/[email protected]作为 devDependancies确实解决了这个问题。

（这也解决了关于 Acorn 包的错误，我们没有直接依赖。）

iaincollins 于 2019-02-11

👍36 ❤11 🎉11 😄9

在更新webpack和@babel/core之后，我也遇到了同样的问题。删除我的package-lock.json和node_modules并进行全新安装解决了这个问题。

kpoelhekke 于 2019-02-11

👍13

不幸的是，这里同样的问题。这是一个复制： https ://github.com/jescalan/nextjs-test/tree/je.canary

静态构建和导出效果很好，只是开发模式会出错。 babel 和 webpack 都不是作为依赖安装的。

jescalan 于 2019-02-11

只需删除package-lock.json即可修复并重新生成。该分支上的最后一次提交显示了对package-lock.json进行了哪些更新——希望这有助于确定原因！

jescalan 于 2019-02-11

删除node_modules和package-lock.json然后重新安装也为我解决了这个问题。

pdlug 于 2019-02-11

👍2

正如@iaincollins建议的那样，删除node_modules和package-lock.json并没有为我解决这个问题，但是将[email protected]作为开发依赖项安装了。

bitmap 于 2019-02-11

👍11 🎉1

也遇到这个问题，但在这个包之外；降级到较低版本的节点（v9.11 [同事工作版本]，安装[email protected]并重新安装 node_modules 为我解决了这个问题。

paulschneider 于 2019-02-12

我有一个与导入相关的不同错误，它可能具有相同的根本原因：

/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]上，而不是在为生产编译时出现。

icflorescu 于 2019-02-12

👍1

我遇到了同样的问题。删除node_modules和package-lock.json并重新安装 _did_ 为我修复它。在重新安装之前删除目录和锁定文件很重要，以防万一这是一些人遇到的问题。

shaunchurch 于 2019-02-12

👍1

我在 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

schabluk 于 2019-02-12

👍3

@icflorescu如果没有清晰的复制，就不可能解决这个问题。请提供一份以便我们进一步调查🙏

timneutkens 于 2019-02-12

@icflorescu你能否为它创建一个新问题（包括复制），因为它与这个不一样🙏

timneutkens 于 2019-02-12

@timneutkens我昨晚终于发现我的问题是由#6273 引起的。
正如我在该线程中提到的，如果我将next/babel预设修改为['next/babel', { 'transform-runtime': { useESModules: false } }] ，错误就会消失。

编辑：我刚刚发布了一个测试 repo，请参阅 #6273 中的讨论。

icflorescu 于 2019-02-13

👍3

就我而言，简单地重新安装 node_modules 目录即可解决此问题。它可能与模块的内部依赖关系和剩余模块有关。

BiscuiTech 于 2019-02-13

我有同样的问题（使用动态导入时我也遇到了同样的错误，我在 Spectrum https://spectrum.chat/users/matthew-rapati?thread=c677c233-8b02-447f-aff0-97b3399a493f 上写过它）。

我尝试删除 node_modules、package-lock.json 并清除我的 npm 缓存，但并没有解决问题。如果我有机会，我会尝试创建一个小的复制问题。

goshdarnheck 于 2019-02-13

安装acorn为我解决了这个问题。它已经在 canary 上合并，但还没有在 master 上。 https://github.com/zeit/next.js/pull/6137

obedparla 于 2019-02-14

在 Next.js 中安装 acorn 并不能解决问题。

timneutkens 于 2019-02-14

在我工作的地方，这在尝试升级到 next 8 时影响了我们。

ograycode 于 2019-02-14

使用 Yarn 安装依赖项对我有用。超级诡异。

Robbatron 于 2019-02-14

👍3

好的，这是获胜的组合（确保 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有效！！！ 🎉

结论
关键是在下一步之前安装橡子

vasco3 于 2019-02-15

👍51 ❤16 🎉15 🚀6

那么它是某种依赖解决方案吗？ @vasco3解决了我的问题。

andrewgremlich 于 2019-02-15

👍2

这对我来说直接发生在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

正如@iaincollins 建议的那样，将[email protected]和@babel/[email protected]安装为devDependencies也可以为我解决这个问题。

KB1RMA 于 2019-02-19

👍2

下一个 8.0.2 仍然存在。 acorn 需要在 package.json 中升级，它解决了这个问题

cellog 于 2019-02-22

确认：8.0.3 修复了这个问题

cellog 于 2019-02-22

下一个 8.0.3 仍然存在运行 dev 的问题，直到我尝试了@vasco3的建议并在 acorn 之后安装下一个。奇怪的...

Soundvessel 于 2019-02-22

在没有 Acorn 的情况下运行 8.0.3。

看来 NPM 正在错误地缓存下一个。即使删除我的node_modules文件夹并package-lock重新运行npm i问题也会持续存在。实际上，使用 NPM CLI 卸载 next 似乎已将其从缓存中正确删除，并且在没有 Acorn 的情况下重新安装后，它已启动并运行。

Soundvessel 于 2019-02-22

👍1

与@Soundvessel相同

在next@8 acorn $ 解决了这个问题。

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

Magellol 于 2019-02-22

👎1 👍1

@Magellol您是否尝试在npm ci之后运行开发模式。如果您看到我的第二篇文章，我可以在使用 npm 命令行正确卸载下一个后，使用 8.0.3 _without_ acorn 运行开发模式，因为我相信node_modules之外的缓存版本会导致问题。 npm ci是全新安装可能会解决问题，而无需安装/卸载单个软件包。

Soundvessel 于 2019-02-22

如果我不明确安装橡子， @Soundvessel似乎不起作用。
我在不同阶段尝试了各种与npm ci的组合。

https://github.com/zeit/next.js/issues/6240#issuecomment -466549203 是我让它工作的唯一方法。同样使用yarn可以修复它，而无需显式添加acorn 。

Magellol 于 2019-02-23

@vasco3您的解决方案对我有用。谢谢。 :+1:

pankaj1433 于 2019-02-25

为了澄清我不需要 Acorn 来解决这个问题。尝试使用命令行卸载 Next，而不是仅仅删除node_modules 。

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

我相信使用命令行卸载 Next 可以从node_modules之外的 NPM 缓存中消除问题的原因。

我还事先更新了 Node 和 NPM，但在我正确重新安装之前没有帮助。

Soundvessel 于 2019-02-25

👍1

尝试删除您的.next目录，而不是担心 npm 缓存。

我解决了这个问题：

bundleAnalyzer 被动态导入破坏了
固定后，
服务器捆绑文件留在.next/中导致 import('./noop'); 尽管重新安装错误
删除node_modules和.next

运行next build可能会导致next dev 失败，但如果您没有先运行next build ，它会起作用：

如果您遇到动态导入错误，并且您清理项目，然后运行next dev，您将不会看到错误
如果您遇到动态导入错误，并且您清理项目，然后运行next build ，然后运行next dev，您将看到错误

Yzrsah 于 2019-02-27

更新其他一些模块后再次弹出错误。

我确实在我的用户文件夹中删除/.next 、 / node_modules 、 package-lock.json和/npm-cache/ ，然后重新运行npm i并且错误仍然存在。

放弃并将acorn添加到我的依赖项中以防止错误。

Soundvessel 于 2019-03-01

获取此错误的“迭代器”版本。以上都没有帮助：

/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 于 2019-03-19

@ivan-kleshnin 这是另一个问题：#6273 固定在金丝雀上。

timneutkens 于 2019-03-19

我尝试只删除 package-lock.json 和 node_modules 目录，但这对我不起作用。我的解决方案是改用纱线：

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

错误消失了！

dknell 于 2019-03-31

我在尝试运行https://github.com/zeit/next-learn-demo/tree/master/E2-lazy-loading-modules 中的项目时遇到了同样的错误。在对[email protected]进行 npm dev 安装后，它又开始工作了。

thomasledoux1 于 2019-04-10

将由https://github.com/zeit/next.js/issues/6940修复

timneutkens 于 2019-04-21

🎉2

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

alexbaumgertner 于 2019-05-17

我也使用 Yarn 安装依赖项，它可以工作）

scub111 于 2019-05-22

👍1

好的，这是获胜的组合（确保 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有效！！！ 🎉
结论：
关键是在下一步之前安装橡子

谢谢！再次证明顺序很重要！救了我。

matt-reactlabs 于 2019-05-29

👍1

好的，这是获胜的组合（确保 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有效！！！多田
结论：
关键是在下一步之前安装橡子

这也为我解决了这个问题，谢谢！：拍：

naomiHauret 于 2019-06-14

👍2

好的，这是获胜的组合（确保 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!!! 🎉

结论：
关键是在下一步之前安装橡子

非常感谢，这解决了问题。 👏👏

dixitpeeyush 于 2019-07-02

👍1

这会很快在金丝雀分支中修复吗？

TidyIQ 于 2019-07-05

@TidyIQ我们将尽快修复它！重要的是要注意这是一个npm 错误。

Timer 于 2019-07-05

@Timer webpack 已经解决了这个问题，请参阅https://github.com/webpack/webpack/pull/9370

c0b41 于 2019-07-08

这似乎不能解决我的问题。处理还不能完全升级到新功能的旧代码库，我仍然需要一个转译服务器。

我已经完成了上述步骤，但它们并没有解决问题。我什至没有使用动态导入：/

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

aequasi 于 2019-07-13

👍1

我可能已经通过 rm-ing node-modules 并重新安装解决了上述问题，但可能没有重新安装所有内容，可能有一个特定的包导致了这个问题

zargold 于 2019-07-16

最后的解决步骤应该是rm package-lock.json和rm -rf node_modules ，然后重新安装。

需要注意的是，这仅在 Next 9 中修复。

Timer 于 2019-07-16

👍1

@Timer我正在运行 [email protected] 并且仍然遇到问题。我试过了：
1）删除下一个，用yarn add acorn添加橡子，然后运行yarn next@latest无济于事
2）删除所有 node_modules 和 yarn.lock 并重新安装。还有其他人看到这个问题吗？我才开始用 react-datepicker 体验它

sean-magin 于 2019-08-23

👍3

@Sm00g15如果没有提供复制品，很难帮助您。也许你手动安装了 webpack？

timneutkens 于 2019-08-23

在更新webpack和@babel/core之后，我也遇到了同样的问题。删除我的package-lock.json和node_modules并进行全新安装解决了这个问题。

谢谢，这个解决方案为我解决了这个问题。我一直在研究另一个 Node.js 项目（不是 Next.js），在那里我将我的 Node 版本升级到了最新版本——这似乎是问题的原因。删除 lock.json 和 node_modules，然后重新安装软件包的解决方案效果很好。谢谢。

nicktaras 于 2020-01-07

此页面是否有帮助？

0 / 5 - 0 等级

Next.js: 8.0.0 - 动态导入导致“您可能需要适当的加载程序...”错误

错误报告

描述错误

最有用的评论

所有58条评论

相关问题