尽管使用了所有默认的 create-react-app 配置，Heroku “不是来自 webpack 的内容是从 /app/public 提供的”

Posted 2023-03-13

【中文标题】尽管使用了所有默认的 create-react-app 配置，Heroku “不是来自 webpack 的内容是从 /app/public 提供的”

【英文标题】：Heroku "content not from webpack is served from /app/public" despite using all default create-react-app config

【发布时间】：2020-08-16 21:26:31

【问题描述】：

我正在通过与 Github 的自动部署集成将一个非常基本的仅前端 React 应用程序（本质上是一个静态站点）部署到 Heroku。我以前用更复杂的应用程序做过这个，没有任何问题。但是现在我在部署时在日志中得到以下输出：

2020-05-02T11:18:53.190530+00:00 应用[web.1]: [34mℹ[39m [90m｢wds｣[39m：webpack 输出来自

2020-05-02T11:18:53.190635+00:00 应用[web.1]: [34mℹ[39m [90m｢wds｣[39m：不是来自 webpack 的内容由 /app/public 提供

2020-05-02T11:18:53.190727+00:00 应用[web.1]: [34mℹ[39m [90m｢wds｣[39m: 404s 将回退到/

2020-05-02T11:18:53.190910+00:00 app[web.1]：开始开发 服务器...

2020-05-02T11:18:53.190912+00:00 应用[web.1]：

2020-05-02T11:18:53.287654+00:00 heroku[web.1]：状态从 开始崩溃

当我第一次得到这个时，这个说法是准确的。我有一些正在加载的图像，例如src='/image.jpg'。但是我将我在应用程序中实际使用的所有资产都移到了 src/images 中，并且现在将它们作为组件导入。我已经检查了我的 src 目录中的每个文件四次，并且不再有任何对公共目录中文件的引用。

我没有做过任何自定义的 Webpack 配置，都是默认的 CRA。那么为什么它仍然会抛出这个错误，我该如何解决呢？

项目层次结构：

├── src
│   └── index.js
│   └── app.js (etc)
│   └── images (this is where I am importing any images into my components now)
├── public
│   ├── index.html
│   ├── favicon.jpg
│   │── manifest.json
│   └── robots.txt
├── package.json
├── package-lock.json
├── .gitignore

webpack.config.js

mode: isEnvProduction ? 'production' : isEnvDevelopment && 'development',
    // Stop compilation early in production
    bail: isEnvProduction,
    devtool: isEnvProduction
      ? shouldUseSourceMap
        ? 'source-map'
        : false
      : isEnvDevelopment && 'cheap-module-source-map',
    // These are the "entry points" to our application.
    // This means they will be the "root" imports that are included in JS bundle.
    entry: [
      // Include an alternative client for WebpackDevServer. A client's job is to
      // connect to WebpackDevServer by a socket and get notified about changes.
      // When you save a file, the client will either apply hot updates (in case
      // of CSS changes), or refresh the page (in case of JS changes). When you
      // make a syntax error, this client will display a syntax error overlay.
      // Note: instead of the default WebpackDevServer client, we use a custom one
      // to bring better experience for Create React App users. You can replace
      // the line below with these two lines if you prefer the stock client:
      // require.resolve('webpack-dev-server/client') + '?/',
      // require.resolve('webpack/hot/dev-server'),
      isEnvDevelopment &&
        require.resolve('react-dev-utils/webpackHotDevClient'),
      // Finally, this is your app's code:
      paths.appIndexJs,
      // We include the app code last so that if there is a runtime error during
      // initialization, it doesn't blow up the WebpackDevServer client, and
      // changing JS code would still trigger a refresh.
    ].filter(Boolean),
output: 
      // The build folder.
      path: isEnvProduction ? paths.appBuild : undefined,
      // Add /* filename */ comments to generated require()s in the output.
      pathinfo: isEnvDevelopment,
      // There will be one main bundle, and one file per asynchronous chunk.
      // In development, it does not produce real files.
      filename: isEnvProduction
        ? 'static/js/[name].[contenthash:8].js'
        : isEnvDevelopment && 'static/js/bundle.js',
      // TODO: remove this when upgrading to webpack 5
      futureEmitAssets: true,
      // There are also additional JS chunk files if you use code splitting.
      chunkFilename: isEnvProduction
        ? 'static/js/[name].[contenthash:8].chunk.js'
        : isEnvDevelopment && 'static/js/[name].chunk.js',
      // webpack uses `publicPath` to determine where the app is being served from.
      // It requires a trailing slash, or the file assets will get an incorrect path.
      // We inferred the "public path" (such as / or /my-project) from homepage.
      publicPath: paths.publicUrlOrPath,
      // Point sourcemap entries to original disk location (format as URL on Windows)
      devtoolModuleFilenameTemplate: isEnvProduction
        ? info =>
            path
              .relative(paths.appSrc, info.absoluteResourcePath)
              .replace(/\\/g, '/')
        : isEnvDevelopment &&
          (info => path.resolve(info.absoluteResourcePath).replace(/\\/g, '/')),
      // Prevents conflicts when multiple webpack runtimes (from different apps)
      // are used on the same page.
      jsonpFunction: `webpackJsonp$appPackageJson.name`,
      // this defaults to 'window', but by setting it to 'this' then
      // module chunks which are built will work in web workers as well.
      globalObject: 'this',
    ,

【问题讨论】：

您能分享您的webpack.config.js 以及您的项目层次结构，尤其是您的图像在哪里吗？此外，this post 可能会帮助您。

webpack.config.js 在 CRA 应用程序中的什么位置？我看过你之前引用的帖子，但它不适用于这种情况，因为我已经完成了零自定义 webpack 配置

Webpack 配置应该位于node_modules -> react-scripts/config 文件夹下。

找到了——你想看文件的哪一部分？ 720行

我刚加了！

【参考方案1】：

所以，我得到了一个解决方案，Heroku 默认使用 nodejs buildpack。您需要添加 CRA（创建反应应用程序）。

首先，检查您正在使用的构建包heroku buildpacks -a <appname>

然后更改为 CRA buildpack heroku buildpacks:set mars/create-react-app -a <appname>

然后重新部署。

更多配置可以阅读this article

【参考方案2】：

Heroku 使用默认构建包作为 heroku/nodejs。需要在您的 heroku 应用设置中更改您的构建包配置。 您可以在 git url 下使用 add 作为 react app 的构建包

https://github.com/mars/create-react-app-buildpack

【参考方案3】：

您可以在 package.json 中添加对象“引擎”（版本节点和 npm 使用构建您的应用程序）

"engines": 
    "node": "10.15.3",
    "npm": "6.14.5"
    

***检查版本：node -v & npm -v

P/s：它对我有用。