修正

Author: YuzukiEndo

babel.config.js

@@ -79,4 +79,4 @@ module.exports = function(api) {
       ]
     ].filter(Boolean)
   }
-}
+}

config/webpack.config.js

@@ -5,8 +5,10 @@ module.exports = {
   mode: 'production',
   entry: './app/javascript/packs/application.js',
   output: {
-    filename: 'main.js',
-    path: path.resolve(__dirname, 'app/assets/builds'),
+    filename: 'js/[name]-[contenthash].js',
+    chunkFilename: 'js/[name]-[contenthash].chunk.js',
+    path: path.resolve(__dirname, 'public/packs'),
+    publicPath: '/packs/'
   },
   module: {
     rules: [
@@ -27,12 +29,11 @@ module.exports = {
   },
   plugins: [
     new MiniCssExtractPlugin({
-      filename: '[name].css'
+      filename: 'css/[name]-[contenthash].css',
+      chunkFilename: 'css/[name]-[contenthash].chunk.css'
     })
   ],
   resolve: {
-    fallback: {
-      global: require.resolve('global')
-    }
+    extensions: ['.js', '.scss', '.css']
   }
 };

config/webpack/environment.js

@@ -1,11 +1,3 @@
 const { environment } = require('@rails/webpacker')
-const webpack = require('webpack')
-
-environment.plugins.prepend('Provide',
-  new webpack.ProvidePlugin({
-    $: 'jquery',
-    jQuery: 'jquery'
-  })
-)
 
 module.exports = environment

config/webpack/production.js

@@ -2,4 +2,9 @@ process.env.NODE_ENV = process.env.NODE_ENV || 'production'
 
 const environment = require('./environment')
 
-module.exports = environment.toWebpackConfig()
+const config = environment.toWebpackConfig()
+
+// 問題のある node 設定を削除
+delete config.node
+
+module.exports = config

config/webpacker.yml

@@ -7,11 +7,10 @@ default: &default
   public_output_path: packs
   cache_path: tmp/cache/webpacker
   webpack_compile_output: true
-  additional_paths: ['app/javascript/stylesheets']
 
   # Additional paths webpack should lookup modules
   # ['app/assets', 'engine/foo/app/assets']
-  #additional_paths: []
+  additional_paths: []
 
   # Reload manifest.json on all requests so we reload latest compiled packs
   cache_manifest: false

package.json

@@ -20,31 +20,32 @@
     "babel-loader": "^8.2.0",
     "babel-plugin-macros": "^3.1.0",
     "bootstrap": "^5.3.3",
-    "css-loader": "^6.8.1",
+    "css-loader": "5.2.7",
     "global": "^4.4.0",
     "jquery": "^3.7.1",
-    "mini-css-extract-plugin": "^2.7.6",
+    "mini-css-extract-plugin": "1.6.2",
     "sass": "^1.77.8",
-    "sass-loader": "^13.3.2",
-    "style-loader": "^3.3.3",
+    "sass-loader": "10.1.1",
+    "style-loader": "2",
     "turbolinks": "^5.2.0",
-    "webpack": "^5.88.0",
-    "webpack-cli": "^4.10.0"
+    "webpack": "4.46.0",
+    "webpack-cli": "3.3.12"
   },
   "version": "0.1.0",
   "main": "index.js",
   "repository": "[email protected]:YuzukiEndo/recipi_ai_assistant.git",
   "author": "YuzukiEndo ",
   "license": "MIT",
   "devDependencies": {
-    "webpack-dev-server": "^4.15.1"
+    "webpack-dev-server": "^3"
   },
   "scripts": {
     "start": "node index.js",
     "build": "webpack --config webpack.config.js",
     "heroku-postbuild": "webpack --config webpack.config.js"
   },
   "engines": {
-    "node": "16.x"
+    "node": "16.x",
+    "yarn": "1.22.x"
   }
 }