Noh | エンジニア向け情報共有コミュニティ
Signup / Login

Astro使ってるときに遭遇したエラーと解決集

astro

投稿日: 2024/07/17

ReferenceError An error occurred. ○○ is not defined

マークダウン一覧からタグ情報を取り出して、各タグページを作成させようとしていた。

getStaticPaths()を使うと実現できる。

https://docs.astro.build/ja/guides/routing/#%E9%9D%99%E7%9A%84ssg%E3%83%A2%E3%83%BC%E3%83%89
src/pages/tags/[tag].astro
---
import { getTags } from '../../helpers/getTags';

const allJobs = await Astro.glob('../../pages/jobs/*.md')
const tags = getTags(allJobs)

export function getStaticPaths() {
  return tags.map(tag => {
    return {params: {tag: tag.name}}
  })
}

const { tag } = Astro.params;
---
<div>{tag}</div>

以下のエラーが出た。

ReferenceError
An error occurred.
tags is not defined

解決策

Astroのページでは、getStaticPathsはビルド時に最初に実行される関数であるため、ページのスコープ内で定義された変数にはアクセスできないらしい。

getStaticPathsの中でAstro.globとgetTagsを呼び出すように変更する必要がある。

src/pages/tags/[tag].astro
---
import { getTags } from '../../helpers/getTags';

export async function getStaticPaths() {
  const allJobs = await Astro.glob('../../pages/jobs/*.md')
  const tags = getTags(allJobs)
  return tags.map(tag => {
    return {params: {tag: tag.name}}
  })
}

const { tag } = Astro.params;
---
<div>{tag}</div>

Cannot find module '@/layouts/Layout.astro' imported from '/app/src/pages/tags/[tag].astro'

Astroでもimport aliasが使える。

https://docs.astro.build/ja/guides/imports/#import%E3%82%A8%E3%82%A4%E3%83%AA%E3%82%A2%E3%82%B9
tsconfig.json
{
  "extends": "astro/tsconfigs/strict",
  "compilerOptions": {
    "jsx": "react-jsx",
    "jsxImportSource": "react",
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}

のように設定を書くと

import Layout from '@/layouts/Layout.astro';

とimportできる。

この時、Cannot find module '@/layouts/Layout.astro' imported from '/app/src/pages/tags/[tag].astro'とエラーが出た。

Astroに限らないが、baseUrlが必要。

tsconfig.json
{
  "extends": "astro/tsconfigs/strict",
  "compilerOptions": {
    "jsx": "react-jsx",
    "jsxImportSource": "react",
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}
yosi

Noh を作ってるエンジニア。

目次