<p>gatsby-node.js ES6 आयात की अनुमति नहीं देता</p>

वह फ़ाइल node.js द्वारा चलाई जाती है, इसलिए यह आपके द्वारा उपयोग किए जा रहे नोड के संस्करण का समर्थन करता है। नोड में Es6 मॉड्यूल समर्थन अभी भी एक वाइप है https://medium.com/@giltayar/native -es-modules-in-nodejs-status-and-future-directions-part-i-ee5ea3001f71

मैं भी इसमें भाग रहा हूं। मुझे gatsby-mdx/mdx-renderer का उपयोग करने की आवश्यकता है, और यहां तक ​​​​कि अगर मैं इसे require करता हूं, तो आवश्यक फ़ाइल स्वयं ES6 मॉड्यूल सिंटैक्स और ब्रेक का उपयोग करती है। क्या gatsby-node.js को बेबेल के माध्यम से जाने के लिए कॉन्फ़िगरेशन बदलने का कोई तरीका है? इसके अंदर जेएसएक्स का भी उपयोग करने में सक्षम होना अच्छा होगा, हालांकि मेरे लिए कम जरूरी है।

क्या सक्षम करने के चरण होगा import / export में समर्थन gatsby-node.js ? मध्यम पोस्ट .mjs फ़ाइलों का उपयोग करके उल्लेखों से जुड़ा हुआ है लेकिन मुझे नहीं लगता कि यह गैट्सबी के साथ काम करेगा?

वहाँ का उपयोग करने का कोई तरीका है babel-node के बजाय node ?

मैं इसके लिए esm का उपयोग करता हूं और यह अब तक काम करता है। यहाँ मैंने क्या किया है:

1. esm ( npm i esm ) स्थापित करें
2. अपने रूट फ़ोल्डर में gatsby-node.esm.js नामक एक फ़ाइल बनाएं (वही फ़ोल्डर जिसमें gatsby-node.js )
3. अपने सभी कोड को gatsby-node.js से gatsby-node.esm.js
4. निम्नलिखित के साथ gatsby-node.js में सभी कोड बदलें:
   javascript require = require('esm')(module) module.exports = require('./gatsby-node.esm.js')
5. import का उपयोग gatsby-node.esm.js जो आप चाहते हैं

@KyleAMathews क्या इस तरह से ऐसा करने में कुछ खतरनाक है? क्योंकि अगर यह सुरक्षित है तो मैं इसे दस्तावेज़ों में जोड़ सकता हूं :)

यह पैटर्न निश्चित रूप से @nikoladev काम करता है! हालांकि यह सुनिश्चित नहीं है कि यह दस्तावेज़ों में कहां जाएगा। कोई विचार @gatsbyjs/docs?

यहां बताया गया है कि मैंने यह कैसे किया:

require('babel-register')({
  presets: [ 'env' ]
})
require('babel-polyfill')
module.exports = require(`./gatsby-node.mjs`)

ऐसा लगता है कि यह काफी अच्छा काम करता है लेकिन मुझे आश्चर्य है कि यह कैश के साथ गड़बड़ नहीं कर सकता है? मुझे लगता है कि जब आप gatsby-node.js संशोधित करते हैं तो कैश को रीसेट करना चाहिए, लेकिन मैं इसके साथ समस्याओं में भाग रहा हूं, हालांकि मुझे नहीं पता कि वे संबंधित हैं या नहीं।

@KyleAMathews सामग्री और डेटा सोर्सिंग के तहत कैसे? कम से कम यही कारण है कि मैंने इसका इस्तेमाल किया।

यह एक अलग तरह की बहस है, लेकिन import का उपयोग करने वाले किसी भी मौके का समर्थन किया जा सकता है? मुझे लगता है कि बड़ी गैट्सबी परियोजनाओं के लिए, gatsby-node.js में जो होता है वह आपके वास्तविक फ्रंट-एंड जितना ही महत्वपूर्ण है और यह import , async/await साथ आधुनिक तरीके से कोड करने में सक्षम नहीं है।

@KyleAMathews , क्या स्थानीय ES6 फ़ाइल की आवश्यकता के लिए कोई तरीका है? उदाहरण के लिए, मेरे पास src/utils/article.js फ़ाइल है जो निम्न की तरह दिखती है:

// src/utils/article.js
import { format } from 'date-fns'

