Develop Reference

An icon of fontawesome doesn't apeear in react code

I try to assimilate an icon of fontawesome in react and the icon not apeear and I get an error in the console.
Here's the code:
import PropTypes from "prop-types";
import { FontAwesomeIcon } from "#fortawesome/react-fontawesome";
const SearchBar = ({ handleChange }) => {
return (
<div className="field">
<FontAwesomeIcon icon="fa-regular fa-magnifying-glass" />
<input
type="search"
className="text-rtl form-control"
placeholder="חפש מוצר"
onInput={handleChange}
/>
</div>
);
};
SearchBar.propTypes = {
handleChange: PropTypes.func.isRequired,
};
export default SearchBar;
And in the file of the index.html I worte the js code:
<script
src="https://kit.fontawesome.com/ab8447aa04.js"
crossorigin="anonymous"
></script>
And I connected to the site of fontawesome. So Why there is a problem?

You no need for react-fontawesome package, you have a Fontawesome CDN in index.html
<script
src="https://kit.fontawesome.com/ab8447aa04.js"
crossorigin="anonymous"
></script>
just add <i className="fa-regular fa-magnifying-glass"></i>

I think your configuration is mixed up between react & non react usage. For react, you don't need to include the script in index.html.
For react there are three dependencies -
npm i --save #fortawesome/fontawesome-svg-core
npm install --save #fortawesome/free-solid-svg-icons
npm install --save #fortawesome/react-fontawesome
After that it is as simple as -
// import icon component
import { FontAwesomeIcon } from "#fortawesome/react-fontawesome";
// import the icon
import { faCoffee } from "#fortawesome/free-solid-svg-icons";
// usage
<FontAwesomeIcon icon={faCoffee} />

React/Next JS import custom library

