<p>gatsby-node.js tidak mengizinkan impor ES6</p>

File itu dijalankan oleh node.js sehingga mendukung versi node apa pun yang Anda gunakan. Dukungan modul Es6 di node masih berupa wip https://medium.com/@giltayar/native -es-modules-in-nodejs-status-and-future-directions-part-i-ee5ea3001f71

Saya juga mengalami ini. Saya perlu menggunakan gatsby-mdx/mdx-renderer , dan bahkan jika saya require itu, file yang diperlukan itu sendiri menggunakan sintaks dan jeda modul ES6. Apakah ada cara untuk mengubah konfigurasi agar gatsby-node.js melalui babel? Akan sangat keren untuk dapat menggunakan JSX di dalamnya juga, meskipun kurang mendesak bagi saya.

Apa langkah-langkah untuk mengaktifkan dukungan import / export di gatsby-node.js ? Posting Medium ditautkan ke sebutan menggunakan file .mjs tetapi saya rasa itu tidak akan berfungsi dengan Gatsby?

Apakah ada cara untuk menggunakan babel-node alih-alih node ?

Saya menggunakan esm untuk ini dan sejauh ini berfungsi. Inilah yang saya lakukan:

1. Instal esm ( npm i esm )
2. Buat file bernama gatsby-node.esm.js di folder root Anda (folder yang sama yang berisi gatsby-node.js )
3. Pindahkan semua kode Anda dari gatsby-node.js ke gatsby-node.esm.js
4. Ganti semua kode di gatsby-node.js dengan yang berikut ini:
   javascript require = require('esm')(module) module.exports = require('./gatsby-node.esm.js')
5. Gunakan import di gatsby-node.esm.js semua yang Anda inginkan

@KyleAMthews Apakah ada sesuatu yang berbahaya untuk melakukannya dengan cara ini? Karena jika aman saya bisa menambahkannya ke dokumen :)

Pola ini pasti berhasil @nikoladev! Tidak yakin ke mana akan pergi di dokumen. Ada ide @gatsbyjs/docs?

Inilah cara saya melakukannya:

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

Tampaknya berfungsi cukup baik tetapi saya ingin tahu apakah itu mungkin tidak mengacaukan cache? Saya pikir cache seharusnya diatur ulang ketika Anda memodifikasi gatsby-node.js tetapi saya mengalami masalah dengan itu, meskipun saya tidak tahu apakah itu terkait.

@KyleAMthews Bagaimana di bawah Sumber Konten dan Data ? Setidaknya itulah alasan saya menggunakannya.

Ini semacam debat yang berbeda, tetapi kemungkinan menggunakan import dapat didukung di luar kotak? Saya merasa seperti untuk proyek Gatsby yang lebih besar, apa yang terjadi di gatsby-node.js hampir sama pentingnya dengan front-end Anda yang sebenarnya dan menyebalkan untuk tidak dapat membuat kode dengan cara modern dengan import , async/await , dll. tanpa peretasan tambahan.

@KyleAMthews , apakah ada cara untuk memerlukan file ES6 lokal? Misalnya, saya memiliki file src/utils/article.js yang terlihat seperti berikut:

// 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}`
)

dan file gatsby-node.js :

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

Dan saya mendapatkan kesalahan:

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

Ada ide? Saya menggunakan fungsi untuk membuat url untuk artikel/posting kami dan ingin mengimpornya seperti yang saya lakukan di komponen Bereaksi saya. Terima kasih!

Saya dapat menyelesaikan masalah saya dengan menggunakan ES5 di file src/utils/article.js , seperti:

// 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

dan kemudian gatsby-node.js , seperti ini:

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

Saya juga dapat mengimpor createArticleUrl seperti biasa di file ES6, import { createArticleUrl } from '../utils/article' .

Saya menggunakan esm untuk ini dan sejauh ini berfungsi. Inilah yang saya lakukan:

1. Instal esm ( npm i esm )
2. Buat file bernama gatsby-node.esm.js di folder root Anda (folder yang sama yang berisi gatsby-node.js )
3. Pindahkan semua kode Anda dari gatsby-node.js ke gatsby-node.esm.js
4. Ganti semua kode di gatsby-node.js dengan yang berikut ini:
   js require = require('esm')(module) module.exports = require('./gatsby-node.esm.js')
5. Gunakan import di gatsby-node.js semua yang Anda inginkan

@KyleAMthews Apakah ada sesuatu yang berbahaya untuk melakukannya dengan cara ini? Karena jika aman saya bisa menambahkannya ke dokumen :)

Apakah yang ke-5 "Gunakan import di gatsby-node.esm.js Anda inginkan"?

@WeZZard Anda benar sekali! Saya akan memperbaikinya di posting saya.

Cara lain yang menurut saya berfungsi adalah dengan memperbarui package.json Anda dengan yang berikut:

  "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\""
  },

Tidak perlu membuat file baru

@reaktivo skrip Anda berfungsi secara lokal tetapi saya tidak dapat membuatnya berfungsi dengan netlify. Apakah Anda dapat menyebarkan situs Anda ke netlify dengan npx ?

