<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がbabelを通過するように構成を変更する方法はありますか？ 私にとってはそれほど緊急ではありませんが、その中でJSXを使用できるのは素晴らしいことです。

何が有効にする手順になりますimport / exportでのサポートをgatsby-node.js ？ .mjsファイルを使用したメンションにリンクされたMediumの投稿ですが、Gatsbyでは機能しないと思いますか？

babel-node代わりにnode babel-nodeを使用する方法はありますか？

私はこれにesmを使用し、これまでのところ機能します。 これが私がしたことです：

1. esm （ npm i esm ）をインストールします
2. ルートフォルダ（ gatsby-node.jsを含む同じフォルダ）にgatsby-node.esm.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

何か案は？ この関数を使用して記事/投稿のURLを作成し、Reactコンポーネントと同じようにインポートしたいと思います。 ありがとう！

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.jsを含む同じフォルダ）にgatsby-node.esm.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この方法でそれを行うことについて何か危険なことはありますか？ 安全であれば、ドキュメントに追加できるからです:)

5番目の「 gatsby-node.esm.js importを使いたい」ですか？

@WeZZardあなたは完全に正しいです！ 投稿で修正します。

これが機能することを私が見つけたもう1つの方法は、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 netlifyするためにあなたのサイトを展開することはできますか？

@rotexhawk例をプッシュするだけで、

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

あなたが実行している作るnpm install --save-dev esmの前にして、ビルド設定が実行されるようにnpm run buildの代わりにgatsby build

このコミットをチェックしてください： https ：

おかげで、私はesmをインストールしました。 問題は、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チームと連絡を。https： //www.netlify.com/docs/build-settings/#node-npm-and-yarnを参照して

@reaktivoが行います。 すべての助けに感謝します。

Gatsbyはes6モジュールがgatsby-node.jsファイル内で機能する必要があることを示しているため、ドキュメントにそのesmアプローチを追加することを強く検討します。 モジュールを混在させると、次のエラーメッセージが出力されます。

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は、yarnワークスペースを使用している場合は機能しないようです。 ワークスペースモジュールが見つからないと表示されます。

実際には、 gatsby-node.ems.jsの最初のレベルのインポートでのみ機能し、インポートされたコンポーネントもインポートするものでは機能しないようです。

例えば、

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

エラーをスローします：

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

Nodeモジュールはほぼそこにあるので、 --experimental-modules代わりにesm --experimental-modulesノードを使用したかったのです。

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パッケージを使用してください。

誰かがbabelを使用して解決策を見つけましたか？ gatsbyプロジェクトにbabel設定をドロップして、すべて機能させることができれば素晴らしいと思います。

gatsbyを使用していますが、 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は、最新のgatsby（私の場合は2.22.17）でもその修正を使用できますか？

私はそのソリューションを使用して問題なく動作しましたが、今日gatsbyを更新し、インポートエラーが再び発生し始めました：

`` `

npx --node-arg'-r esm'gatsbydevelop

エラー＃10123設定

サイトのgatsby-configを読み込もうとしたときにエラーが発生しました。 エラーを修正して、再試行してください。

エラー：/project/gatsby-config.js：1
（function（exports、require、module、__ filename、__ dirname）{import urlJoin from "url-join";
^^^^^^
SyntaxError：モジュールの外部でインポートステートメントを使用できません `` `

別の方法として、 gatsby-*ファイルにTypeScriptをできます。

上記の私のesmトリックはちょうど機能しなくなりました。 gatsbyとノードバージョンをロールバックしても、それは持続します。

誰かが同じ問題を抱えている場合は、ここで詳細を説明してください： //github.com/reaktivo/gatsby-esm/issues/1

@caycecollins修正を見つけましたか？

