発生している問題
Docker、Rails6系、Tailwindcss バージョン3を使用して開発を行っています。別の問題があり、tailwindをv2からv3にするためにpackage.jsonでアンインストール、再インストールを行いました。
すると、localhost:3000を開いた際に以下のエラーが発生しました。
package.jsonの中身は以下のようになっています。
# package.json
{
"name": "myapp",
"private": true,
"dependencies": {
"@rails/actioncable": "^6.0.0",
"@rails/activestorage": "^6.0.0",
"@rails/ujs": "^6.0.0",
"@rails/webpacker": "5.4.3",
"postcss": "^8.4.14",
"postcss-loader": "^4.3.0",
"tailwindcss": "^3.1.6",
"turbolinks": "^5.2.0",
"vue": "^2.6.14",
"vue-loader": "^15.7.0",
"vue-template-compiler": "^2.6.12",
"webpack": "^4.46.0",
"webpack-cli": "^3.3.12"
},
"version": "0.1.0",
"devDependencies": {
"webpack-dev-server": "^3"
}
}
考えられること
元々のpackage.jsonの中身は以下の状態でしたが、npm uninstallとnpm installを繰り返して上記の内容になったので、vue関連とpostcss、tailwindcssのバージョンの組み合わせに問題があるかもと考えました。
調べても解決に辿りつかないのでぜひお力添えのほどよろしくお願いします。
# package.json
{
"name": "myapp",
"private": true,
"dependencies": {
"@fullhuman/postcss-purgecss": "4",
"@rails/actioncable": "^6.0.0",
"@rails/activestorage": "^6.0.0",
"@rails/ujs": "^6.0.0",
"@rails/webpacker": "5.4.3",
"autoprefixer": "10",
"postcss": "8",
"postcss-loader": "4",
"tailwindcss": "2",
"turbolinks": "^5.2.0",
"vue": "^2.6.14",
"vue-loader": "^15.7.0",
"vue-template-compiler": "^2.6.12",
"webpack": "^4.46.0"
},
"version": "0.1.0",
"devDependencies": {
"webpack-cli": "^3.3.12",
"webpack-dev-server": "^3"
}
}