Ruby on Rails 6 can't deploy to heroku with webpack

Question

I upgraded my app to RoR 6, which included using webpack. I previously was using React-Rails, with the components in the asset pipeline, but now my file structure looks like this:

app
  assets
  controllers
  javascript
    components
    packs
      application.js
    src
config
  webpack
    development.js
    environment.js
    production.js
etc...

Everything works fine in dev, but when I try to push to heroku, it's been constant issues for days. I've tried everything I can find online, and I just need some fresh eyes.

Currently, the build is failing saying Can't resolve './src' in '/tmp/build_70fb951d' . Everything I can find online suggests adding an entry to the config file, pointing to javascript/packs/application.js , but it doesn't seem to change the error.

remote: -----> Build
remote:        Running build (yarn)
remote:        yarn run v1.22.10
remote:        $ webpack
remote:        [webpack-cli] Compilation finished
remote:        assets by status 0 bytes [cached] 1 asset
remote:        
remote:        ERROR in main
remote:        Module not found: Error: Can't resolve './src' in '/tmp/build_70fb951d'
remote:        
remote:        webpack 5.6.0 compiled with 1 error in 198 ms
remote: error Command failed with exit code 1.
remote:        info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
remote: 
remote: -----> Build failed
remote:        
remote:        We're sorry this build is failing! You can troubleshoot common issues here:
remote:        https://devcenter.heroku.com/articles/troubleshooting-node-deploys
remote:        
remote:        Some possible problems:
remote:        
remote:        - node_modules checked into source control
remote:          https://devcenter.heroku.com/articles/node-best-practices#only-git-the-important-bits
remote:        
remote:        - Node version not specified in package.json
remote:          https://devcenter.heroku.com/articles/nodejs-support#specifying-a-node-js-version
remote:        
remote:        Love,
remote:        Heroku

Here is my config file:

environment.js

const { environment } = require('@rails/webpacker')

const webpack = require('webpack');
environment.plugins.append('Provide', new webpack.ProvidePlugin({
  $: 'jquery',
  jQuery: 'jquery'
}));

module.exports = environment

production.js

process.env.NODE_ENV = process.env.NODE_ENV || 'production'

const environment = require('./environment')

module.exports = environment.toWebpackConfig()

I've also tried this:

environment.js (I also tried the bulk of this in production.js, but same error)

const { environment } = require('@rails/webpacker')

const webpack = require('webpack');
const path = require('path');

environment.plugins.append('Provide', new webpack.ProvidePlugin({
  $: 'jquery',
  jQuery: 'jquery'
}));


module.exports = environment => {
  mode: environment,
  entry: './app/javascript/packs/application.js',
  output: {
         path: path.resolve(__dirname, '../../dist/'),
         filename: prod ? "[name].bundle.js" : "[name].js"
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      }
    ]
  },
  resolve: {
    extensions: ['.js', '.jsx']
  },
  optimization: {
           splitChunks: {
           chunks: 'all',
           },
   },
}

production.js

process.env.NODE_ENV = process.env.NODE_ENV || 'production'

const environment = require('./environment')

module.exports = environment.toWebpackConfig()

package.json:

{
  "name": "my_app",
  "version": "1.0.0",
  "description": "== README",
  "main": "index.js",
  "directories": {
    "lib": "lib",
    "test": "test"
  },
  "dependencies": {
    "@babel/preset-react": "^7.10.4",
    "@material-ui/core": "^4.11.0",
    "@rails/activestorage": "^6.0.3-4",
    "@rails/ujs": "^6.0.3-4",
    "@rails/webpacker": "5.2.1",
    "@stripe/react-stripe-js": "^1.1.2",
    "@stripe/stripe-js": "^1.11.0",
    "babel-plugin-transform-react-remove-prop-types": "^0.4.24",
    "chart.js": "^2.5.0",
    "dotenv": "^8.2.0",
    "google-map-react": "^2.1.9",
    "jquery": "^3.5.1",
    "lottie-web": "^5.4.2",
    "moment": "^2.17.1",
    "moment-timezone": "^0.5.10",
    "progressbar.js": "^1.0.1",
    "rails-ujs": "^5.2.4-4",
    "react": "^16.13.1",
    "react-datepicker": "^3.3.0",
    "react-dom": "^16.13.1",
    "react-google-maps": "^9.4.5",
    "react-places-autocomplete": "^7.3.0",
    "react_ujs": "^2.6.1",
    "turbolinks": "^5.2.0",
    "uuid": "^8.3.1",
    "webpack": "^5.6.0",
    "webpack-cli": "^4.2.0"
  },
  "devDependencies": {
    "@babel/plugin-transform-runtime": "^7.11.5",
    "@babel/preset-env": "^7.11.5",
    "@babel/runtime": "^7.11.2",
    "webpack-dev-server": "^3.11.0"
  },
  "babel": {
    "presets": [
      "@babel/preset-env",
      "@babel/preset-react"
    ],
    "plugins": [
      "@babel/plugin-proposal-class-properties"
    ]
  },
  "scripts": {
    "build": "webpack",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
 }
  

Any new suggestions would be great. Thanks!

Answer 1

This was the biggest waste of time, and I'd delete the question, but hopefully this answer will help save someone else time.

The solution was to add a folder called src and an empty file in that folder named index.js

So here is a sample of my file structure:

app
bin
config
db
src
  index.js
lib

index.js is empty except a small comment:

//This file solves a bug deploying to heroku. Do not delete

This post and this post helped me find this solution.

Once I got this working, I had moved and changed so many things, I needed to rerun bundle exec rails webpacker:install because now I was getting this error:

Webpacker can't find application in <my app path>/public/packs/manifest.json. Possible causes:
1. You want to set webpacker.yml value of compile to true for your environment
   unless you are using the `webpack -w` or the webpack-dev-server.
2. webpack has not yet re-run to reflect updates.
3. You have misconfigured Webpacker's config/webpacker.yml file.
4. Your webpack configuration is not creating a manifest.
Your manifest contains:
{
}

This post helped me solve that.

Now everything is working properly!

Answer 2

If you are using Webpacker 5, the ruby step of your deployment expects webpack-cli to have been installed and thus for the webpack binary to be available. First check your installed buildpacks, specifically their order

heroku buildpacks --remote staging
=== beamstage Buildpack URLs
1. heroku/ruby
2. heroku/nodejs

If heroku/ruby comes before heroku/nodejs then you need to swap them around because the order of the buildpacks does indeed determine the order in which your dependencies are installed. Ruby first means bundle install as well as rake assets:precompile goes before yarn . The only way I could find to swap was to remove them both then add again:

heroku buildpacks:remove heroku/nodejs [--remote <staging|production>]
heroku buildpacks:remove heroku/ruby [--remote <staging|production>]
heroku buildpacks:add --index 1 heroku/nodejs --remote staging
heroku buildpacks:add --index 2 heroku/ruby --remote staging