"default" is not exported by "src/App.js"というエラーの対処

はじめに

cicd時になぜかbuildの箇所でエラーが出るのでその解決策を載せていきます。ただかなり個人的なエラー(他の人がつまらそうなところ)なので、あくまで参考程度に見ていってください。例えば"default"の箇所や"src/App.js"が人によって違う値になり得ると思います。

ここまでの状況

• react,tsをviteで構築
• firebaseへのデプロイ
• jest/testing-libraryの導入
• これからcicdが動くか確認する状況

問題

push時に動くcicdで、buildのステップで以下のエラーが出る。

src/main.tsx (3:7): "default" is not exported by "src/App.js", imported by "src/main.tsx".14

解決策

1. tsconfig.jsonを修正
2. main.tsxでApp.tsxをインポートしてる箇所を修正

まずデフォルトで書き出されるtsconfig.jsonの内容を大きく変更します。エラーが出ていた時は以下のようなtsconfig.jsonになっていました。

{
  "compilerOptions": {
    "jsx": "react",
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    
  },
  "include": [
    "src",
    "./jest.setup.ts"
  ],
  "files": [],
  "references": [
    {
      "path": "./tsconfig.node.json"
    }
  ]
}

tsconfig.jsonを以下の内容に修正します。

{
  "compilerOptions": {
    "target": "ESNext",
    "useDefineForClassFields": true,
    "lib": ["DOM", "DOM.Iterable", "ESNext"],
    "allowJs": false,
    "skipLibCheck": true,
    "esModuleInterop": false,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "ESNext",
    "moduleResolution": "Node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx",
    "types": ["node", "jest", "@testing-library/jest-dom"]
  },
  "include": ["src"],
}

これでいけたかなと思ったのですが今度は以下のエラーが出ました。

An import path can only end with a '.tsx' extension when 'allowImportingTsExtensions' is enabled.

特定の設定（allowImportingTsExtensions）が無効になっている場合、インポートパスが.tsxで終わることは許可されないみたいです。そもそもこの拡張子はなくても動作するので拡張子を消すことでエラーは解消されました(js拡張子でもエラーは消える)。

/*---main.tsx---*/
import React from 'react'
import ReactDOM from 'react-dom/client'
-import App from './App.tsx' //デフォルトではこうなってる(はず)
+import App from './App'
import './index.css'

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
)

以上で無事正常にbuildされ、cicdが実行されました。

おわりに

tsconfig.jsonの書き方やオプションをもっと知る必要があると思ったので、公式docやサバイバルts等で都度学習していこうと思います。