We Keep Coding

React - storybook. Bootstrap Icon components don't show in storybook

I am building React storybook components using react-bootstrap.
Almost components are completed well.
But only some components that includes bootstrap icons don't show in storybook.
Is there any way to fix this issue?
Thanks.

Sometimes the issue is for linked components, in this case, you need import each icon from SVG.
import {
faEdit,
faUser,
faCartShopping,
faHeart,
} from "#fortawesome/free-solid-svg-icons";
Don't forget link the components in console with: npm link

import "bootstrap-icons/font/bootstrap-icons.css";
in the .storybook/preview.js file solved that issue.

ImportError: 'useNavigate' is not exported from 'react-router-dom'

When trying to import useNavigate from react-router-dom, I get the following error:
Attempted import error: 'useNavigate' is not exported from 'react-router-dom'.
My Import statement:
import { useNavigate } from 'react-router-dom';

You are trying to use the latest features of react-router.
Please make sure that you installed the react-router-dom#6.0.0-alpha.2 .
It is React Router v6 which gives you a useNavigate hook
Please refer here for further reading from the React Router team
Two quick ways to check the version:
Verify from the package.json file
Run npm list --depth=0 to view the various packages in your project

If you're using react router v5 you can use useHistory.
import { useHistory } from "react-router-dom";
use:
history.push('/your-component')

I faced issue as like this: "useNavigate is not exported from 'react-router-dom"
My solution - I uninstalled the react-router-dom and I have reinstalled it... now this issue is resolved for me..

Next.js routing error in website tutorial

For me the next.js tutorial https://github.com/zeit/next-learn-demo.git
has a problem at all stages past stage 2 "dynamic routing". Even though in the stages afterwards on stages 3 to 8 the dynamic routing should already be working.
What i assumed was the problems is that the file .next/routing appeared to be missing.
As such the tutorial asked implementation of code:
import { useRouter } from 'next/router';
and
const router = useRouter();
does not do anything.
leading to the error on clicking the link:
screenshot of next.js browser syntax error inspection
Why is the routing file not in the .next folder?
the react version is 16.10.2 (installed today through tutorial instructions)
the format of code is what is in the tutorial copy pasted. (no hook rule breaking)
there are no react duplicates.

I think you are using useRouter() in class component. useRouter is a hook and used only in functional components.
in class components we use withRouter HOC. "router" object is accessible as
this.props.router

Unable to compile react application as it says "Module not found"

I have been trying to execute a very simple react application, but for some reason I'm unable to compile it. When i try to compile it in bash using "npm start", i get the error stating "Failed to compile: ./src/index.js
Module not found: Can't resolve './registerServiceWorker' in '/Users/Pruthvi/Desktop/ReactApplication/my-app/src'"
can anybody help me as I am a new bee to react application!

By default, create-react-app will create a progressive web app, as documented here. The progressive web app relies on registerServiceWorker() in the registerServiceWorker.js file. You have apparently deleted this file, so your project no longer builds.
You have two choices:
Keep your project as a progressive web app, in which case you should simply restore the original state you had after first creating.
Opt out of the progressive web app features.
In order to opt out of the progressive web app features, you need to modify your src/index.js file as follows:
Delete the import of the registerServiceWorker.
Delete the registerServiceWorker() call.
Your src/index.js will then look like this:
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
// Deleted -- import registerServiceWorker from './registerServiceWorker';
ReactDOM.render(<App />, document.getElementById('root'));
// Deleted -- registerServiceWorker();
Once you've made those modifications to your index.js, you can safely delete the registerServiceWorker.js file (which it appears you've already done based on the error message you've posted).
The documentation gives a more complete description of how to opt out and some of the consequences of having a progressive web app.

If you are new to react and need to build apps fast you can try
create-react-app by facebook
it a command line tool that will help you build better react app fast with zero configuration you can learn more from the link above and its easy to use
also make sure that you use a good editor that can help you catch errors
and to help you and give you good answer the second time please provide your code to understand the problem well .

External react component cannot see React.Component

The external React component says Uncaught TypeError: Cannot read property 'Component' of undefined when I link as npm package.
I link a package in package.json as "react-mapbox": "https://github.com/varya/react-mapbox.git". Then I use it in code
import {render} from 'react-dom';
import MapBox from "react-mapbox";
render(
<div>
<h1>Hello, world!</h1>
<MapBox />
</div>
,
document.getElementById('example')
);
But nothing works, I get that error. The full repo is here https://github.com/varya/react-mapbox-test I made a small example to illustrate.
The react-mapbox package is my own, maybe I build it wrongly? This is its repo https://github.com/varya/react-mapbox
I built it with webpack, like that https://github.com/varya/react-mapbox/blob/master/webpack.config.js As I suppose, this build does not include react package assuming that this will be at the project which link it. But the component still do not see react object.
UPD
I added import React from 'react'; as #aulizko suggested, but this only provided React object onto a page. It still was not visible for the component.
To fix this I had to provide this changes https://github.com/varya/react-mapbox/commit/2687d66025aaa84553a79850aa8686e88f1f39d9
I required react in the code of the component as well.
And I have to build with Babel. For some reason the webpack build gives the same error even if react is required. I created a branch to illustrate this https://github.com/varya/react-mapbox/tree/webpack Now I'm happy with Babel, but with this branch you can see what's wrong with webpack if interested.

You're probably bundling your module as UMD which is causing the bundle to utilized a global React variable which doesn't exist in the consumer app. You need to export the bundle as a CommonJS or AMD module using https://webpack.github.io/docs/configuration.html#output-librarytarget. Simple add libraryTarget: 'commonjs2 or libraryTarget: 'amd' to the output key in the webpack config and make sure you are importing react in your component.

I added import React from 'react'; as #aulizko suggested, but this only provided React object onto a page. It still was not visible for the component.
To fix this I had to provide this changes https://github.com/varya/react-mapbox/commit/2687d66025aaa84553a79850aa8686e88f1f39d9
I required react in the code of the component as well.
And I have to build with Babel. For some reason the webpack build gives the same error even if react is required. I created a branch to illustrate this https://github.com/varya/react-mapbox/tree/webpack Now I'm happy with Babel, but with this branch you can see what's wrong with webpack if interested.

The thing is that the jsx-code that you see in your editor is not the code that will be executed by node or browser.
If you look into code that are generated by the babel, you'll see something like this:
(0, _reactDom.render)(React.createElement(
'div',
null,
React.createElement(
'h1',
null,
'Hello, world!'
),
React.createElement(_reactMapbox2['default'], null)
), document.getElementById('example'));
So as you can see it uses React constant under the hood.
You need to explicitely import React if you want to use jsx-code.
Add something like this in your code and it'll work:
import React from 'react'; // <!--- add this!!!
import {render} from 'react-dom';
import MapBox from "react-mapbox";
// the rest of your code goes here...

You have to import React's Component it this way:
import {Component} from 'react';
or even:
import React, { Component, PropTypes } from 'react';