Ruby on Rails 6 无法使用 webpack 部署到 heroku
Ruby on Rails 6 can't deploy to heroku with webpack
我将我的应用程序升级到 RoR 6，其中包括使用 webpack。我以前使用的是 React-Rails，资产管道中的组件，但现在我的文件结构如下所示：
app
assets
controllers
javascript
components
packs
application.js
src
config
webpack
development.js
environment.js
production.js
etc...
在开发中一切正常，但是当我尝试推送到 heroku 时，几天来一直是个问题。我已经尝试了所有可以在网上找到的东西，我只需要一些新鲜的眼光。
目前，构建失败并显示 Can't resolve './src' in '/tmp/build_70fb951d'。我在网上找到的所有内容都建议在配置文件中添加一个 entry，指向 javascript/packs/application.js，但它似乎并没有改变错误。
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
这是我的配置文件：
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()
我也试过这个：
environment.js（我也在 production.js 中尝试了大部分内容，但同样的错误）
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"
},
}
任何新的建议都会很棒。谢谢！
这是最浪费时间的事情，我会删除这个问题，但希望这个答案能帮助其他人节省时间。
解决方案是添加一个名为 src 的文件夹，并在该文件夹中添加一个名为 index.js
的空文件
下面是我的文件结构示例：
app
bin
config
db
src
index.js
lib
index.js 是空的，除了一个小注释：
//This file solves a bug deploying to heroku. Do not delete
This post and this post 帮我找到了这个解决方案。
一旦我开始工作，我已经移动和更改了很多东西，我需要重新运行 bundle exec rails webpacker:install 因为现在我收到这个错误：
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.
现在一切正常！
如果您使用的是 Webpacker 5，则部署的 ruby 步骤需要 webpack-cli 已安装，因此 webpack 二进制文件可用。首先检查您安装的构建包，特别是它们的 order
heroku buildpacks --remote staging
=== beamstage Buildpack URLs
1. heroku/ruby
2. heroku/nodejs
如果 heroku/ruby 出现在 heroku/nodejs 之前，那么您需要交换它们，因为构建包的顺序确实决定了依赖项的安装顺序。 Ruby 首先表示 bundle install 以及 rake assets:precompile 在 yarn 之前。我能找到交换的唯一方法是将它们都删除然后再次添加：
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
我将我的应用程序升级到 RoR 6，其中包括使用 webpack。我以前使用的是 React-Rails，资产管道中的组件，但现在我的文件结构如下所示：
app
assets
controllers
javascript
components
packs
application.js
src
config
webpack
development.js
environment.js
production.js
etc...
在开发中一切正常，但是当我尝试推送到 heroku 时，几天来一直是个问题。我已经尝试了所有可以在网上找到的东西，我只需要一些新鲜的眼光。
目前，构建失败并显示 Can't resolve './src' in '/tmp/build_70fb951d'。我在网上找到的所有内容都建议在配置文件中添加一个 entry，指向 javascript/packs/application.js，但它似乎并没有改变错误。
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
这是我的配置文件：
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()
我也试过这个：
environment.js（我也在 production.js 中尝试了大部分内容，但同样的错误）
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"
},
}
任何新的建议都会很棒。谢谢！
这是最浪费时间的事情，我会删除这个问题，但希望这个答案能帮助其他人节省时间。
解决方案是添加一个名为 src 的文件夹，并在该文件夹中添加一个名为 index.js
下面是我的文件结构示例：
app
bin
config
db
src
index.js
lib
index.js 是空的，除了一个小注释：
//This file solves a bug deploying to heroku. Do not delete
This post and this post 帮我找到了这个解决方案。
一旦我开始工作，我已经移动和更改了很多东西，我需要重新运行 bundle exec rails webpacker:install 因为现在我收到这个错误：
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.
现在一切正常！
如果您使用的是 Webpacker 5，则部署的 ruby 步骤需要 webpack-cli 已安装，因此 webpack 二进制文件可用。首先检查您安装的构建包，特别是它们的 order
heroku buildpacks --remote staging
=== beamstage Buildpack URLs
1. heroku/ruby
2. heroku/nodejs
如果 heroku/ruby 出现在 heroku/nodejs 之前，那么您需要交换它们，因为构建包的顺序确实决定了依赖项的安装顺序。 Ruby 首先表示 bundle install 以及 rake assets:precompile 在 yarn 之前。我能找到交换的唯一方法是将它们都删除然后再次添加：
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