Cannot read property 'show' of undefined in BoostrapVue Modal - javascript

<b-button
id="show-btn"
#click="$bvModal.show('bv-modal-example')"
>
Open Modal
</b-button>
<b-modal id="bv-modal-example">Hello From My Modal!</b-modal>
Vue version: 2.6.10
Installed and set Bootstrap in App.js
import BootstrapVue from 'bootstrap-vue';
Vue.use(BootstrapVue);
I got the error TypeError: Cannot read property 'show' of undefined when I tried to open the modal.
What else should I install or set for BoostrapVue Modal to use as the instance method?
Thanks, everyone!


I have some approaches that you can try to get what you want finally working.
Make sure whether you import Bootstrap and BootstrapVue CSS files:
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'
If you are using a module bundler you need to try to import only specific components groups(plugins) like this.
import { ModalPlugin } from 'bootstrap-vue'
Vue.use(ModalPlugin)
If those are not working, please please check you have both bootstrap and boostrapVue installed in your node_module.
In order to make sure, please remove the node_modules folder and run npm install or run npm install bootstrap bootstrap-vue --save in your terminal of the root directory of the project.
Hopefully, this would help you.

Related

The target environment doesn't support dynamic import() syntax so it's not possible to use external type 'module' within a script

I Just created a react app. The npm start seems to work fine but npm run build is constantly failing. I need to run npm run build to deploy it on some website.
Already gone through all posts related to this on stackoverflow.com. But didn't found any working solution.
import './App.css';
import 'https://kit.fontawesome.com/a076d05399.js'
import Navbar from './components/navbar';
import Homepage from './components/homepage';
import Skills from './components/Skills';
import Project from './components/project';
import Contact from './components/contact';
Error Message
Failed to compile.
The target environment doesn't support dynamic import() syntax so it's not possible to use external type 'module' within a script

The problem here was the import statement of an external js file.
import 'https://kit.fontawesome.com/a076d05399.js';
You can add the file in index.html & run build.
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
And yes there's no problem with import statement in css.
#import url("https://cdn.jsdelivr.net/npm/remixicon#2.5.0/fonts/remixicon.css");

In my case, it was failing because using external styles
import "https://unpkg.com/leaflet#1.6.0/dist/leaflet.css";
Fixed with using via npm:
npm i leaflet
import 'leaflet/dist/leaflet.css';
Official docs

This dependency was not found: *swiper/vue how to fix?

I'm scratching my head because I ran npm i swiper and read through the Swiper Vue docs and it says to import { Swiper, SwiperSlide } from 'swiper/vue which I've done and I even get the bundle size showing 95.4K (gzipped: 28.9K).
When I run npm run serve I then get this error
This dependency was not found:
* swiper/vue in ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader-v16/dist??ref--0-1!./src/views/Home.vue?vue&type=script&lang=js
To install it, you can run: npm install --save swiper/vue
I for the life of me cannot figure out how to import that dependency.

This worked for me, using Vue ^3.0.0 and Swiper ^8.0.6
import { Swiper, SwiperSlide } from "swiper/vue/swiper-vue";
import "swiper/swiper-bundle.css";

If you're using the swiper version 7* then you could face this type of issue.
Github issue 4871
Try downgrading to the v6.7.5 , see if that helps.
Related issue

Leaflet area select in Angular

I'm trying to use leaflet-area-select plugin in an Angular9 project, but I have a problem with it's usage.
Everytime I call this.map.selectArea VSCode tells me that property 'selectArea' does not exist on type 'Map'. How can I fix this?
I've installed leaflet-area-select with npm install --save leaflet-area-select and imported it in a component by using import { SelectArea } from 'leaflet-area-select';
Shall I do something else? The plugin documentation seems to be unclear about this.

I just ran into this issue and managed to fix it by changing the import reference from import { SelectArea } from 'leaflet-area-select'; to import 'leaflet-area-select';

How can I import Material UI icons?i met some problems using Material ui icons

I was using Material UI with React in my project, and I had some troubles when it came to import the material icons. My code is copied from the Material UI (version:"material-ui": "^1.0.0-beta.41",
"material-ui-icons": "^1.0.0-beta.36",)
docs ,just like this:
import SkipPreviousIcon from '#material-ui/icons/SkipPrevious';
import PlayArrowIcon from '#material-ui/icons/PlayArrow';
import SkipNextIcon from '#material-ui/icons/SkipNext';
And I have also run npm install material-icons.
The error in my Chrome console is:
./src/index/musicCard.js Module not found: Can't resolve
'#material-ui/icons/PlayArrow' in
'C:\Users\wenji\Desktop\myblog\src\index'
And I tried this one:
import SkipPreviousIcon from 'material-ui/icons/SkipPrevious';
And this one:
import SkipPreviousIcon from '#material-ui-icons/SkipPrevious';
But it does not make any difference. How can I fix it?

Icons are not part of material-ui/core, so it must be installed using two commands.
If you are using npm:
npm install #material-ui/core
npm install #material-ui/icons
If you are using Yarn:
yarn add #material-ui/core
yarn add #material-ui/icons

The icons module should be added to dependencies.
Use npm
npm install #material-ui/icons
Or use Yarn
yarn add #material-ui/icons

For the latest versions you need
npm install #mui/icons-material
Since Material-UI is now MUI.
And if we need a specific icon, we can get like,
import SkipPreviousIcon from '#mui/icons-material/SkipPrevious';
And here are all available icons.

I just solved a strange (but not so strange after I found out why) issue.
On Mac, it worked, but when I deployed to Linux, it failed and could not find the icon.
This was because on Mac it was not case sensitive and on Linux was.
So
import DeleteForEver from '#material-ui/icons/DeleteForEver'
works on Mac, but it fails on Linux.
The file is actually named like "DeleteForever".
So the correct way to import is:
import DeleteForever from '#material-ui/icons/DeleteForever'

Change the import path from #mui/icons-material/ to #material-ui/icons/
This is not a 100% working solution, as there have been icons I have yet to be able to import (e.g. ConnectWithoutContact)
Regardless, this change has saved me several times so here is an example:
// Initial
import PermContactCalendarIcon from '#mui/icons-material/PermContactCalendar';
// Fixed
import PermContactCalendarIcon from '#material-ui/icons/PermContactCalendar';

Material UI doesn't provide icons from "#material-ui/icons" any more. Instead, you need to import icons from "#mui/icons-material". So, if you are using the latest version and running your project with npm, you need to execute the following command:
npm install #mui/icons-material
If you use Yarn, then run the following:
yarn add #material-ui/icons
Now you are all set to use your Material icon ExampleMaterialIcon like this:
import ExampleMaterialIcon from '#mui/icons-material/ExampleMaterialIcon';

Dependencies:
"#material-ui/core": "^4.12.4",
"#material-ui/icons": "4.11.3",
Example:
import FavoriteIcon from "#material-ui/icons/Favorite";
import ShareIcon from "#material-ui/icons/Share";
<FavoriteIcon
fontSize="large"
style={{ fill: "red", stroke: "red" }}
/>
<ShareIcon fontSize="large" />

How to import a font installed with NPM?

I have a React project where I installed Roboto font doing 'npm install font-roboto'. I'd like to import that from my main.js file instead of referencing a CDN in index.html.
What would be the best way to achieve this?

Apparently you can import it doing the following in the main.js
import '../node_modules/font-roboto/dist/styles/roboto.min.css';
UPDATE: As noted in the comments, the following also works.
import 'font-roboto/dist/styles/roboto.min.css';

Categories

Resources