I have some weird error everytime when I'm trying to use some component from 'react-bootstrap'. Here is some small example where I'm importing "HelpBlock" component.
import PropTypes from 'prop-types';
import React from 'react';
import HelpBlock from 'react-bootstrap';
class RegisterFormDetails extends React.Component {
...
<HelpBlock>{validationErrorMessage}</HelpBlock>
}
</div>
</div>
);
};
export default RegisterFormDetails;
but then I'm getting this error
Attempted import error: 'react-bootstrap' does not contain a default export (imported as 'HelpBlock').
my package.json
{
"name": "my-app",
"version": "0.1.0",
"private": true,
"dependencies": {},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": [
">0.2%",
"not dead",
"not ie <= 11",
"not op_mini all"
],
"devDependencies": {
"bootstrap": "^4.3.1",
"lodash": "^4.17.11",
"prop-types": "^15.7.2",
"react": "^16.8.3",
"react-bootstrap": "^0.32.1",
"react-bootstrap-sweetalert": "^4.4.1",
"react-dom": "^16.8.3",
"react-scripts": "^2.1.5",
"react-select": "^2.4.1"
}
}
somebody can help me ? I have rechecked the react-bootstrap folder in node_modules and contains the component which I'm trying to import
You can import individual components like:
import HelpBlock from 'react-bootstrap/HelpBlock ';
The first one is importing component directly, The above is a default import. Default imports are exported with export default .... There can be only a single default export. Since 'react-bootstrap' does not contain a default export , you have to import directly.
or import { HelpBlock } from 'react-bootstrap';
Here, only HelpBlock will be imported. Hope it helps.
This article will help you to understand es6 modules.
Related
I'm getting invalid hook error on useNavigate hook:
Warning: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
Code:
import React from "react";
import styles from "./Home.module.css";
import { useNavigate } from "react-router-dom";
import Card from "../../components/shared/Card/Card";
import Button from "../../components/shared/Button/Button";
const Home = () => {
const signInLinkStyle = {
color: '#0077ff',
fontWeight: 'bold',
textDecoration: 'none',
marginLeft: '10px'
}
const navigate = useNavigate();
const startRegister = () => {
navigate("/authenticate");
}
return (
<>
<div className={styles.cardWrapper}>
<Card title='Welcome to Codershouse!' icon='logo'>
<p className={styles.text}>
We’re working hard to get Codershouse ready for everyone! While we
wrap up the finishing youches, we’re adding people gradually to make
sure nothing breaks :)
</p>
<div>
<Button onClick={ startRegister } text="Let's Go"/>
</div>
<div className={styles.signinWrapper}>
<span className={styles.hasInvite}>Have an invite text?</span>
</div>
</Card>
</div>
</>
);
};
export default Home;
Package.json
{
"name": "frontend",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^5.16.5",
"#testing-library/react": "^13.4.0",
"#testing-library/user-event": "^13.5.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
Full error image:
I am building a music-player application, where basically the user clicks the song they want and it plays the assigned music. However I am getting this error:
ERROR in ./src/components/MusicPlayer.js 7:0-17
Module not found: Error: Can't resolve './music' in '/Users/zpotatlises/Desktop/spotifly/src/components'
I am assuming I am getting this error because i imported the audio incorrectly in my application. This image shows the audio folder in my src file.
(when you open the file) ->
This is my code on MusicPlayer.js:
import React, { Component,audio,useRef } from 'react';
import "./music";
import house1 from './music/house1';
import house2 from './music/house2';
import house3 from './music/house3';
import house4 from './music/house4';
const data = [
{ imgSrc: 'house1.png', audioSrc: house1 },
{ imgSrc: 'house2.png', audioSrc: house2 },
{ imgSrc: 'house3.png', audioSrc: house3 },
{ imgSrc: 'house4.png', audioSrc: house4 },
];
export default class MusicPlayer extends Component {
render() {
return (
<div>
<ol>
{data.map(({ imgSrc, audioSrc }) => (
<MediaComponent imgSrc={imgSrc} audioSrc={audioSrc} />
))}
</ol>
</div>
);
}
}
const MediaComponent = ({ imgSrc, audioSrc }) => {
const audioRef = useRef(null);
const toggleAudio = () =>
audio.ref.current.paused
? audioRef.current.play()
: audioRef.current.pause();
return (
<li>
<img src={imgSrc} onClick={toggleAudio}/>
<audio ref={audioRef} src={audioSrc} />
</li>
);
};
Any idea on how to import audio in my application? How did I do it incorrectly?
(P.s english is my second language, if you need any clarification please let me know)
Best,
-Zpo
Package.json :
{
"name": "spotifly",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^5.16.4",
"#testing-library/react": "^12.1.5",
"#testing-library/user-event": "^13.5.0",
"bootstrap": "^5.1.3",
"navbar": "^2.1.0",
"react": "^18.0.0",
"react-audio-player": "^0.17.0",
"react-bootstrap": "^2.2.3",
"react-bootstrap-icons": "^1.8.1",
"react-dom": "^18.0.0",
"react-is": "^18.0.0",
"react-router-dom": "^6.3.0",
"react-scripts": "5.0.0",
"web-vitals": "^2.1.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
New Error Messages:
ERROR in ./src/components/MusicPlayer.js 7:0-40
Module not found: Error: Can't resolve './music/house1.mp3' in '/Users/zpotatlises/Desktop/spotifly/src/components'
ERROR in ./src/components/MusicPlayer.js 8:0-40
Module not found: Error: Can't resolve '#/music/house2.mp3' in '/Users/zpotatlises/Desktop/spotifly/src/components'
ERROR in ./src/components/MusicPlayer.js 9:0-48
Module not found: Error: You attempted to import ../../../assets/house3.mp3 which falls outside of the project src/ directory. Relative imports outside of src/ are not supported.
You can either move it inside src/, or add a symlink to it from project's node_modules/.
Your syntax is correct, so you've likely got the path wrong.
Be sure to include the file's extension for media assets (.mp3)
Based on your error message, it is looking for ./music inside your components directory, which likely isn't correct.
Delete import "./music"; and then import the specific MP3 files you need
Can't resolve './music' in '/Users/zpotatlises/Desktop/spotifly/src/components'
Take a look at where your asset is in relation to the file that's importing it. If you're able to share more info about your projects directory structure, then I can help further.
Side note, I recommend setting up import aliases, so that you can import files from their absolute location. It will reduce confusion and be easier to manage.
How you do this depends on your type of project, but it's usually something like thin in your tsconfig.json or jsconfig.json
{
"compilerOptions": {
"baseUrl": "src"
},
"include": ["src"]
}
You'll then be able to import #/assets/my-tune.mp3 instead of ../../../assets/my-tune.mp3, much simpler :)
Usage:
Just create a file index.js in videos.
import videos from '~/assets/videos';
function App() {
return <video src={videos.video1} width={100} height={100} controls autoPlay/>
}
I am working on an react js application, I had added reactbootstrap & primereact library for the styling.
the reactbootstrap library is working fine But primereact styling is not getting applied , I have followed all the steps present in getting started section, can anyone suggest me what is missing.
I am adding the Files for the refrence.
I used the below command to add files in node modules
npm install primereact --save
npm install primeicons --save
App.js File
import logo from './logo.svg';
import './App.css';
import Header from './MyComponents/Header'
import 'bootstrap/dist/css/bootstrap.min.css';
import 'primereact/resources/primereact.min.css';
import 'primeicons/primeicons.css';
import {Todos} from './MyComponents/Todos'
import {TodoElements} from './MyComponents/TodoElements'
import {Footer} from './MyComponents/Footer'
function App() {
<script src="https://unpkg.com/primereact/primereact.all.min.js"></script>
return (
<><Header title='Code With Shiva' searchBar={true}/>
<Todos/>
<TodoElements/>
<Footer/>
</>
);
}
export default App;
Todos.js where I am adding primereact styled button
import React from 'react';
import { Button } from 'primereact/button';
export const Todos = () => {
return (
<div>
<Button label="Success" className="p-button-success" />
</div>
)
}
Adding package.json for refrence
{
"name": "todos-list",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^5.16.1",
"#testing-library/react": "^12.1.2",
"#testing-library/user-event": "^13.5.0",
"bootstrap": "^5.1.3",
"primeicons": "^5.0.0",
"primereact": "^7.1.0",
"prop-types": "^15.8.1",
"react": "^17.0.2",
"react-bootstrap": "^2.1.1",
"react-dom": "^17.0.2",
"react-scripts": "5.0.0",
"react-transition-group": "^4.4.2",
"style-loader": "^3.3.1",
"web-vitals": "^2.1.3"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
Adding final result image
All PrimeReact components require a theme so just add...
import "primereact/resources/themes/lara-light-indigo/theme.css";
I make a simple component hello world in react js this
import React from 'react';
function App() {
return (
<div >
hello4
</div>
);
}
export default App;
I export in index file like this
import App from './App'
module.exports = {
App
}
Now I export this component is index.js to use in another project
so in another project I used above project as a dependency like this
"dependencies": {
"#testing-library/jest-dom": "^4.2.4",
"#testing-library/react": "^9.5.0",
"#testing-library/user-event": "^7.2.1",
"pubnsi": "git+https://git#github.com/naveennsit/pubs.git",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-scripts": "3.4.1"
},
but when I used this component in my another project like this it gives me syntax error
import React from 'react';
import './App.css';
import App from "pubnsi/src/App";
function App1() {
return (
<div className="App">
hello
<App/>
</div>
);
}
export default App1;
I tried to replicate this bug in codesandbox
https://codesandbox.io/s/nifty-glitter-bj6sz?file=/package.json
but not getting error in codesandbox.
package.json file
{
"name": "consukmer",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^4.2.4",
"#testing-library/react": "^9.5.0",
"#testing-library/user-event": "^7.2.1",
"pubnsi": "git+https://git#github.com/naveennsit/pubs.git",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-scripts": "3.4.1"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
To use a Github repository as a dependency, you will have to add it like this:
"pubnsi": "naveennsit/pubs"
instead of like this:
"pubnsi": "git+https://git#github.com/naveennsit/pubs.git",
I have the following import in my create-react-app:
import createSagaMiddleware from 'redux-saga';
Problem is that my system is unable to import createSagaMiddleware.
I am running versions:
node 12.13.0
npm 6.12.1
My package.json looks like this:
{
"name": "foo",
"version": "0.1.0",
"private": true,
"dependencies": {
"firebase": "^7.1.0",
"node-sass": "^4.12.0",
"npm": "^6.12.1",
"react": "^16.10.1",
"react-dom": "^16.10.1",
"react-redux": "^7.1.1",
"react-router-dom": "^5.1.2",
"react-scripts": "3.1.2",
"react-stripe-checkout": "^2.6.3",
"redux": "^4.0.4",
"redux-logger": "^3.0.6",
"redux-persist": "^6.0.0",
"redux-saga": "^1.1.1",
"redux-thunk": "^2.3.0",
"reselect": "^4.0.0",
"styled-components": "^4.4.0"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
My IDE says (Intellij IDEA) says that it 'cannot resolve symbol 'createSagaMiddleware'.
The actual error message that I see is
Error: Actions must be plain objects. Use custom middleware for async actions
which is thrown at
componentDidMount() {
const {fetchCollectionsStart} = this.props;
fetchCollectionsStart();
};
->
const mapDispatchToProps = (dispatch) => ({
fetchCollectionsStart: () => dispatch(fetchCollectionsStart())
});
export default connect(
null,
mapDispatchToProps
)(ShopPage);
The fetchCollectionsStart action looks like this:
import {takeEvery} from 'redux-saga/effects';
import ShopActionTypes from "./shop.types";
export function* fetchCollectionsAsync() {
yield console.log('I am fired');
}
export function* fetchCollectionsStart() {
yield takeEvery(
ShopActionTypes.FETCH_COLLECTIONS_START,
fetchCollectionsAsync
);
}
My redux store looks like this:
import { createStore, applyMiddleware } from 'redux';
import { persistStore } from 'redux-persist';
import logger from 'redux-logger';
import createSagaMiddleware from 'redux-saga';
import {fetchCollectionsStart} from "./shop/shop.sagas";
import rootReducer from './root-reducer';
const sagaMiddleware = createSagaMiddleware();
const middlewares = [sagaMiddleware];
if (process.env.NODE_ENV === 'development') {
middlewares.push(logger);
}
export const store = createStore(rootReducer, applyMiddleware(...middlewares));
sagaMiddleware.run(fetchCollectionsStart);
export const persistor = persistStore(store);
export default { store, persistStore };
I have seen a similar question be asked at https://github.com/redux-saga/redux-saga/issues/1967.
However that answer doesn't solve it here.
Any ideas?
Thanks
As the error says, actions have to be plain objects. Apparently you are dispatching a saga instead of an action.
Replace your mapDispatchToProps code block with:
const mapDispatchToProps = (dispatch) => ({
fetchCollectionsStart: () => {
dispatch({ type: ShopActionTypes.FETCH_COLLECTIONS_START });
},
});