@rotexhawk Baru saja memberikan contoh dan itu berfungsi dengan baik:

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

Pastikan Anda menjalankan npm install --save-dev esm sebelumnya dan konfigurasi build Anda menjalankan npm run build alih-alih gatsby build

Lihat komit ini: https://github.com/reaktivo/gatsby-esm/commit/cf620259ac8b118dea38b99409963cb26bf1b240

Terima kasih, saya telah menginstal esm. masalahnya adalah netlify tidak memiliki akses ke npx , kata perintah gagal. Saya menentukan versi simpul saya tetapi itu tidak membantu.

@rotexhawk Itu benar-benar aneh, mengingat proyek yang saya kirimkan kepada Anda dikerahkan ke Netlify... bagaimanapun, jika Anda perlu menghindari npx , berikut ini mungkin berhasil:

  "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 Menghubungi tim Netlify, Anda mungkin juga perlu menentukan NPM_VERSION, lihat https://www.netlify.com/docs/build-settings/#node -npm-and-yarn

@reaktivo akan melakukannya. terima kasih atas semua bantuannya.

Saya akan sangat mempertimbangkan untuk menambahkan pendekatan esm ke dokumentasi, karena Gatsby menunjukkan modul es6 harus bekerja di dalam file gatsby-node.js. Pesan kesalahan ini dicetak, saat Anda mencampur modul:

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.

Ini dengan jelas menunjukkan, Anda BISA menggunakan modul es6.

esm tampaknya tidak berfungsi saat menggunakan ruang kerja benang. Dikatakan tidak dapat menemukan modul ruang kerja.

Sebenarnya sepertinya ini hanya berfungsi untuk impor tingkat pertama di gatsby-node.ems.js , bukan untuk apa pun yang juga diimpor oleh komponen yang diimpor.

Sebagai contoh,

./gatsby-node.ems.js

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

./foo

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

Melempar kesalahan:

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

Karena modul Node hampir sampai, saya ingin menggunakan node dengan --experimental-modules alih-alih esm .

Saya mengubah scripts.start menjadi "node --experimental-modules ./node_modules/.bin/gatsby develop" , mengganti namanya menjadi gatsby-node.js menjadi gatsby-node.mjs , tetapi saya mendapatkan

Kesalahan dalam "~/website/gatsby-node.mjs": Harus menggunakan impor untuk memuat Modul ES: ~/website/gatsby-node.mjs

Kesalahan: [ERR_REQUIRE_ESM]: Harus menggunakan impor untuk memuat Modul ES: ~/website/gatsby-node.mjs

Harap diingat bahwa kami tidak secara resmi mendukungnya dan solusi yang disebutkan di sini hanya dapat dilakukan sejauh ini. Mungkin beberapa paket kami belum kompatibel dengan fitur node eksperimental ini atau tidak berfungsi. Kita dapat meninjau kembali topik ini ketika keadaan sudah stabil.

Sekarang modul ES tidak lagi eksperimental , haruskah masalah ini dibuka kembali?

Mereka masih eksperimental dan belum sepenuhnya selesai. Benderanya baru saja dicabut

namun implementasinya tetap eksperimental dan dapat berubah

Saya menyelam jauh ke dalam ini, dan imo itu belum sebanding dengan rasa sakitnya. Tunggu loader diimplementasikan atau gunakan paket esm .

Adakah yang menemukan solusi menggunakan babel? Akan sangat bagus jika saya bisa menjatuhkan konfigurasi babel saya di proyek gatsby, dan semuanya berfungsi.

Menggunakan gatsby, tetapi kemudian harus kembali ke module.exports benar-benar terasa seperti langkah mundur yang besar.

