Next.js: 8.0.0 - تسبب الاستيراد الديناميكي في حدوث خطأ "قد تحتاج إلى أداة تحميل مناسبة ..."

تم إنشاؤها على ١١ فبراير ٢٠١٩  ·  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٪):
كان مشروعي يحتوي بالفعل على الإصدار 7 التالي

  1. يقوم npm install next@latest -> بتثبيت الإصدار 8.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 ، لكنني لم أساعد.
تضمين التغريدة

لدي خطأ مختلف متعلق بالواردات والذي قد يكون له نفس السبب الأساسي:

/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 إلى إصلاح هذه المشكلة. قد يتعلق بالتبعية الداخلية للوحدات النمطية والوحدات المتبقية.

لدي نفس المشكلة (لدي أيضًا نفس الخطأ عند استخدام عمليات الاستيراد الديناميكية ، لقد كتبت عنها على 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

لا يؤدي تثبيت الجوز في Next.js إلى حل المشكلة.

حيث أعمل ، أثر ذلك علينا عند محاولة الترقية إلى المستوى 8 التالي.

لقد أدى استخدام الغزل لتثبيت التبعيات إلى الحيلة بالنسبة لي. غريب جدا.

حسنًا ، إليك المجموعة الفائزة (تأكد من أنها قابلة للتكرار بنسبة 100٪):
كان مشروعي يحتوي بالفعل على الإصدار 7 التالي

  1. يقوم npm install next@latest -> بتثبيت الإصدار 8.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] كإعتمادات مطورة كما اقترح iaincollins يعمل على إصلاح هذا الأمر بالنسبة لي أيضًا.

لا يزال موجودًا مع الإصدار 8.0.2 التالي. يحتاج البلوط إلى الترقية في package.json ، فهو يصلح المشكلة

تم التأكيد: 8.0.3 يعمل على إصلاح هذه المشكلة

كانت مشكلة تشغيل dev لا تزال موجودة مع الإصدار 8.0.3 التالي حتى جربت توصية @ vasco3 وقمت بتثبيت بعد البلوط التالي. غريب...

حصلت 8.0.3 تعمل بدون الجوز.

يبدو أن NPM كان التخزين المؤقت التالي بشكل غير صحيح. حتى عند حذف مجلد node_modules و package-lock إعادة تشغيل npm i ، ستستمر المشكلة. في الواقع ، يبدو أن استخدام NPM CLI لإلغاء التثبيت بعد ذلك قد أزاله من ذاكرة التخزين المؤقت بشكل صحيح وبعد إعادة التثبيت بدون Acorn ، يتم تشغيله.

مثل Soundvessel

أدى تثبيت acorn previous next@8 إلى إصلاح المشكلة.

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

Magellol هل حاولت تشغيل وضع dev بعد npm ci فقط. إذا رأيت رسالتي الثانية ، فقد تمكنت من تشغيل وضع dev مع 8.0.3 _ بدون _ بلوط بعد استخدام سطر أوامر 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) 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",
  }
}

وثم

$ 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٪):
كان مشروعي يحتوي بالفعل على الإصدار 7 التالي

  • يقوم npm install next@latest -> بتثبيت الإصدار 8.0.1 التالي ولكنه يحذر من الجوز
  • يتم تشغيل npm run dev -> بعد ذلك ويفشل مع الخطأ الموضح في مشكلة git هذه
  • npm install acorn
  • npm run dev -> يتم تشغيله بعد ذلك ويفشل مع الخطأ الموضح في مشكلة git هذه
  • npm install next@latest -> لا توجد تحذيرات
  • npm run dev إنه يعمل !!! 🎉

خاتمة:
المفتاح هو تثبيت الجوز قبل المقبل

شكرا! يثبت مرة أخرى أن الأمر مهم! أنقذني.

حسنًا ، إليك المجموعة الفائزة (تأكد من أنها قابلة للتكرار بنسبة 100٪):
كان مشروعي يحتوي بالفعل على الإصدار 7 التالي

  • يقوم npm install next@latest -> بتثبيت الإصدار 8.0.1 التالي ولكنه يحذر من الجوز
  • يتم تشغيل npm run dev -> بعد ذلك ويفشل مع الخطأ الموضح في مشكلة git هذه
  • npm install acorn
  • npm run dev -> يتم تشغيله بعد ذلك ويفشل مع الخطأ الموضح في مشكلة git هذه
  • npm install next@latest -> لا توجد تحذيرات
  • npm run dev إنه يعمل !!! تادا

خاتمة:
المفتاح هو تثبيت الجوز قبل المقبل

هذا أصلح المشكلة بالنسبة لي أيضًا ، شكرًا! : تصفيق:

حسنًا ، إليك المجموعة الفائزة (تأكد من أنها قابلة للتكرار بنسبة 100٪):
كان مشروعي يحتوي بالفعل على الإصدار 7 التالي

* `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 webpack هذه المشكلة بالفعل ، راجع 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 وإعادة تثبيته. أي شخص آخر لا يزال يرى هذه المشكلة؟ لقد بدأت للتو في تجربته مع منتقي بيانات التفاعل

@ Sm00g15 من الصعب جدًا مساعدتك عندما لا يتم توفير نسخة. ربما قمت بتثبيت حزمة الويب يدويًا؟

واجهت نفس المشكلة ، أيضًا بعد تحديث webpack و @babel/core . أدت إزالة package-lock.json و node_modules وإجراء تثبيت جديد إلى حل المشكلة.

شكرا ، هذا الحل حل المشكلة بالنسبة لي. كنت أعمل على مشروع Node.js آخر (وليس Next.js) حيث قمت بترقية إصداري من Node إلى الأحدث - يبدو أن هذا هو سبب المشكلة. حيث يعمل حل إزالة lock.json و node_modules ، ثم إعادة تثبيت الحزم بشكل مثالي. شكرا.

هل كانت هذه الصفحة مفيدة؟
0 / 5 - 0 التقييمات