@wesbos私は今のところes5requireに戻ることになりました:(

編集：ここであなたの最新の修正に気づきましたhttps://github.com/gatsbyjs/gatsby/issues/24925 ...試してみます！

これに1時間苦労し、最終的に、ビルド用にpackage.jsonに何を入れても、NetlifyUI構成が優先されていることがわかりました。 これが明らかになったのは、netlify.tomlを追加するまではありませんでした。 話の教訓、Netlify UIビルド設定を編集するか、それらをクリアして構成に入れます。 私は後者が好きです。 😄

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

はい、これは私のために働いたことは注目に値します：

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

うわー、変更が難しいことは理解していますが、ESモジュールは現在Javascriptであるため、メンテナが_Javascriptのサポートに反対して_戦っているのを見るのは本当に残念です...特にJDaltonと彼のesmパッケージがとても簡単です！

PSあなたが気付いていないかもしれないいくつかの関連する詳細...

• これは2行の修正です。 Gatsbyに複数の「エントリポイント」がない限り、これを修正するPR全体は3行になります。 esmパッケージのpackage.jsonエントリと、次の行です。

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

• このモジュールは、Knexなどの主要なライブラリですでに広く使用されています。 文字通り135 ... _千_のライブラリがすでにそれに依存しています！

• Lodashの作成者によって書かれたので、これはジュニアエンジニアの最初のNPMプロジェクトではありません。経験豊富な専門家によって書かれた本格的なライブラリです。

• それは完全に下位互換性があります：誰かが非ESモジュールコードでimportまたはexportを使用しない限り（そしてそれらは時間の夜明けからJS禁止キーワードであると確信しています）すべて存在しますコードは同じように機能し続けます

• パフォーマンス上の懸念がある場合は、コマンドライン引数を使用してこの機能を「ゲートキープ」するのは簡単です（たとえば、 knexはこのルートを選択しました）

つまり、「3行のコードで最新のJavascript言語機能を手に入れる」ということですか、それとも...それと戦うのですか？ 利点。

興味があれば、PRを提出させていただきます:)

誰かが最終的な解決策を提供し、このスレッドをロックできますか？

会話がまだ行われている非常に重要であるが閉じているように見える問題ですべてのコメントをスキミングするこのダンスを行うのは嫌いであり、すべてのコメントをふるいにかけて、どれが最も親指を立てており、最良の解決策である可能性が高いかを確認しようとします😔

私が言ったように、難しい部分はesmモジュールを機能させることではありません：それは物事を非常に単純にするように設計されています。 Gatsbyアーキテクチャについて何か知っていれば、自分でPRを提出します（また、別の主要なライブラリがそれを使用していることを確認するには、Knexを見てください）。

難しいのは、その知識を持ったメンテナに気を配ってもらうことです:(

すべてのメンテナが最新のJSモジュール構文を個人的に嫌っていたとしても、少なくともユーザーのそれに対する欲求を理解できると思うでしょう...しかし、この問題を再度開くことさえ拒否し、それを修正することは言うまでもありません（繰り返しになりますが、おそらく2行のコードだけで）そうではないことを示唆しています。 このチームが他の問題にどれほど優れているかを考えると、正直なところ私には混乱しています。

私が言ったように、難しい部分はesmモジュールを機能させることではありません。それは物事を非常に単純にするように設計されています。 Gatsbyアーキテクチャについて何か知っていれば、自分でPRを提出します（また、別の主要なライブラリがそれを使用していることを確認するには、Knexを見てください）。

難しいのは、その知識を持ったメンテナに気を配ってもらうことです:(

すべてのメンテナが最新のJSモジュール構文に対して個人的な「嫌い」を持っていたとしても、少なくともユーザーのそれに対する欲求を理解できると思うでしょう...しかし、この問題を再度開くことさえ拒否し、それを修正することは言うまでもありません（繰り返しになりますが、おそらく2行のコードだけで）そうではないことを示唆しています。 このチームが他の問題にどれほど優れているかを考えると、正直なところ私には混乱しています。

この件についてメンテナから一言お願いします。