import文を絶対パスで指定できるように、.babelrcの設定を行う

[ryota1116]

資料

• ドキュメント
  • https://github.com/tleunen/babel-plugin-module-resolver
• その他
  • https://qiita.com/mizchi/items/b24720e01562a652775b

Babelを使用してコードをコンパイルする際に、モジュール用の新しいリゾルバを追加するためのBabelプラグインです。このプラグインは、モジュールを含む新しい「ルート」ディレクトリを追加することができます。また、ディレクトリ、特定のファイル、あるいは他の npm モジュールのカスタムエイリアスを設定することができます。

手順

1. babel-plugin-module-resolverをインストール。

   
   $ npm install --save-dev babel-plugin-module-resolver                                                                                                                                                                        
   npm WARN read-shrinkwrap This version of npm is compatible with lockfileVersion@1, but package-lock.json was generated for lockfileVersion@2. I'll try to do my best with it!

core-js@3.20.1 postinstall /Users/ryota.funasaki/workspace/my_app/stacked_books_ui/node_modules/core-js node -e "try{require('./postinstall')}catch(e){}"

Thank you for using core-js ( https://github.com/zloirock/core-js ) for polyfilling JavaScript standard library!

The project needs your help! Please consider supporting of core-js:

https://opencollective.com/core-js https://patreon.com/zloirock https://paypal.me/zloirock bitcoin: bc1qlea7544qtsmj2rayg0lthvza9fau63ux0fstcz

Also, the author of core-js ( https://github.com/zloirock ) is looking for a good job -)

core-js-pure@3.20.1 postinstall /Users/ryota.funasaki/workspace/my_app/stacked_books_ui/node_modules/core-js-pure node -e "try{require('./postinstall')}catch(e){}"

• babel-plugin-module-resolver@4.1.0 added 5 packages from 6 contributors, removed 1 package, updated 1406 packages and audited 1411 packages in 31.388s found 9 vulnerabilities (2 low, 6 moderate, 1 high) run npm audit fix to fix them, or npm audit for details

2. .babelrcを作成して設定を行う。

[ryota1116]

以下のようなエラーが出たので、eslintをインストールして解決 bc159a5...7b86770

• https://github.com/facebook/react-native/issues/32528#issuecomment-962423127
• https://qiita.com/mysticatea/items/6bd56ff691d3a1577321

ERROR in ./src/index.js 7:0-24
Module not found: Error: Can't resolve './App' in '/Users/ryota.funasaki/workspace/my_app/stacked_books_ui/src'
resolve './App' in '/Users/ryota.funasaki/workspace/my_app/stacked_books_ui/src'
  using description file: /Users/ryota.funasaki/workspace/my_app/stacked_books_ui/package.json (relative path: ./src)
    Field 'browser' doesn't contain a valid alias configuration
    using description file: /Users/ryota.funasaki/workspace/my_app/stacked_books_ui/package.json (relative path: ./src/App)
      no extension
        Field 'browser' doesn't contain a valid alias configuration
        /Users/ryota.funasaki/workspace/my_app/stacked_books_ui/src/App doesn't exist
      .web.mjs
        Field 'browser' doesn't contain a valid alias configuration
        /Users/ryota.funasaki/workspace/my_app/stacked_books_ui/src/App.web.mjs doesn't exist
      .mjs
        Field 'browser' doesn't contain a valid alias configuration
        /Users/ryota.funasaki/workspace/my_app/stacked_books_ui/src/App.mjs doesn't exist
      .web.js
        Field 'browser' doesn't contain a valid alias configuration
        /Users/ryota.funasaki/workspace/my_app/stacked_books_ui/src/App.web.js doesn't exist
      .js
        Field 'browser' doesn't contain a valid alias configuration
        /Users/ryota.funasaki/workspace/my_app/stacked_books_ui/src/App.js doesn't exist
      .json
        Field 'browser' doesn't contain a valid alias configuration
        /Users/ryota.funasaki/workspace/my_app/stacked_books_ui/src/App.json doesn't exist
      .web.jsx
        Field 'browser' doesn't contain a valid alias configuration
        /Users/ryota.funasaki/workspace/my_app/stacked_books_ui/src/App.web.jsx doesn't exist
      .jsx
        Field 'browser' doesn't contain a valid alias configuration
        /Users/ryota.funasaki/workspace/my_app/stacked_books_ui/src/App.jsx doesn't exist
      as directory
        /Users/ryota.funasaki/workspace/my_app/stacked_books_ui/src/App doesn't exist

webpack 5.65.0 compiled with 1 error in 1905 ms
Compiling...
Failed to compile.

Failed to load plugin 'flowtype' declared in 'package.json » eslint-config-react-app': Cannot find module 'eslint/use-at-your-own-risk'
Require stack:
- /Users/ryota.funasaki/workspace/my_app/stacked_books_ui/node_modules/eslint-plugin-flowtype/dist/utilities/getBuiltinRule.js
- /Users/ryota.funasaki/workspace/my_app/stacked_books_ui/node_modules/eslint-plugin-flowtype/dist/rules/noUnusedExpressions.js
- /Users/ryota.funasaki/workspace/my_app/stacked_books_ui/node_modules/eslint-plugin-flowtype/dist/index.js
- /Users/ryota.funasaki/workspace/my_app/stacked_books_ui/node_modules/@eslint/eslintrc/dist/eslintrc.cjs

For anyone else with the same issue who is also completely new to React Native, changing "eslint": "8.2.0" as generated by the creation script to "eslint": "7.32.0" and then running "yarn install" seems to fix this issue.