이 오류를 해결하는 방법: " 모듈을 찾을 수 없음: popper.js "을(를) 확인할 수 없음
Bootstrap 및 Jquery를 가져온 후 컴파일할 때 이 오류가 표시된다.
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import 'bootstrap/dist/css/bootstrap.css';
import './index.css';
global.jQuery = require('jquery');
require('bootstrap');
Popper.js는 팝업 표시에 사용되는 Bootstrap 4의 종속성이다.그것은 부트스트랩의 피어 의존적인 것으로, 부트스트랩을 설치할 때 부트스트랩이 필요하지만 그 자체에 포함되지는 않는다는 것을 의미한다.따라서 popper.js를 설치하려면 실행하십시오.
npm install popper.js --save
그것은 또래 종속성으로 설정된다. 왜냐하면 어떤 사람들은 Javascript 없이 Bootstrap의 css만 사용하기 때문이다.jQuery와 popper.js는 별도로 설치해야 하는 피어 종속성이다.부트스트랩의 자바스크립트가 필요하면 부트스트랩 4 옆에 jQuery와 popper.js를 설치해야 한다.
부트스트랩 5는 Popper.js가 아닌 "Popper.js Core"를 필요로 한다.대신 다음을 실행하십시오.
npm install @popperjs/core --save
(이것을 댓글에 추가해줘서 @Kyouma 고마워)
간단한 방법으로 방문하여 파일을 popper.min.js로 저장하십시오.
그리고 그것을 수입한다.
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import 'bootstrap/dist/css/bootstrap.css';
import './index.css';
import 'bootstrap/dist/js/popper.min.js';
global.jQuery = require('jquery');
require('bootstrap');
부트스트랩 5의 경우
npm 사용자:npm install @popperjs/core --save
실 사용자의 경우:yarn add @popperjs/core
그런 다음 다음과 같이 부트스트랩을 가져오십시오.
import 'bootstrap/dist/js/bootstrap.bundle';
Tomi0505가 작성한 것과 같이 부트스트랩 등을 수입해야 한다.
import 'jquery';
import '@popperjs/core'; // Edit here
import 'bootstrap/dist/js/bootstrap.bundle';
그 후엔 잘 될 거야.
다음과 같이 가져오기를 직접 수행할 수 있음
import bootstrapBundle from './../path to node modules/../node_modules/bootstrap/dist/js/bootstrap.bundle.min.js';
포퍼를 설치할 필요 없음
popper.js를 패키지에 종속성으로 추가하십시오.다음과 같은 json 파일:
{
"dependencies": {
...,
"popper.js": "1.16.1",
...,
}
}
또한 다음과 같이 필요한 부트스트랩을 추가하기 전에 필요에 따라 popper.js를 추가하십시오.
require('popper.js');
require('bootstrap');
설치한 경우:
npm install jquery popper.js
대신:
global.jQuery = require('jquery');
require('bootstrap');
추가:
import $ from 'jquery';
import Popper from 'popper.js';
import 'bootstrap/dist/js/bootstrap.bundle.min';
이것 좀 봐
부트스트랩 5에는 "Popper.js Core"가 필요하므로 대신 다음을 실행하십시오.
npm install @popperjs/core --save
'IT이야기' 카테고리의 다른 글
POST 요청을 보내는 방법? (0) | 2022.03.17 |
---|---|
VueRouter는 URL을 변경하지만 구성 요소는 변경하지 않음 (0) | 2022.03.17 |
Vuetify에서 수직으로 컨텐츠 중앙 집중 (0) | 2022.03.16 |
python으로 백분율 값을 인쇄하는 방법? (0) | 2022.03.16 |
nestjs 오류 처리 접근법(비즈니스 논리 오류 대 http 오류)이란 무엇인가? (0) | 2022.03.16 |