はじめに
rails6で記述したCSSが適用されていないことから、webpackerのコンパイルを確認したところ以下のエラーが発生していました。
こちらの対処方法について確認していきます。
参考
railsでの開発を以下の通り、進めておりますのでよろしければご参考ください。
エラー内容
webpackerのコンパイル時に以下のエラーが発生しました。
% bin/webpack-dev-server
ℹ ｢wds｣: Project is running at <http://localhost:3035/>
ℹ ｢wds｣: webpack output is served from /packs/
ℹ ｢wds｣: Content not from webpack is served from /Users/username/dev/rails-app-1st/public/packs
ℹ ｢wds｣: 404s will fallback to /index.html
✖ ｢wdm｣: Hash: ac39ea58b1719d06d57f
Version: webpack 4.47.0
Time: 388ms
Built at: 07/20/2024 7:35:32 PM
Asset Size Chunks Chunk Names
js/application-056a21f40eab0a9ddf6b.js 7.77 KiB application [emitted] [immutable] application
js/application-056a21f40eab0a9ddf6b.js.map 3.51 KiB application [emitted] [dev] application
manifest.json 364 bytes [emitted]
ERROR in ./app/javascript/packs/application.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
Error: [BABEL]: --- PLACEHOLDER PACKAGE ---
This @babel/plugin-proposal-private-property-in-object version is not meant to
be imported. Something is importing
@babel/plugin-proposal-private-property-in-object without declaring it in its
dependencies (or devDependencies) in the package.json file.
Add "@babel/plugin-proposal-private-property-in-object" to your devDependencies
to work around this error. This will make this message go away.
(While processing: /Users/username/dev/rails-app-1st/node_modules/@babel/plugin-proposal-private-property-in-object/lib/index.js)
at Object.<anonymous> (/Users/username/dev/rails-app-1st/node_modules/@babel/plugin-proposal-private-property-in-object/lib/index.js:28:7)
at Module._compile (node:internal/modules/cjs/loader:1364:14)
at Module._extensions..js (node:internal/modules/cjs/loader:1422:10)
at Module.load (node:internal/modules/cjs/loader:1203:32)
at Module._load (node:internal/modules/cjs/loader:1019:12)
at Module.require (node:internal/modules/cjs/loader:1231:19)
at require (node:internal/modules/helpers:177:18)
at loadPartialConfigAsync (/Users/username/dev/rails-app-1st/node_modules/@babel/core/lib/config/index.js:34:85)
at Object.<anonymous> (/Users/username/dev/rails-app-1st/node_modules/babel-loader/lib/index.js:126:26)
ERROR in (webpack)-dev-server/client?<http://localhost:3035>
Module build failed (from ./node_modules/babel-loader/lib/index.js):
Error: [BABEL]: --- PLACEHOLDER PACKAGE ---
This @babel/plugin-proposal-private-property-in-object version is not meant to
be imported. Something is importing
@babel/plugin-proposal-private-property-in-object without declaring it in its
dependencies (or devDependencies) in the package.json file.
Add "@babel/plugin-proposal-private-property-in-object" to your devDependencies
to work around this error. This will make this message go away.
(While processing: /Users/username/dev/rails-app-1st/node_modules/@babel/plugin-proposal-private-property-in-object/lib/index.js)
at Object.<anonymous> (/Users/username/dev/rails-app-1st/node_modules/@babel/plugin-proposal-private-property-in-object/lib/index.js:28:7)
at Module._compile (node:internal/modules/cjs/loader:1364:14)
at Module._extensions..js (node:internal/modules/cjs/loader:1422:10)
at Module.load (node:internal/modules/cjs/loader:1203:32)
at Module._load (node:internal/modules/cjs/loader:1019:12)
at Module.require (node:internal/modules/cjs/loader:1231:19)
at require (node:internal/modules/helpers:177:18)
at loadPartialConfigAsync (/Users/username/dev/rails-app-1st/node_modules/@babel/core/lib/config/index.js:34:85)
at Object.<anonymous> (/Users/username/dev/rails-app-1st/node_modules/babel-loader/lib/index.js:126:26)
ℹ ｢wdm｣: Failed to compile.
このエラーメッセージは、Babelのプラグイン @babel/plugin-proposal-private-property-in-object に関する問題を示しています。具体的には、このプラグインが依存関係に追加されていないため、Babelがビルドを失敗していることを示しています。
エラーの解説
エラーメッセージの要点は以下の通りです
- エラー内容
Error: [BABEL]: --- PLACEHOLDER PACKAGE --- This @babel/plugin-proposal-private-property-in-object version is not meant to be imported. Something is importing @babel/plugin-proposal-private-property-in-object without declaring it in its dependencies (or devDependencies) in the package.json file. Add "@babel/plugin-proposal-private-property-in-object" to your devDependencies to work around this error.このメッセージは、@babel/plugin-proposal-private-property-in-objectプラグインが、プロジェクトのpackage.jsonのdependenciesまたはdevDependenciesに追加されていないため、エラーが発生していることを示しています。 - 原因
- プラグイン
@babel/plugin-proposal-private-property-in-objectがプロジェクトの依存関係としてインストールされていない。 - Babelの設定が、このプラグインを使用するように指定されているが、実際にはそのプラグインがインストールされていない。
- プラグイン
対処方法
以下の通り、対処して解決しましたので確認していきます。
@babel/plugin-proposal-private-property-in-objectをインストール プロジェクトの依存関係として@babel/plugin-proposal-private-property-in-objectを追加します。以下のコマンドを実行して、開発依存関係に追加します
yarn add --dev @babel/plugin-proposal-private-property-in-objectまたは、npmを使用している場合は次のコマンドを実行します
npm install --save-dev @babel/plugin-proposal-private-property-in-object- Babelの設定ファイルの確認
.babelrcやbabel.config.jsファイルで、このプラグインが正しく設定されているか確認してください。例えば、.babelrcファイルの一部は以下のようになります
{
"presets": ["@babel/preset-env"],
"plugins": [
"@babel/plugin-proposal-private-methods",
"@babel/plugin-proposal-private-property-in-object"
]
}- 依存関係の再インストール インストール後に依存関係のキャッシュや不整合が問題となる場合があります。その場合、
node_modulesを削除し、再インストールすることが有効です。
rm -rf node_modules
yarn installまたは、npmを使用している場合は以下のコマンドを使用します。
rm -rf node_modules
npm install- Webpackの設定確認 Webpackの設定ファイル（
webpack.config.js）も確認し、Babelの設定が正しく反映されているか確認しておきます。
これらの手順を試すことで、BabelとWebpackのビルドエラーが解決しました。
再度、bin/webpack-dev-server を実行して、ビルドが成功するか確認してください。
% yarn add --dev @babel/plugin-proposal-private-property-in-object
yarn add v1.22.22
[1/4] 🔍 Resolving packages...
warning @babel/plugin-proposal-private-property-in-object@7.21.11: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-private-property-in-object instead.
[2/4] 🚚 Fetching packages...
[3/4] 🔗 Linking dependencies...
warning "@babel/plugin-proposal-private-methods > @babel/helper-create-class-features-plugin@7.24.8" has unmet peer dependency "@babel/core@^7.0.0".
warning "@babel/plugin-proposal-private-property-in-object > @babel/plugin-syntax-private-property-in-object@7.14.5" has unmet peer dependency "@babel/core@^7.0.0-0".
warning " > @babel/plugin-proposal-private-methods@7.18.6" has unmet peer dependency "@babel/core@^7.0.0-0".
warning " > @babel/plugin-proposal-private-property-in-object@7.21.11" has unmet peer dependency "@babel/core@^7.0.0-0".
[4/4] 🔨 Building fresh packages...
success Saved lockfile.
success Saved 1 new dependency.
info Direct dependencies
└─ @babel/plugin-proposal-private-property-in-object@7.21.11
info All dependencies
└─ @babel/plugin-proposal-private-property-in-object@7.21.11
✨ Done in 2.10s.
rails-app-1st % bin/webpack-dev-server
ℹ ｢wds｣: Project is running at <http://localhost:3035/>
ℹ ｢wds｣: webpack output is served from /packs/
ℹ ｢wds｣: Content not from webpack is served from /Users/username/dev/rails-app-1st/public/packs
ℹ ｢wds｣: 404s will fallback to /index.html
Deprecation Warning: Sass's behavior for declarations that appear after nested
rules will be changing to match the behavior specified by CSS in an upcoming
version. To keep the existing behavior, move the declaration above the nested
rule. To opt into the new behavior, wrap the declaration in `& {}`.
More info: <https://sass-lang.com/d/mixed-decls>
┌──> node_modules/bootstrap/scss/_reboot.scss
503 │ font-weight: $legend-font-weight;
│ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ declaration
╵
┌──> node_modules/bootstrap/scss/vendor/_rfs.scss
136 │ ┌ @media (#{$rfs-mq-property-width}: #{$rfs-mq-value}) {
137 │ │ @content;
138 │ │ }
│ └─── nested rule
╵
node_modules/bootstrap/scss/_reboot.scss 503:3 @import
node_modules/bootstrap/scss/bootstrap.scss 16:9 @import
app/javascript/stylesheets/application.scss 1:9 root stylesheet
Deprecation Warning: Sass's behavior for declarations that appear after nested
rules will be changing to match the behavior specified by CSS in an upcoming
version. To keep the existing behavior, move the declaration above the nested
rule. To opt into the new behavior, wrap the declaration in `& {}`.
More info: <https://sass-lang.com/d/mixed-decls>
┌──> node_modules/bootstrap/scss/_reboot.scss
504 │ line-height: inherit;
│ ^^^^^^^^^^^^^^^^^^^^ declaration
╵
┌──> node_modules/bootstrap/scss/vendor/_rfs.scss
136 │ ┌ @media (#{$rfs-mq-property-width}: #{$rfs-mq-value}) {
137 │ │ @content;
138 │ │ }
│ └─── nested rule
╵
node_modules/bootstrap/scss/_reboot.scss 504:3 @import
node_modules/bootstrap/scss/bootstrap.scss 16:9 @import
app/javascript/stylesheets/application.scss 1:9 root stylesheet
Deprecation Warning: Sass's behavior for declarations that appear after nested
rules will be changing to match the behavior specified by CSS in an upcoming
version. To keep the existing behavior, move the declaration above the nested
rule. To opt into the new behavior, wrap the declaration in `& {}`.
More info: <https://sass-lang.com/d/mixed-decls>
┌──> node_modules/bootstrap/scss/_type.scss
38 │ font-family: $display-font-family;
│ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ declaration
╵
┌──> node_modules/bootstrap/scss/vendor/_rfs.scss
136 │ ┌ @media (#{$rfs-mq-property-width}: #{$rfs-mq-value}) {
137 │ │ @content;
138 │ │ }
│ └─── nested rule
╵
node_modules/bootstrap/scss/_type.scss 38:5 @import
node_modules/bootstrap/scss/bootstrap.scss 17:9 @import
app/javascript/stylesheets/application.scss 1:9 root stylesheet
Deprecation Warning: Sass's behavior for declarations that appear after nested
rules will be changing to match the behavior specified by CSS in an upcoming
version. To keep the existing behavior, move the declaration above the nested
rule. To opt into the new behavior, wrap the declaration in `& {}`.
More info: <https://sass-lang.com/d/mixed-decls>
┌──> node_modules/bootstrap/scss/_type.scss
39 │ font-style: $display-font-style;
│ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ declaration
╵
┌──> node_modules/bootstrap/scss/vendor/_rfs.scss
136 │ ┌ @media (#{$rfs-mq-property-width}: #{$rfs-mq-value}) {
137 │ │ @content;
138 │ │ }
│ └─── nested rule
╵
node_modules/bootstrap/scss/_type.scss 39:5 @import
node_modules/bootstrap/scss/bootstrap.scss 17:9 @import
app/javascript/stylesheets/application.scss 1:9 root stylesheet
Deprecation Warning: Sass's behavior for declarations that appear after nested
rules will be changing to match the behavior specified by CSS in an upcoming
version. To keep the existing behavior, move the declaration above the nested
rule. To opt into the new behavior, wrap the declaration in `& {}`.
More info: <https://sass-lang.com/d/mixed-decls>
┌──> node_modules/bootstrap/scss/_type.scss
40 │ font-weight: $display-font-weight;
│ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ declaration
╵
┌──> node_modules/bootstrap/scss/vendor/_rfs.scss
136 │ ┌ @media (#{$rfs-mq-property-width}: #{$rfs-mq-value}) {
137 │ │ @content;
138 │ │ }
│ └─── nested rule
╵
node_modules/bootstrap/scss/_type.scss 40:5 @import
node_modules/bootstrap/scss/bootstrap.scss 17:9 @import
app/javascript/stylesheets/application.scss 1:9 root stylesheet
Warning: 22 repetitive deprecation warnings omitted.
ℹ ｢wdm｣: Hash: ea12d3f0eb92c7e46281
Version: webpack 4.47.0
Time: 5634ms
Built at: 07/20/2024 7:38:08 PM
Asset Size Chunks Chunk Names
js/application-babbfa78e1f1bef42d0b.js 2.18 MiB application [emitted] [immutable] application
js/application-babbfa78e1f1bef42d0b.js.map 2.2 MiB application [emitted] [dev] application
manifest.json 454 bytes [emitted]
media/images/top-d43fd6d800b48eaf64c27b9f1be66448.png 414 KiB [emitted]
ℹ ｢wdm｣: Compiled successfully.問題なくコンパイルが成功しました。
まとめ
今回は、CSSが適用されない原因として。Webpackerがコンパイルできない際のBABELエラーに関して、対処していきました。
では、開発に戻り引き続き進めていきたいと思います！
コメント