Building static HTML failed for path "/info/"See our docs page for more info on this error: https://gatsby.dev/debug-html WebpackError: ReferenceError: globalStyle is not defined이런 오류가 나오는데 어딜 고쳐야할까요..https://github.com/codemasterli/TechLog/tree/main/blog-front확인부탁드리겠습니다. 감사합니다.

pages/index.tsx 파일이 먼저 렌더링이 되어야되는데pages/{contentfulPost.slug}.tsx 파일 이 먼저 렌더링 되는 현상이 생겼는데 이거는 무슨경우인가요 ? 갑자기 이렇게 되었습니다. 캐시 제거랑 재부팅까지했지만 해결을 못하고있습니다..

name: Deploy Blog on: push: branches: develop jobs: build: runs-on: ubuntu-latest steps: - uses: actions/checkout@v4 - uses: actions/setup-node@v4 with: node-version: 20 # 원하는 Github Secrets을 불러와 env 파일을 생성해줍니다. - name: Generate env file run: | echo "CONTENTFUL_ACCESS_TOKEN=$CONTENTFUL_ACCESS_TOKEN" >> .env echo "CONTENTFUL_SPACE_ID=$CONTENTFUL_SPACE_ID" >> .env env: CONTENTFUL_ACCESS_TOKEN: ${{ secrets.CONTENTFUL_ACCESS_TOKEN }} CONTENTFUL_SPACE_ID: ${{ secrets.CONTENTFUL_SPACE_ID }} - name: Deploy gatsby uses: enriikke/gatsby-gh-pages-action@v2 with: access-token: ${{ secrets.DEPLOYMENT_ACCESS_TOKEN }} deploy-branch: main gatsby-args: --verbosedevelop 브런치에서 위 코드를 작성하고 git push origin develop 을했는데 액션에 동작을 안합니다.https://github.com/Choi-jeonghoon/Jeong-hoon.github.io/actions/new

