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!
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!