<p>gatsby-node.js는 ES6 가져오기를 허용하지 않습니다.</p>

이 파일은 node.js에 의해 실행되므로 사용 중인 노드 버전이 지원하는 모든 버전을 지원합니다. 노드에서 Es6 모듈 지원은 여전히 ​​wip 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를 내부에서 사용할 수 있다면 멋질 것입니다.

gatsby-node.js 에서 import / export 지원을 활성화하는 단계는 무엇입니까? .mjs 파일을 사용하여 멘션에 링크된 Medium 게시물이지만 Gatsby에서는 작동하지 않을 것 같은데요?

사용하는 방법이 babel-node 대신 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 프로젝트의 경우 gatsby-node.js 에서 일어나는 일은 실제 프론트 엔드만큼 중요하며 import , async/await 를 사용하여 현대적인 방식으로 코딩할 수 없다는 것이 짜증납니다 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 파일에서 import { createArticleUrl } from '../utils/article' 처럼 createArticleUrl 도 가져올 수 있습니다.

나는 이것을 위해 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번째는 " 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 로 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://github.com/reaktivo/gatsby-esm/commit/cf620259ac8b118dea38b99409963cb26bf1b240

덕분에 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 팀에 연락하여 NPM_VERSION을 지정해야 할 수도 있습니다( 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 는 원사 작업 공간을 사용할 때 작동하지 않는 것 같습니다. 작업 공간 모듈을 찾을 수 없다고 나옵니다.

실제로 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 패키지를 사용하십시오.

babel을 사용하여 솔루션을 찾은 사람이 있습니까? 내 babel 구성을 gatsby 프로젝트에 드롭하고 모든 것이 작동하도록 할 수 있다면 좋을 것입니다.

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 최신 개츠비(제 경우에는 2.22.17)에서 해당 수정 사항을 계속 사용할 수 있습니까?

해당 솔루션을 사용하여 문제 없이 작동했지만 오늘 gatsby를 업데이트하고 가져오기 오류가 다시 발생하기 시작했습니다.

```

npx --node-arg '-r esm' 개츠비 개발

오류 #10123 구성

사이트의 gatsby-config를 로드하는 동안 오류가 발생했습니다. 오류를 수정하고 다시 시도하십시오.

오류: /project/gatsby-config.js:1
(함수(내보내기, 요구, 모듈, __filename, __dirname) { "url-join"에서 urlJoin 가져오기;
^^^^^^
SyntaxError: 모듈``` 외부에서 import 문을 사용할 수 없습니다.

대안 으로 gatsby-* 파일에 TypeScript 를 있습니다 .

위의 내 esm 트릭이 작동을 멈췄습니다. 심지어 개츠비와 노드 버전을 롤백했는데도 지속됩니다.

같은 문제가 있는 사람이 있으면 여기에 자세히 설명하세요. https://github.com/reaktivo/gatsby-esm/issues/1

@caycecollins 수정 사항을 찾았습니까?

@wesbos 지금은 es5 require로 되돌아갔습니다. :(

편집: 방금 https://github.com/gatsbyjs/gatsby/issues/24925 에서 최신 수정 사항을 발견했습니다 ... 시도해 보겠습니다!

한 시간 동안 이것으로 어려움을 겪었고 마침내 빌드를 위해 package.json에 무엇을 넣었는지에 관계없이 Netlify UI 구성이 우선한다는 것을 알아냈습니다. 이것이 명백해진 것은 netlify.toml을 추가하기 전까지였습니다. 이야기의 도덕, Netlify UI 빌드 설정을 편집하거나 지우고 구성에 버리십시오. 나는 후자를 선호한다. 😄

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

예, 이것이 저에게 효과적이라는 점은 주목할 가치가 있습니다.

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

와, 변경이 어렵다는 것을 이해하지만 ES 모듈은 이제 Javascript이므로 (완전히 타당한 이유가 무엇이든) 유지 관리자가 _Javascript 지원에 반대하여_ 싸우는 것을 보는 것은 정말 실망스럽습니다. 특히 JDalton과 그의 esm 패키지가 너무 쉬워!

추신: 당신이 알지 못할 수도 있는 몇 가지 관련 세부 정보 ...

• 이것은 두 줄 수정입니다. Gatsby에 "진입점"이 여러 개 있는 경우가 아니면 이 문제를 해결하기 위한 전체 PR은 esm 패키지에 대한 package.json 항목과 다음 행이 됩니다.

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

• 이 모듈은 이미 Knex와 같은 주요 라이브러리에서 널리 사용됩니다. 말 그대로 135개 ... 이미 그것에 의존하는 _천_개의 라이브러리가 있습니다!

• Lodash의 제작자가 작성했으므로 이것은 일부 주니어 엔지니어의 첫 NPM 프로젝트가 아닙니다. 노련한 전문가가 작성한 진지한 라이브러리입니다.

• 완전히 역호환 가능합니다. 누군가가 ES가 아닌 모듈 코드에서 import 또는 export 를 사용하지 않는 한(그리고 나는 이것이 태초부터 JS 금지 키워드였다고 확신합니다) 모든 기존 코드는 계속 동일하게 작동합니다.

• 성능 문제가 있는 경우 명령줄 인수를 사용하여 이 기능을 "게이트 유지"하는 것이 매우 쉽습니다(예 knex 는 이 경로를 선택했습니다).

그래서 그것은 "세 줄의 코드로 현대적인 자바스크립트 언어 기능을 얻습니다" 또는 ... 그것을 위해 싸우는 것입니다. 혜택.

관심이 있다면 기꺼이 PR을 제출하겠습니다. :)

누군가 최종 솔루션을 제공하고 이 스레드를 잠글 수 있습니까?

대화가 여전히 진행되고 있는 매우 중요하지만 겉보기에 닫힌 문제에 대한 모든 댓글을 훑어보고 어떤 댓글이 가장 많이 추천되고 가장 좋은 해결책이 될 수 있는지 확인하기 위해 모든 댓글을 훑어보는 이 춤을 추는 것을 싫어합니다. 😔

내가 말했듯이, 어려운 부분은 제작되지 esm 모듈 작업 :이 일을 매우 간단하게 설계되었습니다. Gatsby 아키텍처에 대해 아는 것이 있다면 직접 PR을 제출할 것입니다(또 다른 주요 라이브러리에서 이를 사용하는 것을 보려면 Knex 를 참조하십시오).

어려운 부분은 그 지식을 가진 유지 관리자를 돌보는 것입니다 :(

모든 유지 관리자가 최신 JS 모듈 구문을 개인적으로 싫어 하더라도 최소한 사용자의 요구에 감사할 수 있다고 생각할 것입니다. 다시, 아마도 단 두 줄의 코드로) 그렇지 않으면 제안합니다. 이 팀이 다른 문제에 대해 얼마나 훌륭했는지 감안할 때 솔직히 저에게는 혼란스럽습니다.

내가 말했듯이 어려운 부분은 esm 모듈을 작동하게 하는 것이 _아니다_: 일을 _매우_ 간단하게 하도록 설계되었습니다. Gatsby 아키텍처에 대해 아는 것이 있다면 직접 PR을 제출할 것입니다(또 다른 주요 라이브러리에서 이를 사용하는 것을 보려면 Knex 를 참조하십시오).

어려운 부분은 그 지식을 가진 유지 관리자를 돌보는 것입니다 :(

모든 유지 관리자가 최신 JS 모듈 구문에 대해 개인적으로 _싫어하는_ 기능을 갖고 있다고 해도 최소한 사용자의 요구에 감사할 수 있다고 생각할 것입니다. 다시, 아마도 단 두 줄의 코드로) 그렇지 않으면 제안합니다. 이 팀이 다른 문제에 대해 얼마나 훌륭했는지 감안할 때 솔직히 저에게는 혼란스럽습니다.

이 주제에 대해 관리자로부터 한마디 부탁드립니다.