[Gatsby] @ってどこ？って聞かれる。

はじめに

vue.jsと同じように@記法(アットマーク記法)を使ってたら、Module not found: Can't resolve ~`と言われました。
つまり、@(アットマーク)ってどこやねん、そんなん解釈できんねん。ってことですね。

解決法

下記のコマンドを打って、gatsby-plugin-alias-importsというプラグインを入れましょう。

yarn add gatsby-plugin-alias-imports

入れ終わったら、設定していきます。

gatsby-config.js

module.exports = {
	...
	...
    {
      resolve: `gatsby-plugin-alias-imports`,
      options: {
        alias: {
          "@src": "src",
          "@components": "src/components",
          "@atoms": "src/components/atoms",
	  "@molecules": "src/components/molecules",
	  "@organisms": "src/components/organisms",
	  "@templates": "src/components/templates",
          "@modules": "src/modules",
          "@images": "src/images",
          "@core": "src/core",
          "@helpers": "src/helpers",
        },
        extensions: ["js", "jsx", "ts", "tsx"],
      },
    },
  ],
}

みたいな感じでgatsby-config.jsに追記します。
以上で、gatsby developが走るようになります。
あとはtypescriptでも解釈できるようにするため、以下のように設定しましょう。

tsconfig.paths.json

{
  "compilerOptions": {
    "baseUrl": "./",
    "paths": {
      "@src/*": ["src/*"],
      "@components/*": ["src/components/*"],
      "@atoms/*": ["src/components/atoms/*"],
      "@molecules/*": ["src/components/molecules/*"],
      "@organisms/*": ["src/components/organisms/*"],
      "@templates/*": ["src/components/templates/*"],
      "@modules/*": ["src/modules/*"],
      "@core/*": ["src/core/*"],
      "@images/*": ["src/images/*"],
      "@helpers/*": ["src/helpers/*"],
    }
  }
}

これで完成です。
やっぱり見た目がきれいなコードで書けるようになるのでいいですね。
個人的にアットマークの存在感好きです。
少しでも皆さんの助けになれたら幸いです。