ruby-on-rails - Ruby on Rails 6 无法使用 webpack 部署到 heroku

Question

我将我的应用程序升级到了 RoR 6，其中包括使用 webpack。我以前使用的是 React-Rails，组件位于 Assets 管道中，但现在我的文件结构如下所示:

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

在开发中一切正常，但是当我尝试推送到heroku时，几天来一直出现问题。我已经尝试了网上能找到的所有方法，只是需要一些新的视角。

目前，构建失败，提示无法解析“/tmp/build_70fb951d”中的“./src”。我在网上找到的所有内容都建议在配置文件中添加一个条目，指向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

这是我的配置文件:

环境.js

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

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

module.exports = environment

生产.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',
           },
   },
}

生产.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"
  },
 }
  

任何新建议都会很棒。谢谢!

Answer 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和 this post帮助我找到了这个解决方案。

一旦我开始工作，我就移动并改变了很多东西，我需要重新运行 bundle execrails 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.

现在一切正常!