코드블럭 테스트language::typescriptexport const { auth, signIn, signOut, handlers } = NextAuth({등등을 존재하는데 아래와같이 코드는 작성했는데 코드 강조가 안되고있습니다. 뭐가문제일까요? import React from 'react' import { ContentfulRichTextGatsbyReference, renderRichText, } from 'gatsby-source-contentful/rich-text' import { getImage } from 'gatsby-plugin-image' import { NodeRenderer, Options } from '@contentful/rich-text-react-renderer' import { BLOCKS, INLINES, MARKS } from '@contentful/rich-text-types' import { Blockquote, Heading, Image, HorizontalRule, OrderedList, UnorderedList, Link, Code, } from './node' export const HEADERS = [ BLOCKS.HEADING_1, BLOCKS.HEADING_2, BLOCKS.HEADING_3, ] as const const CODE_METADATA_REGEX = /^language::(\w+)/ const options: Options = { renderMark: { [MARKS.CODE]: text => { const isBlock = !!text && CODE_METADATA_REGEX.test(text.toString()) if (!isBlock) return <Code>{text}</Code> else return ( <Code isBlock className={`language-${ CODE_METADATA_REGEX.exec(text.toString())?.[1] }`} > {text.toString().replace(CODE_METADATA_REGEX, '').trimStart()} </Code> ) }, }, renderNode: { ...HEADERS.reduce<{ [block: string]: NodeRenderer }>((nodes, header) => { nodes[header] = (node, children) => ( <Heading type={header}>{children}</Heading> ) return nodes }, {}), [BLOCKS.OL_LIST]: (_node, children) => ( <OrderedList>{children}</OrderedList> ), [BLOCKS.UL_LIST]: (_node, children) => ( <UnorderedList>{children}</UnorderedList> ), [BLOCKS.HR]: () => <HorizontalRule />, [BLOCKS.QUOTE]: (_node, children) => <Blockquote>{children}</Blockquote>, [BLOCKS.EMBEDDED_ASSET]: node => { const { gatsbyImageData, description } = node.data.target const image = getImage(gatsbyImageData) if (image) return <Image image={image} alt={description} /> }, [INLINES.HYPERLINK]: (node, children) => ( <Link href={node.data.uri as string} target="_blank" rel="noopener noreferrer" > {children} </Link> ), }, } export default function useRenderRichText({ raw, references, }: Queries.ContentfulPostContent) { if (!raw) return null return renderRichText( { raw, references: references as unknown as ContentfulRichTextGatsbyReference[], }, options, ) }import React from 'react' import { GatsbyBrowser } from 'gatsby' import Layout from './src/components/common/Layout' import 'prismjs/themes/prism-tomorrow.min.css' export const wrapPageElement: GatsbyBrowser['wrapPageElement'] = ({ element, props, }) => { return <Layout {...props}>{element}</Layout> } import React from 'react' import { GatsbyBrowser } from 'gatsby' import Layout from './src/components/common/Layout' import 'prismjs/themes/prism-tomorrow.min.css' export const wrapPageElement: GatsbyBrowser['wrapPageElement'] = ({ element, props, }) => { return <Layout {...props}>{element}</Layout> }import React, { useEffect } from 'react' import styled from 'styled-components' import { TPostBodyProps } from '../../types/PostBody' import Prism from 'prismjs' import 'prismjs/components/prism-typescript' import useRenderRichText from '../../hooks/useRenderRichText' const Wrapper = styled.div` position: relative; display: grid; grid-template-columns: 1fr 220px; grid-gap: 30px; justify-content: space-between; align-items: flex-start; padding-top: 100px; ` const Content = styled.div` overflow: auto; display: flex; flex-direction: column; gap: 100px; font-size: 16px; line-height: 2; word-break: break-word; ` export default function PostBody({ content }: TPostBodyProps) { const richText = useRenderRichText(content) useEffect(() => { Prism.highlightAll() }, []) return ( <Wrapper> <Content> <div id="content">{richText}</div> {/* 댓글 컴포넌트가 들어갈 자리 */} </Content> {/* 플로팅 목차 컴포넌트가 들어갈 자리 */} </Wrapper> ) }

깃허브 액션으로 배포하는 강의 자료부분 하는 중인데build가 완료돼도 배포된 사이트에선 리드미 파일만 보이는데 무슨 문제인지 잘 모르겠습니다ㅠhttps://github.com/jihun-24k/jihun-24k.github.io

안녕하세요 게시글 렌더링 컴포넌트 구현하기 강의에서 {contentfulPost.slug}.tsx 파일 내에 아래와 같이 graphql을 호출하고 useRenderRichText 훅을 구현시 아래와 같은 에러가 발생합니다. export const query = graphql` query PostPage($slug: String!) { contentfulPost(slug: { eq: $slug }) { title thumbnail { gatsbyImageData(width: 1000) } category date content { raw references { ... on ContentfulAsset { contentful_id title description gatsbyImageData(width: 774) __typename } } } } } `

안녕하세요 저번 개츠비 강의 너무 맘에 들어서 후속 강의도 거의 나오자마자 지른 수강생입니다!열심히 따라하면서 강의 진행하던 와중에 "게시글 렌더링 커스터마이징하기(2)" 강의 안 코드 블럭 메타데이터 파싱 기능 개발하기 파트에서 CODE_METADATA_REGEX 부분 정규표현식에 대해서 질문드립니다본문에 const CODE_METADATA_REGEX = /^language::(\\w+)/이런 식으로 정규표현식이 작성되어서 따라 진행했는데 자꾸 정규표현식을 인식 못하는거 같아/^language::(\w+)/위와 같이 문법을 고쳐 사용했는데 오타인가 여쭤봅니다

선생님이 알려주신대로 블로그를 만들어서 유용하게 운영중입니다. 지금까지 별 다른 문제가 없었는데 1달전부터 갑자기 마크다운 이미지가 안보이더라구요ㅠㅠ이상한건 5월31일 이후 작성한 마크다운 게시물들만 이미지가 출력되지 않는다는겁니다..제가 content 폴더에 마크다운, 이미지 파일을 싹다 몰아넣고 관리중인데 이게 문제인걸까요?? 빌드하고 public 폴더 확인해보려니 양이 너무 방대해서 하나하나 확인할 엄두가안나네요...혹시 해결 방법없을까요ㅠㅠhttps://github.com/BoubleJ/BoubleJ.github.io제 깃허브 코드입니다. 감사합니다!

npx gatsby-cli new "[프로젝트]" 프로젝트 무엇으로 작성하셨나요?

https://github.com/leechangseop71/blog 제 깃허브 주소입니다 오류이 났는지 어떻게 해결하면 될까요?

  https://github.com/leechangseop71/blog제 깃허브 주소입니다 보시고 무슨 문제인지 오류나는지 알고 싶습니다

gatsby-config.js 파일을 수정하면 에러가 뜹니다.. C:\blog\my-blog>gatsby develop success compile gatsby files - 1.894s success load gatsby config - 0.032s ERROR UNKNOWN require() of ES Module C:\blog\my-blog\node_modules\unist-util-find\index.js from C:\blog\my-blog\node_modules\gatsby-remark-external-links\index.js not supported. Instead change the require of C:\blog\my-blog\node_modules\unist-util-find\index.js in C:\blog\my-blog\node_modules\gatsby-remark-external-links\index.js to a dynamic import() which is available in all CommonJS modules. (plugins) Error: [ERR_REQUIRE_ESM]: require() of ES Module C:\blog\my-blog\node_modules\unist-util-find\index.js from C:\blog\my -blog\node_modules\gatsby-remark-external-links\index.js not supported. Instead change the require of C:\blog\my-blog\node_modules\unist-util-find\index.js in C:\blog\my-blog\node_modules\ga tsby-remark-external-links\index.js to a dynamic import() which is available in all CommonJS modules. - index.js:2 Object.<anonymous> [my-blog]/[gatsby-remark-external-links]/index.js:2:14 not finished load plugins - 0.538s다음과 같은 에러가 뜹니다... 구글링해도 모르겠습니다 ㅠㅠ

강의 잘 듣고 있습니다 배포 막바지인데요 다름이 아니라 react-helmet 모듈 에러가 계속 나는데 혹시 같은 에러 겪으신 분 있나요? https://github.com/gatsbyjs/gatsby/issues/3432 에서 gatsby-plugin-react-helmet도 추가해보래서 했는데 여전히 안되네요. 제 레포지토리 주소는 https://github.com/HEON0121/HEON0121.github.io/tree/master 입니다

// 기존에 설치시 작성되어있던 코드 exports.createPages = async ({ actions }) => { const { createPage } = actions createPage({ path: '/using-dsg', component: require.resolve('./src/templates/using-dsg.js'), context: {}, defer: true, }) }원래 gatsby-node.js에 있던 코드입니다.위의 코드를 const path = require('path') // Setup Import Alias exports.onCreateWebpackConfig = ({ getConfig, actions }) => { const output = getConfig().output || {} actions.setWebpackConfig({ output, resolve: { alias: { components: path.resolve(__dirname, 'src/components'), utils: path.resolve(__dirname, 'src/utils'), hooks: path.resolve(__dirname, 'src/hooks'), }, }, }) }이 코드로 완전 대체하면 될까요?

다름이 아니고, 모의 실행 돌리려 `gatsby develop`을 실행하면 command not found: gatsby가 떠서, 패키지 닷 제이슨에 "start: gatsby develop"을 보고 npm run start를 통해 구동시켰는데요, 별도로 개츠비 관련 무언가를 다운받아야 하나요??+)추가로 gatsby-plugin-manifest를 리무브하고 다시 구동시켜보니, 이 모듈은 인스톨했느냐는 워닝과 함꼐 돌아가질 않습니다...! 그래서 그냥 안쓰더라도 다시 깔아야하는 일이 있었습니다. 아마도 환경이 강사님이 제작하셨을 당시와 많이 달라졌나보네요ㅠㅠ

slug설정 하는 부분 강의를 보고 있는 Cannot query field "fields" on type "MarkdownRemark". error가 뜨면서 개발 서버에서 에러가 발생합니다. 며칠 서칭하고 강의를 다시 찾아보며 답을 찾으려 했는데 답이 안 나오네요. gatsby라이브러리 버전 문제일까 해서 업데이트도 해봤는디 안되구요..제 깃허브 주소는 아래와 같습니다. 도와주세요https://github.com/gull2365/blog

 안녕하세요,강의 잘 듣고 있습니다. 13강까지 잘 따라왔는데, 이미지가 잘 뜨지 않는 현상이 있는데 어떤 부분 때문인지 잘 모르겠습니다.저의 레포 링크는 여기입니다. https://github.com/changerlemond/claire-tech-blog 도움 주시면 감사하겠습니다!

안녕하세요 본 강의를 통해 블로그를 만들고 있습니다.17강을 진행하는 중에 이 메세지가 발생했고, 이로 인해 게시글을 조회할 수 없었습니다. 공식문서를 찾아 봐도 뭐가 문제인지 몰랐습니다.일단 쿼리에서 html부분을 주석 처리하고 24강까지 진행했습니다. 주석처리하니 "게시글 상단부분 구현"같은 것은 잘 됩니다. 왜 html 쿼리가 진행되지 않는지 도저히 모르겠습니다.도움이 필요합니다.제 깃허브 주소는 아래와 같습니다.https://github.com/Test-Of-LEE/Test-Of-LEE-BlogProject/tree/main/BlogProject 감사합니다.

메인 페이지에서 Props로 받아 포스트 데이터 출력하기 강의에서 여기까지 한 후, 2개의 포스트 아이템이 화면에 잘 출력되는지 확인해주세요.>>>> 이 부분까지 하고 실행을 하려니 아래와 같은 쿼리 오류가 생겼습니다.There was an error in your GraphQL query: Field "thumbnail" must not have a selection since type "String" has no subfields. This can happen if you e.g. accidentally added { } to the field "thumbnail". If you didn't expect "thumbnail" to be of type "String" make sure that your input source and/or plugin is correct. However, if you expect "thumbnail" to exist, the field might be accessible in another subfield. Please try your query in GraphiQL. It is recommended to explicitly type your GraphQL schema if you want to use optional fields.publicURL 을 못가져오는것 같은데.. 어떻게 해결해야할까요 ㅠ.ㅠ레포지토리 남깁니다! https://github.com/syankkim/syankkim.github.io

gatsby-plugin-typescript 공식 문서를 보면 jsxPragma 옵션이 들어가던데 여기선 뺀 이유가 궁금해요!추가로 혹시 이 jsxPragma가 어떤 역할을 하는지 알 수 있을까요? 검색해도 잘 이해가 안되서요!