node.js – Unable to deploy rails app to Heroku due to compilation failure

I’m attempting to make sure that my CSS is included in the project but keep getting this error when deploying to Heroku. Previously, all of my bootstrap elements working on a local server. After deploying to Heroku no css is being applied. Now I’ve gotten to a point where I’ve received a new error.

remote:        Compiling...
remote:        Compilation failed:
remote:        (node:2087) [DEP_WEBPACK_MAIN_TEMPLATE_RENDER_MANIFEST] DeprecationWarning: MainTemplate.hooks.renderManifest is deprecated (use Compilation.hooks.renderManifest instead)
remote:        (Use `node --trace-deprecation ...` to show where the warning was created)
remote:        (node:2087) [DEP_WEBPACK_CHUNK_TEMPLATE_RENDER_MANIFEST] DeprecationWarning: ChunkTemplate.hooks.renderManifest is deprecated (use Compilation.hooks.renderManifest instead)
remote:        (node:2087) [DEP_WEBPACK_MAIN_TEMPLATE_HASH_FOR_CHUNK] DeprecationWarning: MainTemplate.hooks.hashForChunk is deprecated (use JavascriptModulesPlugin.getCompilationHooks().chunkHash instead)
remote:        (node:2087) [DEP_WEBPACK_COMPILATION_NORMAL_MODULE_LOADER_HOOK] DeprecationWarning: Compilation.hooks.normalModuleLoader was moved to NormalModule.getCompilationHooks(compilation).loader
remote:        (node:2087) [DEP_WEBPACK_COMPILATION_OPTIMIZE_CHUNK_ASSETS] DeprecationWarning: optimizeChunkAssets is deprecated (use Compilation.hooks.processAssets instead and use one of Compilation.PROCESS_ASSETS_STAGE_* as stage option)
remote:        (node:2087) [DEP_WEBPACK_CHUNK_TEMPLATE_HASH_FOR_CHUNK] DeprecationWarning: ChunkTemplate.hooks.hashForChunk is deprecated (use JavascriptModulesPlugin.getCompilationHooks().chunkHash instead)
remote:        [webpack-cli] ModuleNotFoundError: Module not found: Error: Can't resolve './schema' in '/tmp/build_5b4c69fc/node_modules/babel-loader/lib'
remote:            at /tmp/build_5b4c69fc/node_modules/webpack/lib/Compilation.js:2016:28
remote:            at /tmp/build_5b4c69fc/node_modules/webpack/lib/NormalModuleFactory.js:798:13
remote:            at eval (eval at create (/tmp/build_5b4c69fc/node_modules/webpack/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:10:1)
remote:            at /tmp/build_5b4c69fc/node_modules/webpack/lib/NormalModuleFactory.js:270:22
remote:            at eval (eval at create (/tmp/build_5b4c69fc/node_modules/webpack/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:9:1)
remote:            at /tmp/build_5b4c69fc/node_modules/webpack/lib/NormalModuleFactory.js:434:22
remote:            at /tmp/build_5b4c69fc/node_modules/webpack/lib/NormalModuleFactory.js:116:11
remote:            at /tmp/build_5b4c69fc/node_modules/webpack/lib/NormalModuleFactory.js:670:25
remote:            at /tmp/build_5b4c69fc/node_modules/webpack/lib/NormalModuleFactory.js:855:8
remote:            at /tmp/build_5b4c69fc/node_modules/webpack/lib/NormalModuleFactory.js:975:5
remote:            at /tmp/build_5b4c69fc/node_modules/neo-async/async.js:6883:13
remote:            at Array.<anonymous> (/tmp/build_5b4c69fc/node_modules/webpack/lib/NormalModuleFactory.js:950:14)
remote:            at arrayEachFunc (/tmp/build_5b4c69fc/node_modules/neo-async/async.js:2517:19)
remote:            at Object.parallel (/tmp/build_5b4c69fc/node_modules/neo-async/async.js:6858:9)
remote:            at NormalModuleFactory._resolveResourceErrorHints (/tmp/build_5b4c69fc/node_modules/webpack/lib/NormalModuleFactory.js:873:12)
remote:            at /tmp/build_5b4c69fc/node_modules/webpack/lib/NormalModuleFactory.js:834:18
remote:        resolve './schema' in '/tmp/build_5b4c69fc/node_modules/babel-loader/lib'
remote:          using description file: /tmp/build_5b4c69fc/node_modules/babel-loader/package.json (relative path: ./lib)
remote:            Field 'browser' doesn't contain a valid alias configuration
remote:            using description file: /tmp/build_5b4c69fc/node_modules/babel-loader/package.json (relative path: ./lib/schema)
remote:              no extension
remote:                Field 'browser' doesn't contain a valid alias configuration
remote:                /tmp/build_5b4c69fc/node_modules/babel-loader/lib/schema doesn't exist
remote:              .mjs
remote:                Field 'browser' doesn't contain a valid alias configuration
remote:                /tmp/build_5b4c69fc/node_modules/babel-loader/lib/schema.mjs doesn't exist
remote:              .js
remote:                Field 'browser' doesn't contain a valid alias configuration
remote:                /tmp/build_5b4c69fc/node_modules/babel-loader/lib/schema.js doesn't exist
remote:              .sass
remote:                Field 'browser' doesn't contain a valid alias configuration
remote:                /tmp/build_5b4c69fc/node_modules/babel-loader/lib/schema.sass doesn't exist
remote:              .scss
remote:                Field 'browser' doesn't contain a valid alias configuration
remote:                /tmp/build_5b4c69fc/node_modules/babel-loader/lib/schema.scss doesn't exist
remote:              .css
remote:                Field 'browser' doesn't contain a valid alias configuration
remote:                /tmp/build_5b4c69fc/node_modules/babel-loader/lib/schema.css doesn't exist
remote:              .module.sass
remote:                Field 'browser' doesn't contain a valid alias configuration
remote:                /tmp/build_5b4c69fc/node_modules/babel-loader/lib/schema.module.sass doesn't exist
remote:              .module.scss
remote:                Field 'browser' doesn't contain a valid alias configuration
remote:                /tmp/build_5b4c69fc/node_modules/babel-loader/lib/schema.module.scss doesn't exist
remote:              .module.css
remote:                Field 'browser' doesn't contain a valid alias configuration
remote:                /tmp/build_5b4c69fc/node_modules/babel-loader/lib/schema.module.css doesn't exist
remote:              .png
remote:                Field 'browser' doesn't contain a valid alias configuration
remote:                /tmp/build_5b4c69fc/node_modules/babel-loader/lib/schema.png doesn't exist
remote:              .svg
remote:                Field 'browser' doesn't contain a valid alias configuration
remote:                /tmp/build_5b4c69fc/node_modules/babel-loader/lib/schema.svg doesn't exist
remote:              .gif
remote:                Field 'browser' doesn't contain a valid alias configuration
remote:                /tmp/build_5b4c69fc/node_modules/babel-loader/lib/schema.gif doesn't exist
remote:              .jpeg
remote:                Field 'browser' doesn't contain a valid alias configuration
remote:                /tmp/build_5b4c69fc/node_modules/babel-loader/lib/schema.jpeg doesn't exist
remote:              .jpg
remote:                Field 'browser' doesn't contain a valid alias configuration
remote:                /tmp/build_5b4c69fc/node_modules/babel-loader/lib/schema.jpg doesn't exist
remote:              as directory
remote:                /tmp/build_5b4c69fc/node_modules/babel-loader/lib/schema doesn't exist
remote:        
remote: 
remote:  !
remote:  !     Precompiling assets failed.
remote:  !
remote:  !     Push rejected, failed to compile Ruby app.
remote: 
remote:  !     Push failed
remote: Verifying deploy...
remote: 

So far I’ve uninstalled and reinstalled webpack and babel several times with no luck. This is my package.json for reference.

package.json

{
  "name": "example-app",
  "private": true,
  "dependencies": {
    "@babel/plugin-proposal-decorators": "^7.18.6",
    "@babel/plugin-proposal-object-rest-spread": "^7.18.6",
    "@babel/plugin-proposal-private-methods": "^7.18.6",
    "@babel/plugin-transform-regenerator": "^7.18.6",
    "@babel/plugin-transform-runtime": "^7.18.6",
    "@popperjs/core": "^2.0.0-alpha.1",
    "@rails/actioncable": "^6.0.0",
    "@rails/activestorage": "^6.0.0",
    "@rails/ujs": "^6.0.0",
    "@rails/webpacker": "5.4.3",
    "babel-loader": "^8.2.5",
    "babel-plugin-macros": "^3.1.0",
    "babel-plugin-transform-object-rest-spread": "^6.26.0",
    "babel-runtime": "^6.26.0",
    "bootstrap": "^5.1.3",
    "core-js": "^3.23.3",
    "css-loader": "^6.7.1",
    "install": "^0.13.0",
    "jquery": "^3.6.0",
    "node": "^18.4.0",
    "notistack": "^2.0.5",
    "popper.js": "^1.16.1",
    "turbolinks": "^5.2.0",
    "webpack": "^5.73.0",
    "webpack-cli": "^4.10.0"
  },
  "devDependencies": {
    "@babel/core": "7.18.6",
    "@babel/plugin-proposal-class-properties": "^7.18.6",
    "@babel/plugin-proposal-private-property-in-object": "^7.18.6",
    "@babel/plugin-syntax-dynamic-import": "^7.8.3",
    "@babel/plugin-transform-destructuring": "^7.18.6",
    "@babel/preset-env": "^7.18.6",
    "sass": "^1.53.0",
    "sass-loader": "^13.0.2",
    "webpack": "^5.73.0",
    "webpack-dev-server": "^4.9.3"
  },
  "resolutions": {
    "@babel/core": "7.15.0",
    "@babel/preset-env": "7.15.0"
  }
}
Thank you in advance for any assistance.

Leave a Comment