Heroku“不是来自Webpack的内容是从/ app / public提供的”尽管使用了所有默认的create-react-app配置 [英] Heroku "content not from webpack is served from /app/public" despite using all default create-react-app config

问题描述

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

I'm deploying a pretty basic front-end only React app (essentially a static site) to Heroku via an auto-deploy integration with Github. I've done this before with a more complicated app and had no issues. But now I'm getting the following output in my logs when I deploy:

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

2020-05-02T11:18:53.190530+00:00 app[web.1]: [34mℹ[39m [90m｢wds｣[39m: webpack output is served from

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

2020-05-02T11:18:53.190635+00:00 app[web.1]: [34mℹ[39m [90m｢wds｣[39m: Content not from webpack is served from /app/public

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

2020-05-02T11:18:53.190727+00:00 app[web.1]: [34mℹ[39m [90m｢wds｣[39m: 404s will fallback to /

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

2020-05-02T11:18:53.190910+00:00 app[web.1]: Starting the development server...

2020-05-02T11：18：53.190912 + 00：00 app [web.1]：

2020-05-02T11:18:53.190912+00:00 app[web.1]:

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

2020-05-02T11:18:53.287654+00:00 heroku[web.1]: State changed from starting to crashed

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

When I first got this, the statement was accurate. I had a few images that I was loading like src='/image.jpg'. But I moved all assets that I'm actually using in my app into src/images and am importing them as components now. I've gone over every file in my src directory four times and there are no longer any references to files in the public directory.

我尚未完成任何自定义Webpack配置，它们都是默认的CRA。那么，为什么它仍然引发此错误，我该如何解决呢？

I haven't done any custom Webpack configuration, it's all default CRA. So why does it still throw this error and how do I resolve it?

项目层次结构：

├── 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

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',
    },

推荐答案

所以，我得到了一个解决方案，Heroku使用nodejs buildpack作为默认值。您需要添加CRA（创建react App）。

So, I got a Solution, Heroku uses nodejs buildpack as default. You'll need to add that of CRA(Create react App).

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

First, check the build pack you're using heroku buildpacks -a <appname>

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

then change to CRA buildpack heroku buildpacks:set mars/create-react-app -a <appname>

然后重新部署。

您可以阅读本文以获取更多配置

You can read this article for more configuration

这篇关于Heroku“不是来自Webpack的内容是从/ app / public提供的”尽管使用了所有默认的create-react-app配置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！