高木のブログ

【Create React App】yarn buildした時に出た警告の対応

2021/11/05

Create React AppでTypeScriptとTailwind CSSの導入まで」で作ったReactアプリで、 yarn build を実行したらいくつか警告が出たのでその対応をした

Browserslistの更新を要求される

Browserslist: caniuse-lite is outdated. Please run:
npx browserslist@latest --update-db

Why you should do it regularly:
https://github.com/browserslist/browserslist#browsers-data-updating

書いてある通り、以下コマンドを実行したら良い

$ npx browserslist@latest --update-db

詳しくは [React] アプリのビルド時にBrowserslistの更新を要求されるので対処してみる | DevelopersIO を参照

DeprecationWarning: Use of deprecated folder mapping “./” in the “exports” field module resolution of the package at …

(node:61452) [DEP0148] DeprecationWarning: Use of deprecated folder mapping "./" in the "exports" field module resolution of the package at /Users/ytk
g/Workspace/react-typescript-tailwind-boilerplate/node_modules/postcss-safe-parser/node_modules/postcss/package.json.
Update this package.json to use a subpath pattern like "./*".
(Use `node --trace-deprecation ...` to show where the warning was created)

Node.jsの16系で出るPostCSSの不具合でPostCSS 8.2.12で直っているらしいが、Create React AppはPostCSSの8系をサポートしていないので、Node.jsを15系に落として解決

参考: GatsbyJSにいれたnode16系で[DEP0148] DeprecationWarning: Use of deprecated folder mapping “./” in the “exports” field module resolution of the package at …と怒られたのでその対応 - Qiita

使っている @typescript-eslint/typescript-estree のバージョンが TypeScript 4.4.4 をサポートしていない

WARNING: You are currently running a version of TypeScript which is not officially supported by @typescript-eslint/typescript-estree.

You may find that it works just fine, or you may not.

SUPPORTED TYPESCRIPT VERSIONS: >=3.3.1 <4.2.0

YOUR TYPESCRIPT VERSION: 4.4.4

Please only submit bug reports when using the officially supported version.

@typescript-eslint/typescript-estree のバージョンを上げたら良さそうだけど、上の対応でNode.jsを15系にしたら警告が出なくなった


ytkg

Written by ytkg, Twitter, GitHub