Modern web tech without the headache -> tidak terlalu :(

npm i esm

dan kemudian ubah perintah Anda agar terlihat seperti ini:

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

@wesbos @reaktivo apakah Anda masih dapat menggunakan perbaikan itu dengan gatsby terbaru (2.22.17 dalam kasus saya)?

Saya sudah membuatnya berfungsi tanpa masalah menggunakan solusi itu, tetapi memperbarui gatsby hari ini dan mulai mendapatkan kesalahan impor lagi:

```

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

KESALAHAN #10123 KONFIGURASI

Kami mengalami kesalahan saat mencoba memuat gatsby-config.php situs Anda. Perbaiki kesalahan dan coba lagi.

Kesalahan: /project/gatsby-config.js:1
(fungsi (ekspor, memerlukan, modul, __filename, __dirname) { import urlJoin from "url-join";
^^^^^^
SyntaxError: Tidak dapat menggunakan pernyataan impor di luar modul```

Sebagai alternatif, Anda mungkin ingin menggunakan TypeScript untuk file gatsby-* .

trik esm saya di atas baru saja berhenti bekerja. Saya bahkan memutar kembali versi gatsby dan node dan itu tetap ada.

Detailnya di sini jika ada yang memiliki masalah yang sama: https://github.com/reaktivo/gatsby-esm/issues/1

@caycecollins apakah Anda menemukan perbaikan?

@wesbos Saya akhirnya kembali ke kebutuhan es5 untuk saat ini :(

EDIT: Saya baru saja memperhatikan perbaikan terbaru Anda di sini https://github.com/gatsbyjs/gatsby/issues/24925 ... Saya akan mencobanya!

Perlu diketahui bahwa saya berjuang dengan ini selama satu jam dan akhirnya menemukan bahwa apa pun yang saya masukkan ke dalam package.json saya untuk membangun, konfigurasi Netlify UI lebih diutamakan. Tidak sampai saya menambahkan netlify.toml bahwa ini menjadi jelas. Moral dari cerita, edit pengaturan build UI Netlify Anda, atau hapus dan masukkan ke dalam konfigurasi. Saya lebih suka yang terakhir. 😄

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

Perlu dicatat bahwa ya, ini berhasil untuk saya:

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

Wow, saya mengerti perubahan itu sulit, tetapi Modul ES adalah Javascript sekarang, jadi sangat mengecewakan melihat (untuk alasan apa pun yang benar-benar valid) para pengelola berjuang _melawan Javascript yang mendukung ... terutama ketika JDalton dan paket esm membuat sangat mudah!

PS Beberapa detail relevan yang mungkin tidak Anda ketahui ...

• Ini adalah perbaikan dua baris. Kecuali Gatsby memiliki beberapa "titik masuk", seluruh PR untuk memperbaikinya akan menjadi tiga baris: entri package.json untuk paket esm , dan baris:

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

• Modul ini sudah banyak digunakan di perpustakaan besar seperti Knex. Ada 135 ... _thousand_ perpustakaan tergantung padanya sudah!

• Itu ditulis oleh pencipta Lodash, jadi ini bukan proyek NPM pertama Insinyur Junior: ini adalah perpustakaan serius yang ditulis oleh seorang profesional berpengalaman

• Ini sepenuhnya kompatibel ke belakang: kecuali seseorang menggunakan import atau export dalam kode Modul non-ES mereka (dan saya cukup yakin itu adalah kata kunci yang dilarang JS sejak awal waktu) semua yang ada kode akan terus bekerja sama

• jika ada masalah kinerja apa pun, sangat mudah untuk "menjaga gerbang" fitur ini dengan argumen baris perintah ( knex memilih untuk mengikuti rute ini, misalnya)

Jadi itu "mendapatkan fitur bahasa Javascript modern dengan tiga baris kode" atau ... memperjuangkannya? keuntungan.

Jika ada minat, saya akan dengan senang hati mengirimkan PR :)

Dapatkah seseorang memberikan solusi akhir dan mengunci utas ini?

Benci melakukan tarian membaca sepintas semua komentar dalam masalah yang sangat penting tetapi tampaknya tertutup di mana percakapan masih terjadi dan mencoba menyaring semua komentar untuk melihat mana yang paling banyak diacungi jempol dan kemungkinan akan menjadi solusi terbaik

Seperti yang saya katakan, bagian yang sulit bukanlah membuat modul esm bekerja: modul ini dirancang untuk membuat segalanya menjadi sangat sederhana. Saya akan mengajukan PR sendiri jika saya tahu sesuatu tentang arsitektur Gatsby (dan sekali lagi, untuk melihat perpustakaan besar lain menggunakannya, lihat saja

Bagian yang sulit adalah mendapatkan pemelihara dengan pengetahuan itu untuk peduli :(

Anda akan berpikir bahwa bahkan jika setiap pengelola memiliki kebencian pribadi untuk sintaks modul JS modern, mereka setidaknya masih bisa menghargai keinginan pengguna mereka untuk itu ... tetapi penolakan untuk membuka kembali masalah ini, apalagi memperbaikinya ( sekali lagi, mungkin dengan hanya dua baris kode) menyarankan sebaliknya. Mengingat betapa hebatnya tim ini dengan masalah lain, jujur ​​​​membingungkan saya.

Seperti yang saya katakan, bagian yang sulit adalah _tidak_ membuat modul esm bekerja: modul ini dirancang untuk membuat segalanya _sangat_ sederhana. Saya akan mengajukan PR sendiri jika saya tahu sesuatu tentang arsitektur Gatsby (dan sekali lagi, untuk melihat perpustakaan besar lain menggunakannya, lihat saja

Bagian yang sulit adalah mendapatkan pemelihara dengan pengetahuan itu untuk peduli :(

Anda akan berpikir bahwa bahkan jika setiap pengelola memiliki _benci_ pribadi untuk sintaks modul JS modern, mereka setidaknya masih dapat menghargai keinginan pengguna mereka untuk itu ... tetapi penolakan untuk membuka kembali masalah ini, apalagi memperbaikinya ( sekali lagi, mungkin dengan hanya dua baris kode) menyarankan sebaliknya. Mengingat betapa hebatnya tim ini dengan masalah lain, jujur ​​​​membingungkan saya.

Ada kabar dari pengelola tentang hal ini, tolong?