Блог

Главная - Вопросы по программированию - Ошибка URIError: не удалось декодировать параметр ‘///%PUBLIC_URL%/manifest.json’

Ошибка URIError: не удалось декодировать параметр ‘///%PUBLIC_URL%/manifest.json’

#javascript #reactjs #uri

#javascript #reactjs #uri

Вопрос:

Я пытаюсь возродить старое приложение React, которое я закодировал полтора года назад.

Я клонировал его и установил все зависимости, но когда я запускаю npm, он просто загружает пустую страницу и выдает ошибку:

«Ошибка URIError: не удалось декодировать параметр ‘///%PUBLIC_URL%/manifest.json'»

Я, честно говоря, не уверен, куда идти дальше.

Вот как выглядит мой package.json:

 {
  "name": "nosmallstreamer",
  "version": "1.0.0",
  "description": "This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).",
  "main": "index.js",
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "repository": {
    "type": "git",
    "url": "git https://github.com/chaselancaster/nosmallstreamer-frontend.git"
  },
  "author": "",
  "license": "ISC",
  "bugs": {
    "url": "https://github.com/chaselancaster/nosmallstreamer-frontend/issues"
  },
  "homepage": "https://github.com/chaselancaster/nosmallstreamer-frontend#readme",
  "dependencies": {
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "react-router-dom": "^5.2.0",
    "react-scripts": "^4.0.0"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

Вот что мой index.html выглядит как в общей папке:

 <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <!-- <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" /> -->
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <!--
      manifest.json provides metadata used when your web app is installed on a
      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
    -->
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    <!--
      Notice the use of %PUBLIC_URL% in the tags above.
      It will be replaced with the URL of the `public` folder during the build.
      Only files inside the `public` folder can be referenced from the HTML.

      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
      work correctly both with client-side routing and a non-root public URL.
      Learn how to configure a non-root public URL by running `npm run build`.
    -->
    <title>React App</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
    <!--
      This HTML file is a template.
      If you open it directly in the browser, you will see an empty page.

      You can add webfonts, meta tags, or analytics to this file.
      The build step will place the bundled scripts into the <body> tag.

      To begin the development, run `npm start` or `yarn start`.
      To create a production bundle, use `npm run build` or `yarn build`.
    -->
  </body>
</html>

И вот как выглядит мой файл manifest.json в общедоступной папке:

 {
  "short_name": "React App",
  "name": "Create React App Sample",
  "icons": [
    {
      "src": "favicon.ico",
      "sizes": "64x64 32x32 24x24 16x16",
      "type": "image/x-icon"
    }
  ],
  "start_url": ".",
  "display": "standalone",
  "theme_color": "#000000",
  "background_color": "#ffffff"
}

Любая помощь приветствуется!

Комментарии:

1. Похоже, что это было изначально создано с помощью Create React App . Я бы предположил, что у него есть public папка. Каково его содержимое?

2. Он содержит index.html и manifest.json!

3. Не могли бы вы отредактировать свой вопрос и предоставить index.html ?

4. Полностью собираюсь добавить его сейчас!

Ответ №1:

Попробуйте изменить свой homepage в вашем package.json файле на: "/" вместо того, чтобы использовать URL вашего репозитория GitHub. react-scripts run (который npm start и выполняется), похоже, использует домен из в homepage качестве корня, из которого обслуживается приложение.

Ответ №2:

В вашем index.html , попробуйте изменить

 <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />

Для:

 <link rel="manifest" href="/public/manifest.json" />

Возможно, это единственный способ решить проблему без удаления проекта.

Комментарии:

1. Попробовал, но безуспешно! По какой-то причине полное имя проекта не отображается в строке URL. Отображается » localhost:3000/chaselancaster/nosmallstreamer-интерфейс «. Однако название проекта — «nosmallstreamer-интерфейс». Будет ли это иметь какое-либо отношение к этому?

Метки: