how to use this on laravel-react app

[masariuman]

i try using this on laravel react-app

first i install it via npm install.

after that i put the plugin config on webpack.mix.js (because laravel using this)

const mix = require("laravel-mix");
const webpack = require("webpack");

mix.react("resources/js/app.js", "public/js")
    .sass("resources/sass/app.scss", "public/css")
    .webpackConfig({
        plugins: [
            new webpack.ProvidePlugin({
                $: "jquery",
                jQuery: "jquery"
            })
        ]
    });

after that i import this on my resource/js/component/new.js like this

import ReactSummernote from "react-summernote";
import "react-summernote/dist/react-summernote.css"; // import styles

i cannot import

import "bootstrap/js/modal";
import "bootstrap/js/dropdown";
import "bootstrap/js/tooltip";
import "bootstrap/dist/css/bootstrap.css";

in apps idk why, i tried npm install bootstrapt and it reinstall the basootstrap. still cannot import, they said when i npm run dev :

Module not found: Error: Can't resolve 'bootstrap/js/dropdown' in '/Users/masariuman/Sites/laravel/noberu/resources/js/components/parent'
 @ ./resources/js/components/parent/New.js 33:0-31
 @ ./resources/js/Index.js
 @ ./resources/js/app.js
 @ multi ./resources/js/app.js ./resources/sass/app.scss

ERROR in ./resources/js/components/parent/New.js
Module not found: Error: Can't resolve 'bootstrap/js/modal' in '/Users/masariuman/Sites/laravel/noberu/resources/js/components/parent'
 @ ./resources/js/components/parent/New.js 32:0-28
 @ ./resources/js/Index.js
 @ ./resources/js/app.js
 @ multi ./resources/js/app.js ./resources/sass/app.scss

ERROR in ./resources/js/components/parent/New.js
Module not found: Error: Can't resolve 'bootstrap/js/tooltip' in '/Users/masariuman/Sites/laravel/noberu/resources/js/components/parent'
 @ ./resources/js/components/parent/New.js 34:0-30
 @ ./resources/js/Index.js
 @ ./resources/js/app.js
 @ multi ./resources/js/app.js ./resources/sass/app.scss

so i try not using them, i only using

import ReactSummernote from "react-summernote";
import "react-summernote/dist/react-summernote.css"; 

and i put it on apps like this

<ReactSummernote
    options={{
        lang: "ru-RU",
        height: 350,
        dialogsInBody: true,
        toolbar: [
            ["style", ["style"]],
            [
                "font",
                [
                    "bold",
                    "underline",
                    "clear",
                    "strikethrough",
                    "superscript",
                    "subscript",
                    "clear"
                ]
            ],
            [
                "fontname",
                [
                    "fontname",
                    "fontsize",
                    "color"
                ]
            ],
            [
                "para",
                [
                    "ul",
                    "ol",
                    "paragraph",
                    "height"
                ]
            ],
            ["table", ["table"]],
            [
                "insert",
                [
                    "link",
                    "picture",
                    "video",
                    "hr"
                ]
            ],
            ["view", ["fullscreen", "codeview"]]
        ]
    }}
    onChange={this.handleChangeContent}
    onImageUpload={this.onImageUpload}
/>

but the result is i cannot drop down each menu, and the toolbar cannot open too when i click on image or link so i cannot remove link or edit image.

i hope anyone can help me implement it on laravel-react . please.

the problem is i just want dropdown and float toolbar work so i can remove link. please i already search it anywhere and cannot found it.

for full code source on here : https://github.com/masariuman/noberu/blob/master/resources/js/components/parent/New.js

thank you very much