IT이야기

이 오류를 해결하는 방법: " 모듈을 찾을 수 없음: popper.js "을(를) 확인할 수 없음

cyworld 2022. 3. 16. 22:08
반응형

이 오류를 해결하는 방법: " 모듈을 찾을 수 없음: 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

참조URL: https://stackoverflow.com/questions/57459917/how-to-fix-this-error-module-not-found-cant-resolve-popper-js

반응형