export const createArticleUrl = (a) => (
  `/${format(a.publishDate, 'YYYY')}` +
  `/${format(a.publishDate, 'MM')}` +
  `/${format(a.publishDate, 'DD')}` +
  `/${a.category.urlSlug}` +
  `/${a.urlSlug}`
)

और मेरी gatsby-node.js फ़ाइल:

// gatsby-node.js
...
const { createArticleUrl } = require(`./src/utils/article`)
...

और मुझे त्रुटि मिलती है:

  Error: .../src/utils/article.js:1
  (function (exports, require, module, __filename, __dirname) { import { format } from 'date-fns'
                                                                ^^^^^^
  SyntaxError: Unexpected token import

कोई विचार? मैं अपने लेख/पोस्ट के लिए यूआरएल बनाने के लिए फ़ंक्शन का उपयोग करता हूं और इसे आयात करना चाहता हूं जैसे मैं अपने रिएक्ट घटकों में करता हूं। धन्यवाद!

मैं अपनी src/utils/article.js फ़ाइल में ES5 का उपयोग करके अपनी समस्या को हल करने में सक्षम था, जैसे:

// src/utils/article.js
const { format } = require('date-fns')

var createArticleUrl = function (a) {
  return (
    `/${format(a.publishDate, 'YYYY')}` +
    `/${format(a.publishDate, 'MM')}` +
    `/${format(a.publishDate, 'DD')}` +
    `/${a.category.urlSlug}` +
    `/${a.urlSlug}`
  )
}

module.exports.createArticleUrl = createArticleUrl

और फिर gatsby-node.js , इस तरह:

// gatsby-node.js
...
const { createArticleUrl } = require(`./src/utils/article`)
...

मैं ES6 फ़ाइलों में सामान्य की तरह createArticleUrl भी आयात कर सकता हूं, import { createArticleUrl } from '../utils/article' ।

मैं इसके लिए esm का उपयोग करता हूं और यह अब तक काम करता है। यहाँ मैंने क्या किया है:

1. esm ( npm i esm ) स्थापित करें
2. अपने रूट फ़ोल्डर में gatsby-node.esm.js नामक एक फ़ाइल बनाएं (वही फ़ोल्डर जिसमें gatsby-node.js )
3. अपने सभी कोड को gatsby-node.js से gatsby-node.esm.js
4. निम्नलिखित के साथ gatsby-node.js में सभी कोड बदलें:
   js require = require('esm')(module) module.exports = require('./gatsby-node.esm.js')
5. import का उपयोग gatsby-node.js जो आप चाहते हैं

@KyleAMathews क्या इस तरह से ऐसा करने में कुछ खतरनाक है? क्योंकि अगर यह सुरक्षित है तो मैं इसे दस्तावेज़ों में जोड़ सकता हूं :)

क्या ५वां " import का उपयोग gatsby-node.esm.js जो आप चाहते हैं"?

@WeZZard आप बिल्कुल सही कह रहे हैं! मैं इसे अपनी पोस्ट में ठीक कर दूंगा।

एक और तरीका है कि मुझे यह काम करने के लिए मिला, निम्नलिखित के साथ अपने package.json को अपडेट करके:

  "scripts": {
    "build": "npx --node-arg '-r esm' gatsby build",
    "develop": "npx --node-arg '-r esm' gatsby develop",
    "start": "npx --node-arg '-r esm' npm run develop",
    "serve": "npx --node-arg '-r esm' gatsby serve",
    "test": "echo \"Write tests! -> https://gatsby.app/unit-testing\""
  },

नई फाइलें बनाने की जरूरत नहीं

@reaktivo आपकी स्क्रिप्ट स्थानीय रूप से काम करती है लेकिन मैं इसे netlify के साथ काम करने में सक्षम नहीं कर पाया। क्या आप npx साथ नेटलिफाई करने के लिए अपनी साइट को परिनियोजित करने में सक्षम हैं?

@rotexhawk ने बस एक उदाहरण दिया और यह ठीक काम किया:

https://github.com/reaktivo/gatsby-esm/
https://gatsby-esm-example.netlify.com/

सुनिश्चित करें कि आप को चला रहे हैं npm install --save-dev esm से पहले और अपने निर्माण config चलाता है कि npm run build के बजाय gatsby build

इस कमिट को देखें: https://github.com/reaktivo/gatsby-esm/commit/cf620259ac8b118dea38b99409963cb26bf1b240

धन्यवाद, मैंने ईएसएम स्थापित किया है। समस्या यह है कि netlify के पास npx तक पहुंच नहीं है, कमांड विफल कहता है। मैंने अपना नोड संस्करण निर्दिष्ट किया लेकिन इससे कोई फायदा नहीं हुआ।

@rotexhawk यह वास्तव में अजीब है, मैंने आपको जो प्रोजेक्ट भेजा है, उसे Netlify पर तैनात किया गया था ... वैसे भी, अगर आपको npx से बचने की आवश्यकता है, तो निम्नलिखित काम कर सकते हैं:

  "scripts": {
    "build": "node -r esm ./node_modules/bin/gatsby build",
    "develop": "node -r esm ./node_modules/bin/gatsby develop",
    "start": "npm run develop",
    "serve": "node -r esm ./node_modules/bin/gatsby serve",
    "test": "echo \"Write tests! -> https://gatsby.app/unit-testing\""
  },

@rotexhawk Netlify टीम के संपर्क में है, आपको NPM_VERSION निर्दिष्ट करने की भी आवश्यकता हो सकती है, देखें https://www.netlify.com/docs/build-settings/#node -npm-and-yarn

@reaktivo करेंगे। पूरी सहायताके लिए शुक्रिया।

मैं प्रलेखन के लिए उस esm दृष्टिकोण को जोड़ने पर दृढ़ता से विचार करूंगा, क्योंकि Gatsby यह संकेत दे रहा है कि es6 मॉड्यूल को gatsby-node.js फ़ाइल के अंदर काम करना चाहिए। जब आप मॉड्यूल मिलाते हैं तो यह त्रुटि संदेश मुद्रित होता है:

error This plugin file is using both CommonJS and ES6 module systems together which we don't support. You'll need to edit the file to use just one or the other.

यह स्पष्ट रूप से इंगित करता है, आप es6 मॉड्यूल का उपयोग कर सकते हैं।

esm यार्न कार्यक्षेत्र का उपयोग करते समय काम नहीं करता है। यह कहता है कि यह कार्यक्षेत्र मॉड्यूल नहीं ढूंढ सकता है।

वास्तव में ऐसा लगता है कि यह केवल प्रथम स्तर के आयात के लिए काम करता है gatsby-node.ems.js , न कि किसी भी चीज के लिए जो आयातित घटक भी आयात करता है।

उदाहरण के लिए,

./gatsby-node.ems.js

import foo from "./foo";
const fooText = foo + " more text";

./फू

import bar from "bar";
const foo = bar("whatever");
export default foo;

एक त्रुटि फेंकता है:

Error in "C:\...\gatsby-node.js": Cannot find module 'bar'

के बाद से नोड मॉड्यूल लगभग देखते हैं, मैं के साथ प्रयोग करना चाहता था नोड --experimental-modules के बजाय esm ।

मैंने scripts.start को "node --experimental-modules ./node_modules/.bin/gatsby develop" में बदल दिया, gatsby-node.js का नाम बदलकर gatsby-node.mjs , लेकिन मुझे मिलता है

"~/website/gatsby-node.mjs" में त्रुटि: ES मॉड्यूल लोड करने के लिए आयात का उपयोग करना चाहिए: ~/website/gatsby-node.mjs

त्रुटि: [ERR_REQUIRE_ESM]: ES मॉड्यूल लोड करने के लिए आयात का उपयोग करना चाहिए: ~/website/gatsby-node.mjs

कृपया ध्यान रखें कि हम आधिकारिक तौर पर इसका समर्थन नहीं करते हैं और यहां बताए गए समाधान केवल इतना ही आगे बढ़ सकते हैं। हो सकता है कि हमारे कुछ पैकेज अभी तक इस प्रयोगात्मक नोड सुविधा के साथ संगत नहीं हैं या यह काम नहीं करेगा। चीजें स्थिर होने पर हम इस विषय पर फिर से विचार कर सकते हैं।

अब जबकि ES मॉड्यूल अब प्रायोगिक नहीं हैं , क्या इस मुद्दे को फिर से खोलना चाहिए?

वे अभी भी प्रयोगात्मक हैं और पूरी तरह से समाप्त नहीं हुए हैं। बस झंडा हटा दिया गया है

हालांकि कार्यान्वयन प्रयोगात्मक और परिवर्तन के अधीन रहता है

मैंने इसमें गहराई से काम किया है, और यह अभी तक दर्द के लायक नहीं है। लोडर के लागू होने की प्रतीक्षा करें या esm पैकेज का उपयोग करें।

क्या किसी को बेबेल का उपयोग करके समाधान मिला है? यह बहुत अच्छा होगा अगर मैं अपने बैबेल कॉन्फिगर को एक गैट्सबी प्रोजेक्ट में छोड़ सकता हूं, और यह सब काम कर सकता है।

गैट्सबी का उपयोग करना, लेकिन फिर module.exports वापस जाना वास्तव में एक बड़े कदम की तरह लगता है।

Modern web tech without the headache -> इतना नहीं :(

npm i esm

और फिर इस तरह दिखने के लिए अपने आदेशों को संशोधित करें:

https://github.com/wesbos/awesome-uses/blob/master/package.json#L39 -L42

@wesbos @reaktivo क्या आप नवीनतम गैट्सबी (मेरे मामले में २.२२.१७) के साथ अभी भी उस फिक्स का उपयोग करने में सक्षम हैं?

मैंने उस समाधान का उपयोग किए बिना किसी भी समस्या के बिना काम किया है, लेकिन आज गैट्सबी को अपडेट किया और आयात त्रुटियों को फिर से प्राप्त करना शुरू कर दिया:

```

npx --node-arg '-r esm' gatsby development

त्रुटि #10123 कॉन्फिग

आपकी साइट के gatsby-config को लोड करने का प्रयास करते समय हमें एक त्रुटि का सामना करना पड़ा। कृपया त्रुटि ठीक करें और पुन: प्रयास करें।

त्रुटि: /project/gatsby-config.js:1
(फ़ंक्शन (निर्यात, आवश्यकता, मॉड्यूल, __filename, __dirname) { आयात urlJoin "url-join" से;
^^^^^^
सिंटैक्स त्रुटि: एक मॉड्यूल के बाहर आयात विवरण का उपयोग नहीं कर सकता ```

एक विकल्प के रूप में, आप gatsby-* फ़ाइलों के लिए टाइपस्क्रिप्ट का

ऊपर मेरी ईएसएम चाल ने काम करना बंद कर दिया। मैंने गैट्सबी और नोड संस्करण को भी वापस रोल किया और यह बनी रहती है।

इसे यहाँ विस्तृत करें यदि किसी के पास एक ही समस्या है: https://github.com/reaktivo/gatsby-esm/issues/1

@caycecollins क्या आपको कोई फिक्स मिला?

@wesbos मैं अब वापस es5 की आवश्यकता पर वापस लौट रहा हूं :(

संपादित करें: मैंने अभी आपका नवीनतम सुधार यहां देखा है https://github.com/gatsbyjs/gatsby/issues/24925 ... मैं इसे आज़मा दूंगा!

बस एक ध्यान दें कि मैंने इसके साथ एक घंटे तक संघर्ष किया और अंत में यह पता चला कि मैंने अपने पैकेज में जो कुछ भी रखा है। बिल्ड के लिए जेसन, नेटलिफाई यूआई कॉन्फ़िगरेशन प्राथमिकता ले रहा था। यह तब तक नहीं था जब तक मैंने netlify.toml नहीं जोड़ा कि यह स्पष्ट हो गया। कहानी का नैतिक, अपनी Netlify UI बिल्ड सेटिंग्स संपादित करें, या उन्हें साफ़ करें और कॉन्फ़िगरेशन में टॉस करें। मैं बाद वाले को पसंद करता हूं। मैं

[build]
  command = "npm run build"
  publish = "public"

यह ध्यान देने योग्य है कि हाँ, इसने मेरे लिए काम किया:

"build": "NODE_OPTIONS='-r esm' gatsby build",

वाह, मैं समझता हूं कि परिवर्तन कठिन है, लेकिन ईएस मॉड्यूल अब जावास्क्रिप्ट हैं, इसलिए यह देखना वास्तव में निराशाजनक है (जो भी पूरी तरह से वैध कारणों के लिए) अनुरक्षक _विरुद्ध जावास्क्रिप्ट का समर्थन कर रहे हैं _ ... खासकर जब जेडलटन और उसका esm पैकेज बनाता है यह इतना आसान है!

PS कुछ प्रासंगिक विवरण जिनके बारे में आप नहीं जानते होंगे ...

• यह दो लाइन का फिक्स है। जब तक गैट्सबी में कई "प्रवेश बिंदु" न हों, इसे ठीक करने के लिए संपूर्ण पीआर तीन पंक्तियाँ होंगी: esm पैकेज के लिए package.json प्रविष्टि, और पंक्तियाँ:

require = require("esm")(module/*, options*/)
module.exports = require("./main.js")

• यह मॉड्यूल पहले से ही क्नेक्स जैसे प्रमुख पुस्तकालयों में

• यह लोदश के निर्माता द्वारा लिखा गया था, इसलिए यह कुछ जूनियर इंजीनियर की पहली एनपीएम परियोजना नहीं है: यह एक अनुभवी पेशेवर द्वारा लिखित एक गंभीर पुस्तकालय है।

• यह पूरी तरह से पिछड़ा-संगत है: जब तक कोई अपने गैर-ईएस मॉड्यूल कोड में import या export का उपयोग नहीं करता है (और मुझे पूरा यकीन है कि वे समय की शुरुआत से जेएस प्रतिबंधित कीवर्ड रहे हैं) सभी मौजूदा कोड वही काम करना जारी रखेगा

• यदि किसी प्रकार की प्रदर्शन चिंता थी तो कमांड लाइन तर्क के साथ इस सुविधा को "गेट कीप" करना आसान है (उदाहरण के लिए knex इस मार्ग पर जाने का विकल्प चुना गया)

तो यह "कोड की तीन पंक्तियों के साथ आधुनिक जावास्क्रिप्ट भाषा सुविधाएँ प्राप्त करें" या ... इसके लिए लड़ें? फायदा।

अगर कोई दिलचस्पी है, तो मुझे पीआर जमा करने में खुशी होगी :)

क्या कोई अंतिम समाधान प्रदान कर सकता है और इस धागे को बंद कर सकता है?

वास्तव में महत्वपूर्ण लेकिन प्रतीत होता है बंद मुद्दों में सभी टिप्पणियों को स्किम करने के इस नृत्य को करने से नफरत है, जहां बातचीत अभी भी हो रही है और सभी टिप्पणियों के माध्यम से यह देखने की कोशिश कर रही है कि किसके पास सबसे अधिक अंगूठे हैं और सबसे अच्छा समाधान होने की संभावना है

जैसा कि मैंने कहा, कठिन हिस्सा बना नहीं है esm मॉड्यूल काम: यह चीजों को अत्यंत सरल बनाने के लिए बनाया गया है। अगर मैं गैट्सबी आर्किटेक्चर के बारे में कुछ भी जानता हूं तो मैं खुद एक पीआर जमा करूंगा (और फिर, एक और प्रमुख पुस्तकालय को देखने के लिए इसे केवल

कठिन हिस्सा सिर्फ उस ज्ञान के साथ देखभाल करने के लिए रखरखाव प्राप्त कर रहा है :(

आपको लगता है कि भले ही प्रत्येक अनुरक्षक को आधुनिक JS मॉड्यूल सिंटैक्स के लिए एक व्यक्तिगत नफरत थी, फिर भी वे कम से कम अपने उपयोगकर्ताओं की इसके लिए इच्छा की सराहना कर सकते थे ... फिर से, संभवतः कोड की केवल दो पंक्तियों के साथ) अन्यथा सुझाव देता है। यह देखते हुए कि यह टीम अन्य मुद्दों के साथ कितनी अच्छी रही है, यह ईमानदारी से मेरे लिए भ्रमित करने वाला है।

जैसा कि मैंने कहा, कठिन हिस्सा _not_ है जिससे esm मॉड्यूल काम करता है: यह चीजों को _extremely_ सरल बनाने के लिए डिज़ाइन किया गया है। अगर मैं गैट्सबी आर्किटेक्चर के बारे में कुछ भी जानता हूं तो मैं खुद एक पीआर जमा करूंगा (और फिर, एक और प्रमुख पुस्तकालय को देखने के लिए इसे केवल

कठिन हिस्सा सिर्फ उस ज्ञान के साथ देखभाल करने के लिए रखरखाव प्राप्त कर रहा है :(

आपको लगता है कि भले ही प्रत्येक अनुरक्षक के पास आधुनिक JS मॉड्यूल सिंटैक्स के लिए एक व्यक्तिगत _hated_ हो, फिर भी वे कम से कम इसके लिए अपने उपयोगकर्ताओं की इच्छा की सराहना कर सकते हैं ... फिर से, संभवतः कोड की केवल दो पंक्तियों के साथ) अन्यथा सुझाव देता है। यह देखते हुए कि यह टीम अन्य मुद्दों के साथ कितनी अच्छी रही है, यह ईमानदारी से मेरे लिए भ्रमित करने वाला है।

कृपया इस विषय पर अनुरक्षकों से कोई शब्द?