#ruby-on-rails #heroku #webpack #webpacker
#ruby-on-rails #heroku #webpack #webpacker
Вопрос:
Я обновил свое приложение до версии RoR 6, которая включала использование webpack. Ранее я использовал React-Rails с компонентами в конвейере ресурсов, но теперь моя файловая структура выглядит следующим образом:
app
assets
controllers
javascript
components
packs
application.js
src
config
webpack
development.js
environment.js
production.js
etc...
В dev все работает нормально, но когда я пытаюсь перейти на heroku, в течение нескольких дней возникают постоянные проблемы. Я перепробовал все, что смог найти в Интернете, и мне просто нужен свежий взгляд.
В настоящее время сборка завершается с ошибкой Can't resolve './src' in '/tmp/build_70fb951d' . Все, что я могу найти в Интернете, предлагает добавить an 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" amp;amp; exit 1"
},
}
Любые новые предложения были бы замечательными. Спасибо!
Ответ №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
Этот пост и этот пост помогли мне найти это решение.
Как только я получил эту работу, я переместил и изменил так много вещей, что мне нужно было перезапустить 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:
{
}
Этот пост помог мне решить эту проблему.
Теперь все работает правильно!
Ответ №2:
Если вы используете Webpacker 5, ожидается, что этап развертывания ruby webpack-cli будет установлен и, следовательно webpack , двоичный файл будет доступен. Сначала проверьте установленные вами пакеты сборки, в частности их порядок
heroku buildpacks --remote staging
=== beamstage Buildpack URLs
1. heroku/ruby
2. heroku/nodejs
Если heroku/ruby это произойдет раньше heroku/nodejs , вам нужно поменять их местами, потому что порядок пакетов сборки действительно определяет порядок установки ваших зависимостей. Ruby first означает 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