search

striderkein / react-bolierplate

boilerplate for React(js, ts, Next.js)
MIT License
0 stars 0 forks source link

Module not found エラーが解決できない #6

Open striderkein opened 2 years ago

striderkein commented 2 years ago

image

striderkein commented 2 years ago

下記の手順でエラーが抑制できた 2bb12bc

パッケージ追加コマンド

yarn remove babel-core babel-plugin-module-resolver eslint-import-resolver-babel-module
striderkein commented 2 years ago

まだエラーが出たり出なかったりするので↓を参考に対応しようと思ふ https://stackoverflow.com/questions/56548928/eslint-resolve-error-on-imports-using-with-path-mapping-configured-jsconfig-json

striderkein commented 2 years ago

たぶん直った。 7fb6b20

最初に結論

lint ルール plugin:react/recommended に含まれるルールのうち過剰なものがあったことが原因。

evidence

styles/App.css を

.App-header {
  background-color: #f00bdd;

App.jsx からこうやって import して

import 'styles/App.css'

こうなった（正常にインポートできていること および lint エラーが出ないことを確認）。 image

なにがいけなかったのか

.eslintrc.js で下記のようにして plugin:react/recommended を適用している。

  extends: [
    'plugin:react/recommended',

当該プラグインでは import/no-unresolved ルールがオンになっているため、そのままでは 絶対パスでのインポート が lint エラーとなる。 当該 lint エラーを抑制するため、 jsconfig.json を下記のように設定していたが、解消しなかった（エラーが出たり出なかったりする）。

{
  "compilerOptions": {
    "target": "es2016",
    "module": "commonjs",
    "baseUrl": "src",         // <- ココ
    "allowJs": true
  },
  "incrude":["src"],         // <- ココ
  "exclude": ["node_modules"]
}

さらに調べたところ、「そもそも (t|j)sconfig.js[on] 内では paths はハンドルできない（しない）」らしく、react/recommended のうち import/no-unresolved ルールをオフにしたところ、下記を確認できた。

これにより、今回の修正は適正であったと結論した。

striderkein commented 2 years ago

別解

eslint-import-resolver-jsconfig というパッケージがある。 公式 によれば下記のようにするだけで「絶対パスでのインポート」が可能となる、とのことだが…？

step-1: install 省略

step-2: .eslintrc.js[on] を下記のように設定

"settings": {
    "import/resolver": {
        "jsconfig": {
            "config": "jsconfig.json"
        }
    }
}

step-3: jsconfig.json を下記のように設定

{
  "compilerOptions": {
    "baseUrl": ".",
    "jsx": "react",
    "paths": {
      "@/*": ["./src/*"]
    }
}

やってみた 4778249

→ だめだった。lint エラーではなく、そもそも読み込めていない様子。 image

なぜうまくいかないのか

上記のパッケージ公式ページの説明によれば

I personally use it for easy eslint alias support with create-react-app and react-app-rewired + react-app-rewire-alias.

とのことなので、react-app-rewired してからでないと機能しないのかもしれない（推測）。