Im trying to learn react and next js. I wanna use this plugin. I installed that with npm but i dont know how to import it.
How i'm gonna use npm installed packages in my code?
Here is the code...
import React from 'react';
import VirtualSelect from 'virtual-select-plugin';
function Options() {
VirtualSelect.init({
ele: '#sample-select',
options: [
{ label: 'Options 1', value: '1' },
{ label: 'Options 2', value: '2' },
{ label: 'Options 3', value: '3' },
],
});
return <div className='container mx-auto lg:px-10 px-5 mt-10'>
<h2>Options</h2>
<div>
<div>
<h3>Genre</h3>
<div id="sample-select"></div>
</div>
<div>
<h3>Year</h3>
</div>
<div>
<h3>Seasons</h3>
</div>
</div>
</div>;
}
export default Options;
error message:
./components/Options.js:2:0
Module not found: Can't resolve 'virtual-select-plugin'
1 | import React from 'react';
> 2 | import VirtualSelect from 'virtual-select-plugin';
3 |
4 | function Options() {
5 |
Import trace for requested module:
./pages/index.js
https://nextjs.org/docs/messages/module-not-found

<link rel="stylesheet" href="node_modules/virtual-select-plugin/dist/virtual-select.min.css">
<script src="node_modules/virtual-select-plugin/dist/virtual-select.min.js"></script>
<!-- optional -->
<link rel="stylesheet" href="node_modules/tooltip-plugin/dist/tooltip.min.css">
<script src="node_modules/tooltip-plugin/dist/tooltip.min.js"></script>
This is from the docs of virtual-select-plugins
Reference
and you said you're using next js there is a scripttag in Nextjs Put it on your whole application _app.js in pages
_app.js Reference
I suggest read the docs

there are many ways to do that
first option is to add your script tag in the public html page
second option is to install react helemet package for adding an element of the head of component https://www.npmjs.com/package/react-helmet
or you can simply use this package to create a virtual select in react https://www.npmjs.com/package/react-select-virtualized

I think you can resolve this simply by npm install.
Install the required package.
$ npm i virtual-select-plugin
Then you can see virtual-select-plugin module is added to dependencies. Look at package.json.
{
"dependencies":{
...
"virtual-select-plugin": "^1.0.29",
...
}
}

Working Vue 3 app empties mounted element when using Vue as an npm package

I'm working with a very simple Vue 3 app, listed below.
This works like a charm when including Vue as a script, see code snippet.
I need to use it with webpack however, and therefore include it as an npm package.
In this case the app loads, but Vue empties everything inside the div it's mounted on.
See CodeSandbox example
I've tried different ways to export and import the App object, but none work.
What am I overlooking?
const {ref} = Vue;
const App = {
setup() {
const count = ref(0);
const inc = () => {
count.value++;
};
return {count, inc};
}
}
Vue.createApp(App).mount('#simple-example')
<head>
<script src="https://unpkg.com/vue#3.2.29/dist/vue.global.prod.js"></script>
</head>
<body>
<div id="simple-example">
<h1>Hello Vue 3!</h1>
<button #click="inc">Clicked {{ count }} times.</button>
</div>
</body>

Changing this:
import { createApp } from "vue";
into this:
import { createApp } from "vue/dist/vue.esm-bundler";
fixed the problem. Thanks to Estus Flask
UPDATE
The fix can be further improved by creating an alias for vue in the webpack config file:
resolve: {
alias: {
vue: "vue/dist/vue.esm-bundler.js"
}
}
That will make it possible to use "vue" again in the import statement, which then points to the vue.esm-bundler.js instead of the default vue.runtime.es.js.

how to use external jquery plugin in react

I've built a React project using CRA. I need to use a plugin that is built using jquery. It's a datepicker but the calendar it's using is Bikram Sambat. The link to the datepicker code is Nepali Date Picker . I've done the following:
public/index.html
<link href="%PUBLIC_URL%/assets/nepaliDatePicker.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script src="%PUBLIC_URL%/assets/nepaliDatePicker.min.js"></script>
NepaliDate Component
import React, { Component } from 'react';
const $ = window.$;
export default class NepaliDate extends Component {
shouldComponentUpdate() {
return false;
}
componentDidMount() {
$('.date-picker').nepaliDatePicker({
dateFormat: '%D, %M %d, %y',
closeOnDateSelect: true
});
}
showDatePicker = () => {
$('.date-picker').nepaliDatePicker();
};
render() {
return (
<input
type="text"
value=""
name="date"
className="date-picker"
onFocus={this.showDatePicker}
/>
);
}
}
The datepicker isn't showing up.

Can use "react-load-script" to load 3rd part JS libraries. After install can use like below
import Script from 'react-load-script'
render(){
return(
<div>
<Script url="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"/>
<Script url="menu.js"/>
//.....Remaining code can be here
</div>
);
}

Just follow instruction showed on Nepali-Date-Picker github page, install library with npm install and add CDN link to your html file inside public folder inside head element above root element, hope this resolve your issue.

Node.js+React automating tests with Jest

Edit (07/02/2015)
Found out what I was doing wrong. Leaving this for reference if anyone stumbles upon the same issue. Check my answer bellow.
I am currently trying to test my Node.js+React components using Jest. I've installed jest-cli and created a task on my gulpfile to run 'npm test'.
I somehow followed the instructions found here: http://www.undefinednull.com/2015/05/03/react-tdd-example-unit-testing-and-building-a-react-component-with-jest-gulp-and-react-test-utils/
And went to the project git repo to find how to configure some other stuff.
When I run the command 'gulp test' however, apparently all I get is the eslint code validation. I don't think my tests are running at all.
my relevant folder structure is as follows:
/__tests__
searchComponent-spec.js
/src
/components
/Search
Search.js
package.json
gulpfile.babel.js
there are many other stuff but I don't believe they are relevant.
My Search.js
/*! React Starter Kit | MIT License | http://www.reactstarterkit.com/ */
import React, { PropTypes } from 'react';
import styles from './Search.less';
import withStyles from '../../decorators/withStyles';
import Link from '../../utils/Link';
#withStyles(styles)
class Search {
static contextTypes = {
onSetTitle: PropTypes.func.isRequired
};
render() {
let title = 'Pesquisa de desenvolvedores';
this.context.onSetTitle(title);
return (
<div className="Search">
<div className="Search-container">
<a className="Search-brand" href="/" onClick={Link.handleClick}>
<span className="Search-brandTxt">Dev-Shop</span>
</a>
<div className="Search-banner">
<h1 className="Search-bannerTitle">Loja de desenvolvedores</h1>
</div>
</div>
</div>
);
}
}
export default Search;
My searchComponent-spec.js:
/**
* Created by urielbertoche on 02/07/15.
*/
"use strict";
jest.dontMock('../src/components/Search/Search.js');
describe('Search', function () {
var React = require('react/addons');
var TestUtils = React.addons.TestUtils;
var Search;
beforeSearch(function () {
Search = require('../src/components/Search');
});
it('should exists', function () {
// Render into document
var search = TestUtils.renderIntoDocument(<Search />);
expect(TestUtils.isCompositeComponent(search)).toBeTruthy();
});
});
anyone got any idea why my tests may not be running?
Thanks a lot

I found the problem. My package.json had an entry:
"jest": {
"rootDir": "./src",
"scriptPreprocessor": "../preprocessor.js",
"unmockedModulePathPatterns": [
"../node_modules/react"
]
},
what I screwed up was that my tests folder was not on the same rootDir declared there, it was on it's parent, moving the tests folder into my src folder fixed it.