Develop Reference

Cannot read property 'show' of undefined in BoostrapVue Modal

<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.

How to install react-table into Electron (with React) project?

I created Electron simple project using create-react-app. I'd like to use react-table component but I have a problem importing its css. Before that I added react-bootstrap to the project.
There's really not much code beside:
npx create-react-app my-app - Created project
npm install react-bootstrap - Added bootstrap
npm install react-table - Installed react-table
I added this to the App component:
import { useTable, useSortBy } from "react-table";
import "react-table/react-table.css";
... and I'm getting this error in the browser:
./src/components/App/App.jsx Module not found: Can't resolve
'react-table/react-table.css' in
'/Users/foo/Projects/test-project/src/components/App'
It's just a css file, that I'm having problem with. import { useTable, useSortBy } from "react-table"; works good alone.
Am I missing something? This is the way I usually install npm libraries.

Module not found: Error: Can't resolve 'stream' in 'C:\dev\jszip-test\node_modules\jszip\lib'

I'm using jszip v3.2.1 in an angular 7 application. When I build my project (running, for example, npm start) I'm getting the following error:
ERROR in ./node_modules/jszip/lib/readable-stream-browser.js
Module not found: Error: Can't resolve 'stream' in
'C:\dev\jszip-test\node_modules\jszip\lib'
How can I solve this problem?

After reading this post I found out that the stream package was missing from my project.
You can install it by running the following command:
npm i stream

In my case, I wanted to import EventEmitter and added it accidentally from stream package instead of #angular/core package.

This issue encountered when importing web3 to your project. Please follow steps in below article.
https://medium.com/#rasmuscnielsen/how-to-compile-web3-js-in-laravel-mix-6eccb4577666
Fix is:-
Wherever you import the web3 library, change your import from
import Web3 from 'web3'
to
import Web3 from 'web3/dist/web3.min.js'

I encountered this error while building an angular library.
It came from my IDE auto-importing EventEmitter from 'stream' instead of '#angular/core' in the library.
Check for:
import { EventEmitter } from "stream";
Update to:
import { EventEmitter } from "#angular/core";

edit your package.json, change react-scripts to 4.0.3 and run yarn / npm install

In my case i was importing EventEmitter from 'stream' rather than from '#angular/core'

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" />

pondjs not recognised after installing

I'm using Webstorm IDE and have created a create-react-app. I installed pondjs using:
npm install pondjs --save
it got installed and that's why I can see it in node-modules.
But in my App.js when I'm trying to import it using :
import { TimeSeries, TimeRange } from "pondjs";
this package is not recognised. Please help. I'm trying to solve this since long.

Use require instead of import.
const { TimeSeries, TimeRange } = require('pondjs');

Not sure why but installing the alpha version of pond.js fixed the issue in my case.
yarn install pondjs#1.0.0-alpha.0
Importing pond.js in the project:
import { timeSeries } from "pondjs";