时间戳

首页 > 解决方案 > react start cannot find files in public folder

node.js - react start cannot find files in public folder

问题描述

When running npm start, my code shows a blank page, without favicon either, and the browse console shows

Loading failed for the <script> with source “http://localhost:3000/short_text_understanding/static/js/bundle.js”. bundle.js:23:1
Loading failed for the <script> with source “http://localhost:3000/short_text_understanding/static/js/0.chunk.js”. bundle.js:23:1
Loading failed for the <script> with source “http://localhost:3000/short_text_understanding/static/js/main.chunk.js”. bundle.js:23:1

If it helps debugging, my code works previously, but after npm audit, my package.json changed

-   "react-scripts": "3.4.1"
+   "react-scripts": "^3.4.3"

My package.json

{
  "name": "short_text_understand",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.5.0",
    "@testing-library/user-event": "^7.2.1",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-scripts": "^3.4.3"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "test:debug": "react-scripts --inspect-brk test --runInBand --no-cache",
    "eject": "react-scripts eject",
    "lint": "eslint .",
    "predeploy": "npm run build",
    "deploy": "gh-pages -d build"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "proxy": "http://localhost:5000",
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "eslint-config-airbnb": "^18.2.0",
    "eslint-config-prettier": "^6.11.0",
    "eslint-plugin-jsx-a11y": "^6.3.1",
    "eslint-plugin-prettier": "^3.1.4",
    "gh-pages": "^3.1.0",
    "prettier": "^2.0.5"
  }
}

Structure of source is

.
├── Dockerfile
├── LICENSE
├── README.md
├── docker-compose.yml
├── nginx
│   ├── Dockerfile
│   └── nginx.conf
├── package-lock.json
├── package.json
├── public
│   ├── android-chrome-192x192.png
│   ├── android-chrome-512x512.png
│   ├── apple-touch-icon.png
│   ├── favicon-16x16.png
│   ├── favicon-32x32.png
│   ├── favicon.ico
│   ├── index.html
│   ├── manifest.json
│   ├── robots.txt
│   └── site.webmanifest
├── src
│   ├── index.js
│   ├── normalize.css
│   ├── skeleton.css
│   └── style.css
└── src_python
    ├── Dockerfile
    ├── __pycache__

What I do not understand is why the bundle.js disappears, and why my favicon is not loaded, even though I did not move the public folder, and things worked before.

I am totally new in this, please tell if you need any other information

标签： node.jsreactjswebpack

解决方案

如果您使用 create react app 来生成应用程序，请按照此链接中给出的说明进行操作

https://create-react-app.dev/docs/using-the-public-folder/

推荐阅读