I followed tailwind documentation to install it in react using create-react-app.
I cant find any mistakes in the instalation but i got an error when starting the app.
./node_modules/tailwindcss/node_modules/color/index.js 246:28
Module parse failed: Identifier directly after number (246:28)
File was processed with these loaders:
./node_modules/babel-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
| for (const [i, element] of rgb.entries()) {
| const chan = element / 255;
> lum[i] = chan <= 0.039_28 ? chan / 12.92 : ((chan + 0.055) / 1.055) ** 2.4;
| }
|
The node_modules/color/index.js (246:28) havent been touched and looks fine.
tailwind.confi.js and craco.config.js are exactly as tailwind documentation for react.
this is my package.json
{
"name": "2109-sailaway",
"version": "0.1.0",
"private": true,
"dependencies": {
"#craco/craco": "^6.3.0",
"#heroicons/react": "^1.0.4",
"#testing-library/jest-dom": "^5.14.1",
"#testing-library/react": "^11.2.7",
"#testing-library/user-event": "^12.8.3",
"axios": "^0.22.0",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-router-dom": "^5.3.0",
"react-scripts": "4.0.3",
"web-vitals": "^1.1.2"
},
"scripts": {
"start": "craco start",
"build": "craco build",
"test": "craco 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": {
"autoprefixer": "^9.8.8",
"postcss": "^7.0.39",
"tailwindcss": "npm:#tailwindcss/postcss7-compat#^2.2.16"
}
}
Any help please
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"
}
}
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.
{
"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 can't clear this error. I've installed and reinstalled webpack types but can't figure out how to make this work. Is there a way to clear or bypass this error?
Error
TypeScript error in /app/src/components/MoviePage/MoviePage.tsx(9,11):
Property 'context' does not exist on type 'NodeRequire'. TS2339
Code with error
const movieThumbImages = importAll(
require.context("../../assets/moviePosterImages", false, /\.(png|jpe?g|svg)$/)
);
Function
export const importAll = (r: any) => {
return r.keys().map(r);
};
package.json
{
"name": "movie-hunt",
"version": "0.1.0",
"private": true,
"dependencies": {
"#types/jest": "^26.0.24",
"#types/node": "^12.20.20",
"#types/react": "^17.0.19",
"#types/react-dom": "^17.0.9",
"#types/react-router": "^5.1.16",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-router-dom": "^5.2.0",
"react-scripts": "4.0.3",
"typescript": "^4.3.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"
]
},
"devDependencies": {
"#testing-library/jest-dom": "^5.14.1",
"#testing-library/react": "^11.2.7",
"#testing-library/user-event": "^12.8.3",
"#types/react-router-dom": "^5.1.8",
"#types/webpack-env": "^1.16.2",
"webpack-env": "^0.8.0"
}
}
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 !