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.
Related
I have a react app , I packaged it using npm pack and I want to use it inside the main.ts in an electron app ,
I'm trying to import it like this import App from 'mypackage' but it keeps giving me this error
Error [ERR_REQUIRE_ESM]: require() of ES Module C:\node_modules\mypackage\src\index.js from C:\src\main\main.ts not supported.
Instead change the require of index.js in C:\src\main\main.ts to a dynamic import() which is available in all CommonJS modules.
in my json file
{
"name": "mypackage",
"version": "0.1.0",
"main":"src/index.js",
"private": true,
"dependencies": {
"#blueprintjs/core": "^3.52.0",
"#blueprintjs/popover2": "^0.12.9",
"#rimbu/core": "^0.8.4",
"#testing-library/jest-dom": "^5.11.4",
"#testing-library/react": "^11.1.0",
"#testing-library/user-event": "^12.1.10",
"#types/jest": "^26.0.15",
"#types/node": "^12.0.0",
"#types/react": "^17.0.37",
"#types/react-beautiful-dnd": "^13.1.2",
"#types/react-dom": "^17.0.11",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-icons": "^4.3.1",
"react-scripts": "4.0.3",
"react-table": "^7.7.0",
"typescript": "^4.1.2",
"web-vitals": "^1.0.1"
},
"type" : "module",
"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"
]
},
"devDependencies": {
"#types/react-table": "^7.7.9",
"sass": "^1.45.1"
}
}
{
"name": "furniture",
"version": "0.1.0",
"private": true,
**"type": "module"**,
"dependencies": {
"#emotion/react": "^11.7.1",
"#emotion/styled": "^11.6.0",
"#material-ui/core": "^4.12.3",
"#mui/icons-material": "^5.2.5",
"#mui/material": "^5.2.6",
"#mui/styles": "^5.2.3",
"#testing-library/jest-dom": "^5.16.1",
"#testing-library/react": "^12.1.2",
"#testing-library/user-event": "^13.5.0",
"bootstrap": "^5.1.3",
"dot-env": "^0.0.1",
"mongoose": "^6.1.6",
"react": "^17.0.2",
"react-bootstrap": "^2.1.0",
"react-dom": "^17.0.2",
"react-scripts": "5.0.0",
"react-swipeable-views": "^0.14.0",
"web-vitals": "^2.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"
]
}
}
Compiled with problems:X
ERROR in ./src/index.js 9:0-58
Module not found: Error: Can't resolve 'react/jsx-dev-runtime' in '/home/reddragon/Documents/Projects/furniture/src'
Did you mean 'jsx-dev-runtime.js'?
BREAKING CHANGE: The request 'react/jsx-dev-runtime' failed to resolve only because it was resolved as fully specified
(probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '.mjs' file, or a '.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.
When I do babel configuration it will create a mess.
I created a react project with create-react-app some times ago and i wanted to add some test with jest. I read that Jest comes with create-react-app, but when i try to run the simple test that comes with the project by typing "yarn test", i have this error message: TypeError: (0 , _react2.test) is not a function
The test:
import React from 'react';
import { render, screen, expect, test} from '#testing-library/react';
import App from './App';
test('renders learn react link', () => {
render(<App />);
const linkElement = screen.getByText(/learn react/i);
expect(linkElement).toBeInTheDocument();
});
The result:
My package.json
{
"name": "test-app",
"version": "0.1.0",
"private": true,
"dependencies": {
"#material-ui/core": "^4.11.4",
"#material-ui/icons": "^4.11.2",
"#testing-library/jest-dom": "^5.14.1",
"#testing-library/react": "^11.2.7",
"#testing-library/user-event": "^13.1.9",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-router-dom": "^5.2.0",
"react-scripts": "4.0.3",
"web-vitals": "^2.0.1"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"lint": "eslint . --ext .js,.jsx",
"lint-fix": "npm run lint -- --fix"
},
"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"
]
},
"devDependencies": {
"eslint": "^7.28.0",
"eslint-plugin-react": "^7.24.0"
}
}
Does anyone know what i am missing ? Thank you !
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.
whenever I deploy my react app to github pages it is showing the following error.
Your site is having problems building: Unable to build page. Please try again later
It was working fine even a week ago. This is the code of my package.JSON file
{
"name": "todolist",
"homepage": "https://srijit2002.github.io/todoapp",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^5.12.0",
"#testing-library/react": "^11.2.7",
"#testing-library/user-event": "^12.8.3",
"gh-pages": "^3.1.0",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-icons": "^4.2.0",
"react-scripts": "4.0.3",
"web-vitals": "^1.1.2"
},
"scripts": {
"predeploy": "npm run build",
"deploy": "gh-pages -d build",
"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"
]
},
"devDependencies": {
"sass": "^1.32.13"
}
}