2
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

tailwind3.0 + react + typescript エラー

Posted at

参考にした記事
tailwind2.0 + react + typescript 環境構築

上記の記事通りすすめていったらいくつか躓いた点があったので記事にしました。
基本的な進め方は上記記事を参照してください。
tailwindのverが変わっておりそれに伴ってyarnスタート時にエラーが発生していました。

環境 
OS:win10

$ node -v
v16.13.2

$ yarn -v
1.22.17

$ npx create-react-app --version
5.0.0

エラーその1

```:gitbash $ yarn start yarn run v1.22.17 $ craco start 'craco' は、内部コマンドまたは外部コマンド、 操作可能なプログラムまたはバッチ ファイルとして認識されていません。 error Command failed with exit code 1. info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command. ```

原因:すでにビルドしていたreactappがstartしたままの状態でtailwindとcracoをnpm installしたため正しくインストールできなかった

エラーその2

たぶん多くの人がこちらで引っかかったと思います。

エラー内容

gitbash
$ yarn start
yarn run v1.22.17
$ craco start
C:\myportfolio\node_modules\@craco\craco\lib\features\webpack\style\postcss.js:54
                craPlugins = match.loader.options.plugins();
                                                  ^

TypeError: match.loader.options.plugins is not a function
(省略)
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

原因:craco.config.jsの設定内容に問題があります。tailwind3.0からcracoの設定内容にtailwindに関する記述は必要なくなりました。

craco.config.js
module.exports = {}

参考にしたサイト
https://github.com/facebook/create-react-app/issues/11771#issuecomment-997217680

2
0
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?