I want to develop a React Js app with the framework Primereact.
Now I have the problem that some Imports can't be found.
The Import import {Button} from 'primereact/Button' throws the exception:
Cannot find file: 'Button.js' does not match the corresponding name on disk: '.\node_modules\primereact\button.js
The second problem I have is that DatatableSubMenu and DatatableCrudDocu cannot be found. What is the correct import?
My package.json is:
"name": "selldesk",
"version": "0.1.0",
"private": true,
"dependencies": {
"bootstrap": "^4.3.1",
"primeicons": "^2.0.0",
"primereact": "^3.3.2",
"react": "^16.12.0",
"react-bootstrap": "^1.0.0-beta.16",
"react-dom": "^16.12.0",
"react-scripts": "3.2.0",
"reactstrap": "^8.1.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"
]
}
}
I hope somebody can help me.
It's because you have imported button incorrectly.
Change this
import {Button} from 'primereact/Button'; //uppercase
to
import {Button} from 'primereact/button'; //lowercase
Make sure to keep them lowercase. Check the docs for correct import statements -
https://www.primefaces.org/primereact/#/button
Related
I need some help with my React project. I can't compile any JSX and I'm completely lost on what to do. Currently this is the error when trying to compile:
I've tried deleting my package.json and node_modules folder and then running npm install. Nothing seems to work. I've tried completely removing node.js and everything relating to it and npm and reinstalling everything. I'm completely lost on what to do. I'm currently running WebStorm if that helps.
package.json:
{
"name": "tutorial",
"version": "0.1.0",
"private": true,
"dependencies": {
"axios": "^0.27.2",
"babel": "^6.23.0",
"#babel/preset-react": "7.18.6",
"eslint": "8.22.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-scripts": "^5.0.1",
"react-table": "^7.8.0",
"styled-components": "^5.3.5"
},
"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"
]
},
"description": "This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).",
"main": "index.js",
"author": "",
"license": "ISC",
"devDependencies": {
"eslint-config-react-app": "^7.0.1"
}
}
I have a babel.config.js in the src directory:
module.exports = {
"presets": ["#babel/preset-env", "#babel/preset-react"]
};
Why does react does not work here
<script src="index.js" ></script>
Note: above code is located at the main html
heres the react.js file
import React from 'react'
import ReactDOM from 'react-dom'
const page = (
<div>
<ul>
<li>Anime Title</li>
<li>Genre</li>
<li>Rating</li>
<li>Status</li>
</ul>
</div>
)
ReactDOM.render(page, document.getElementById("root"))
Whenever i tried to run this it says "cannot use import statement outside a module"
Do i did wrong when installing react-js?
by the way heres the package.json
{
"name": "try",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^5.16.5",
"#testing-library/react": "^13.3.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"
]
}
}
I add in my package.json proxy for making request to server runing on other port.
after that, my module css styles stop working, in the devTools i found that the styles are loading well, but classnames for DOM elements are not loading at all.
How it looks now:
How it should be:
some page code:
import styles from "./LoginPage.module.css";
export default function LoginPage() {
return (
<div className={styles.LoginPage}>
</div>
);
}
Here is my package.json:
{
"name": "job-bot-admin-panel",
"version": "0.1.0",
"private": true,
"proxy": "http://localhost:8000/",
"dependencies": {
"#reduxjs/toolkit": "^1.8.1",
"#testing-library/jest-dom": "^4.2.4",
"#testing-library/react": "^9.5.0",
"#testing-library/user-event": "^7.2.1",
"http-proxy-middleware": "^2.0.4",
"multiselect-react-dropdown": "^2.0.21",
"react": "^18.0.0",
"react-dom": "^18.0.0",
"react-redux": "^7.2.8",
"react-router-dom": "^6.3.0",
"react-scripts": "^0.9.5",
"react-select": "^5.2.2",
"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"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
your filename is incorrect. for css modules you don't need to add .module to the filename, just name it LoginPage.css and import it with that same name and your styles should be fine. React is getting confused with your module filename.
Everything seems correct but I don't know why I can't able to use CSS in my project. I have tried without writing module in CSS file's name but it didn't work. I have tried literally everything but none of those worked for me.
import React, { Component } from 'react';
import styles from './App.module.css';
class App extends Component {
render(){
return (
<div>
<h1 className={styles.blue}>Burger Builder</h1>
</div>
);
}
}
export default App;
My CSS File,
.blue{
color: blue;
}
Package.json file
{
"name": "burger-builder",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^5.14.1",
"#testing-library/react": "^11.2.7",
"#testing-library/user-event": "^12.8.3",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-scripts": "^1.1.5",
"web-vitals": "^1.1.2"
},
"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"
]
}
}
CSS modules is available with react-scripts#2.0.0 and higher.
I'm stuck with this error below:
Failed to compile ./node_modules/#material-ui/core/ButtonBase/ButtonBase.js Module not found: Can't resolve '#babel/runtime/helpers/builtin/assertThisInitialized' in 'E:\IT\the-venue\node_modules#material-ui\core\ButtonBase'
Since the problem has to do something with Babel I've installed the latest version coming from Babel's website (https://babeljs.io/setup#installation).
I've only done it until step 2, because the step 3 requires 'react' replacement with 'babel'in the 'scripts' section ('build' line) and I am not sure if I should do this.
Here is my package.json
{
"name": "the-venue",
"version": "0.1.0",
"private": true,
"dependencies": {
"#material-ui/core": "^1.2.0",
"#material-ui/icons": "^1.1.0",
"react": "^16.8.6",
"react-dom": "^16.8.6",
"react-reveal": "^1.2.2",
"react-scripts": "3.0.1",
"react-scroll": "^1.7.9",
"react-slick": "^0.23.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"
]
},
"devDependencies": {
"#babel/cli": "^7.5.5",
"#babel/core": "^7.5.5"
}
}
I am working with Material UI and the expected result is the webpage with the header from Material UI (App Bar).
Would anyone explain what the problem is and help me solve it, please ?
npm install #material-ui/core#latest #material-ui/icons#latest react-reveal#1.2.2 react-scroll#1.7.9 react-slick#0.23.1
Do this and get the latest version of material-ui/core & material-ui/icons.
This will solve your problem.