0

Создал чистое приложение через команду create-react-app gameleague_v2

После чего установил пакет react-bootstrap как указано в ссылке

И получил вот такой варнинг.

Thank you for installing EJS: built with the Jake JavaScript build tool (https://jakejs.com/)

npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^2.1.2 (node_modules\jest-haste-map\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@2.3.2: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^1.2.7 (node_modules\chokidar\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.13: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^2.1.2 (node_modules\jest-haste-map\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@2.3.2: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^2.1.3 (node_modules\react-scripts\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@2.3.2: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^1.2.7 (node_modules\watchpack-chokidar2\node_modules\chokidar\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.13: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^1.2.7 (node_modules\webpack-dev-server\node_modules\chokidar\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.13: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm WARN @babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining@7.16.0 requires a peer of @babel/core@^7.13.0 but none is installed. You must install peer dependencies yourself.
npm WARN tsutils@3.21.0 requires a peer of typescript@>=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev || >= 3.6.0-beta || >= 3.7.0-dev || >= 3.7.0-beta but none is installed. You must in
+ bootstrap@5.1.3
+ react-bootstrap@2.0.2
added 356 packages from 173 contributors, removed 265 packages, updated 1431 packages and audited 1797 packages in 235.58s

149 packages are looking for funding
  run `npm fund` for details

Файл package.json

{
  "name": "gameleague_v2",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.11.4",
    "@testing-library/react": "^11.1.0",
    "@testing-library/user-event": "^12.1.10",
    "bootstrap": "^5.1.3",
    "react": "^17.0.2",
    "react-bootstrap": "^2.0.2",
    "react-dom": "^17.0.2",
    "react-scripts": "4.0.3",
    "web-vitals": "^1.0.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

И вывожу обычную кнопку файл App.js

import logo from './logo.svg';
import './App.css';
import Button from 'react-bootstrap/Button';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
        <Button variant="primary">Primary</Button>
      </header>
    </div>
  );
}

export default App;

Результат в фото ниже Результат

Так же пытался сделать вот так. Но это не помогло.

После установки был создан файл package-lock.json на 15тыс строк. Подскажите, какая версия пакета react-bootstrap работает с моей версией react

2 ответа 2

2

Документация

Пожалуйста, прочитайте Официальную документацию по используемой Вами библиотеки react-bootstrap.

Быстрый ответ

Используйте следующий импорт:

// Importing the Bootstrap CSS
import 'bootstrap/dist/css/bootstrap.min.css';

В файле src/index.js. Данная строка кода импортирует необходимые стили в Ваше приложение.

Также, пожалуйста, используйте компоненты библиотеки react-bootstrap, а не react. Пример такого использования приведен в примере.

Если решение не помогло

Пожалуйста, проверьте совместимость версий библиотек между собой.

Также, проверьте, что в файле index.html у Вас прописана следующая строчка:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous" />

0
1

В App.js нужно добавить:

import 'bootstrap/dist/css/bootstrap.min.css';
3
  • Спасабо за ответ, но я указывал в вопросе, что это не помогает. Стелизация компонентов не работает. 17 ноя 2021 в 10:35
  • Вот пример в codesandbox - codesandbox.io/s/serene-violet-1n2lh?file=/src/App.js
    – p1uton
    17 ноя 2021 в 11:11
  • Видимо я неправильно его установил в другой проект. Это вообще возможно установить криво пакет и как это исправить ? 18 ноя 2021 в 2:04

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.