npm run build error with Create React App and TailwindCSS - reactjs

When I run npm run build I get this error, why? I don't know if it has to do with TailwindCSS...
Creating an optimized production build...
Failed to compile.
static/css/main.a923260e.css from Css Minimizer plugin
/home/user/Documentos/coding/projects/todofeito app/client/static/css/main.a923260e.css:1882:43: Unknown word [webpack://./src/index.css:3,0][static/css/main.a923260e.css:1882,43]
package.json
{
"name": "todofeito-app-new",
"version": "0.1.0",
"private": true,
"dependencies": {
"#react-hook/resize-observer": "^1.2.6",
"#tanstack/react-query": "^4.3.9",
"#testing-library/jest-dom": "^5.16.5",
"#testing-library/react": "^13.4.0",
"#testing-library/user-event": "^13.5.0",
"#types/jest": "^27.5.2",
"#types/react": "^18.0.20",
"#types/react-dom": "^18.0.6",
"date-fns": "^2.29.3",
"framer-motion": "^7.3.6",
"i18next": "^22.0.4",
"i18next-browser-languagedetector": "^7.0.1",
"lodash": "^4.17.21",
"nanoid": "^4.0.0",
"react": "^18.2.0",
"react-beautiful-dnd": "^13.1.1",
"react-device-detect": "^2.2.2",
"react-dom": "^18.2.0",
"react-expanding-textarea": "^2.3.6",
"react-i18next": "^12.0.0",
"react-list": "^0.8.17",
"react-portal": "^4.2.2",
"react-resizable": "^3.0.4",
"react-router-dom": "^6.4.1",
"react-scripts": "5.0.1",
"react-select": "^5.6.0",
"tailwindcss-scoped-groups": "^2.0.0",
"typescript": "^4.8.3",
"web-vitals": "^2.1.4",
"zustand": "^4.1.1"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"test2": "jest"
},
"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": {
"#babel/preset-typescript": "^7.18.6",
"#types/lodash": "^4.14.186",
"#types/node": "^18.11.4",
"#types/react-beautiful-dnd": "^13.1.2",
"#types/react-list": "^0.8.7",
"#types/react-portal": "^4.0.4",
"#types/react-resizable": "^3.0.3",
"#types/react-router-dom": "^5.3.3",
"autoprefixer": "^10.4.13",
"eslint-plugin-jest": "^27.1.3",
"jest": "^27.5.1",
"jest-environment-jsdom": "^29.2.2",
"postcss": "^8.4.19",
"postcss-normalize": "^10.0.1",
"tailwindcss": "^3.1.8"
}
}

yeah, I got the same error when I try to build, but I was able to run the project by yarn start without any style breaking or issues.

Related

No changes getting reflected on changing the path of components in styleguide.config.js (react-styleguidist#13.0.0)

I am using react-styleguidist library for the documentation of my React App.
This is my package.json
`
{
"name": "app",
"version": "0.1.0",
"private": true,
"dependencies": {
"#date-io/date-fns": "^1.3.13",
"#emoji-mart/data": "^1.0.5",
"#emoji-mart/react": "^1.0.1",
"#emotion/react": "^11.9.0",
"#emotion/styled": "^11.8.1",
"#material-ui/core": "^4.12.4",
"#mui/material": "^5.8.1",
"#mui/x-date-pickers": "^5.0.0",
"#mui/x-date-pickers-pro": "^5.0.0",
"#testing-library/jest-dom": "^5.16.4",
"#testing-library/react": "^13.3.0",
"#testing-library/user-event": "^13.5.0",
"axios": "^0.27.2",
"bootstrap": "^5.1.3",
"chart.js": "^3.8.2",
"classnames": "^2.3.1",
"dagre": "^0.8.5",
"date-fns": "^2.29.2",
"emoji-mart": "^5.2.1",
"hashmap": "^2.4.0",
"history": "^4.10.1",
"is-url": "^1.2.4",
"moment": "^2.29.4",
"react": "^18.2.0",
"react-awesome-popover": "^6.1.1",
"react-bootstrap": "^2.4.0",
"react-chartjs-2": "^4.3.1",
"react-contextmenu": "^2.14.0",
"react-copy-to-clipboard": "^5.1.0",
"react-dom": "^18.2.0",
"react-flow-renderer": "^10.3.12",
"react-icons": "^4.3.1",
"react-input-emoji": "^4.1.0",
"react-paginate": "^8.1.3",
"react-pro-sidebar": "^0.7.1",
"react-redux": "^8.0.4",
"react-router-dom": "^5.2.0",
"react-scripts": "5.0.1",
"react-secure-storage": "^1.0.21",
"react-select": "^5.4.0",
"react-toastify": "^9.0.8",
"react-viewer": "^3.2.2",
"redux": "^4.2.0",
"redux-devtools-extension": "^2.13.9",
"redux-thunk": "^2.4.1",
"rsuite": "^5.17.1",
"universal-cookie": "^4.0.4",
"video-react": "^0.15.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"
]
},
"devDependencies": {
"react-styleguidist": "^13.0.0"
}
}
`
This is my styleguide.config.js
`
module.exports = {
components: 'src/Pages/Dashboard/**/*.{js,jsx,ts,tsx}'
}
`
I want react-styleguidist to display all components in Pages as well as Components folder, but it always showing components from Components folder.
Would anyone help me with this?
Thanks in Advance...

Why is the build folder of my react app empty?

I am using create react app to make a react project.It is running without any problem on the localhost.However When I try to build it for production.The build takes like 5 minutes and then the build folder returned is completely empty.
I should say this now that the assets folder inside the app is like 50mb .So dont know if thats causing the issue.If anyone has any idea what might be the problem I will appreciate it.
package.json
{
"name": "frontend",
"version": "0.1.0",
"private": true,
"proxy": "http://localhost:3001",
"dependencies": {
"#amraneze/react-instagram-login": "^3.0.3",
"#emotion/react": "^11.9.0",
"#emotion/styled": "^11.8.1",
"#fortawesome/fontawesome-svg-core": "^6.1.1",
"#fortawesome/free-brands-svg-icons": "^6.1.1",
"#fortawesome/free-solid-svg-icons": "^6.1.1",
"#fortawesome/react-fontawesome": "^0.1.18",
"#mui/material": "^5.6.3",
"#reduxjs/toolkit": "^1.8.1",
"#testing-library/jest-dom": "^5.16.4",
"#testing-library/react": "^13.1.1",
"#testing-library/user-event": "^13.5.0",
"axios": "^0.27.2",
"jquery": "^3.6.0",
"puppeteer": "^14.1.0",
"react": "^18.1.0",
"react-dom": "^18.1.0",
"react-dropzone": "^14.2.1",
"react-fontawesome": "^1.7.1",
"react-google-login": "^5.2.2",
"react-redux": "^7.2.6",
"react-router-dom": "^6.3.0",
"react-scripts": "5.0.1",
"react-slick": "^0.29.0",
"redux": "^4.1.2",
"slick-carousel": "^1.8.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"
]
}
}

Module not found: Can't resolve 'color'

I have the following package.json for my React project.
{
"name": "frontend",
"version": "0.1.0",
"private": true,
"dependencies": {
"#fluentui/react": "^8.33.0",
"#handsontable/react": "^9.0.2",
"#material-ui/core": "^4.9.8",
"#microsoft/office-js-helpers": "^1.0.2",
"#testing-library/jest-dom": "^4.2.4",
"#testing-library/react": "^9.3.2",
"#testing-library/user-event": "^7.1.2",
"#types/react-stripe-elements": "^6.0.4",
"#uifabric/react-cards": "^0.109.49",
"axios": "^0.19.2",
"color": "^3.1.2",
"copy-to-clipboard": "^3.3.1",
"cross-storage": "^1.0.0",
"dva": "^2.4.1",
"dva-model-creator": "^0.4.3",
"formik": "^2.1.4",
"handsontable": "^9.0.2",
"highcharts": "^7.0.3",
"highcharts-react-official": "^3.0.0",
"lodash": "^4.17.15",
"moment": "^2.24.0",
"monaco-editor": "^0.31.1",
"monaco-languageclient": "^0.13.0",
"node-sass": "^4.14.1",
"office-ui-fabric-core": "^11.0.0",
"office-ui-fabric-react": "^7.105.4",
"query-string": "^6.11.1",
"react": "^16.13.1",
"react-app-polyfill": "^1.0.6",
"react-bootstrap": "^1.0.1",
"react-dom": "^16.13.1",
"react-meta-tags": "^1.0.1",
"react-monaco-editor": "^0.35.0",
"react-scripts": "3.4.1",
"react-stripe-elements": "^6.1.1",
"redux-devtools-extension": "^2.13.8",
"styled-components": "^5.0.1",
"typescript": "^3.8.3",
"yup": "^0.28.3"
},
"scripts": {
"start": "PORT=3000 react-app-rewired start",
"start:https": "HTTPS=true react-app-rewired start",
"build": "react-scripts --max_old_space_size=8096 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": {
"#types/color": "^3.0.1",
"#types/cross-storage": "^0.8.29",
"#types/jest": "^25.1.4",
"#types/lodash": "^4.14.149",
"#types/node": "^13.9.5",
"#types/office-js": "^1.0.92",
"#types/query-string": "^6.3.0",
"#types/react": "^16.9.27",
"#types/react-dom": "^16.9.5",
"#types/react-redux": "^7.1.7",
"#types/styled-components": "^5.0.1",
"#types/yup": "^0.26.33",
"babel-loader": "8.1.0",
"css-loader": "^3.5.3",
"react-app-rewired": "^2.1.8",
"style-loader": "^1.2.1"
}
}
sudo PORT=8000 HTTPS=true ./node_modules/.bin/react-scripts start returns me the following error, could anyone help?
Failed to compile.
./src/theme.tsx
Module not found: Can't resolve 'color' in '/Users/SoftTimur/Submission/20220114/10Studio/frontend/src'
If you are using color package, make sure that you are importing the package on theme.tsx

Module not found: Can't resolve "NPM LINKED MODULE" when using npm-link

I'm working on a TypeScript React application which heavily relies on a private NPM package. I can successfully link the NPM package, but after doing so I get the error <pre>/src/components/xxxx/xxxx/xxxxx/xxxxHoc.tsx Module not found: Can&apos;t resolve &apos;#CompanyName/Company-package&apos; in &apos;/home/liam/CompanyName/Company-product/src/components/xxxx/xxxx/xxxxx&apos;</pre>
riddle all over the application where the npm package is imported. NPM isntalling this package traditionally does works as intended but I need to be able to locally test the package.
Typically when I npm-link the package it gets removed from package.json, I'm not sure if thats how it's supposed to work? would love some insight if possible
I was successfully able to npm-link this package to a laravel applicaiton, but linking it to this particular react app does not work.
Main projects package.json file
{
"name": "Company-product",
"version": "0.1.0",
"private": true,
"dependencies": {
"#aws-sdk/client-dynamodb": "^3.37.0",
"#aws-sdk/util-dynamodb": "^3.37.0",
"#elastic/apm-rum": "^5.9.1",
"#elastic/apm-rum-react": "^1.3.1",
"#fingerprintjs/fingerprintjs": "^3.3.0",
"#fortawesome/fontawesome-svg-core": "^1.2.36",
"#fortawesome/free-regular-svg-icons": "^5.15.4",
"#fortawesome/free-solid-svg-icons": "^5.15.4",
"#fortawesome/react-fontawesome": "^0.1.16",
"#CompanyName/NPM-LINKED-MODULE": "^2.10.0",
"#testing-library/jest-dom": "^5.14.1",
"#testing-library/react": "^11.2.7",
"#testing-library/user-event": "^12.8.3",
"#types/fingerprintjs": "^0.5.28",
"#types/jest": "^26.0.24",
"#types/js-cookie": "^2.2.7",
"#types/node": "^12.20.33",
"#types/react": "^16.14.17",
"#types/react-csv": "^1.1.2",
"#types/react-dom": "^16.9.14",
"#types/react-router-dom": "^5.3.1",
"#types/react-select": "^3.0.28",
"aws-sdk": "^2.1012.0",
"bootstrap": "^4.6.0",
"deepmerge": "^4.2.2",
"formik": "^2.2.9",
"highcharts": "^8.2.2",
"highcharts-react-official": "^3.1.0",
"husky": "^4.3.8",
"ismobilejs": "^1.1.1",
"js-cookie": "^2.2.1",
"jwt-decode": "^3.1.2",
"luxon": "^1.28.0",
"mobx": "^6.3.5",
"mobx-react-lite": "^3.2.1",
"moment": "^2.29.1",
"moment-timezone": "^0.5.33",
"node-sass": "^4.14",
"nvm": "^0.0.4",
"react": "^17.0.2",
"react-bootstrap": "^1.6.4",
"react-csv": "^2.0.3",
"react-dom": "^17.0.2",
"react-map-gl": "^6.1.17",
"react-router-dom": "^5.3.0",
"react-scripts": "4.0.1",
"react-select": "^3.1.1",
"react-table": "^7.7.0",
"react-toastify": "^6.2.0",
"typescript": "^4.4.4",
"urijs": "^1.19.7",
"utility-types": "^3.10.0",
"web-vitals": "^0.2.4",
"worker-loader": "^3.0.8",
"yup": "^0.32.11"
},
"husky": {
"hooks": {
"pre-commit": "sh ./hooks/pre-commit"
}
},
"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/luxon": "^1.27.1",
"#types/react-map-gl": "^5.2.11",
"#types/react-table": "^7.7.7",
"#types/urijs": "^1.19.17"
}
The linked NPM package package.json file
{
"name": "#CompanyName/linked-module",
"version": "2.10.0",
"description": "Company Package",
"author": "Company",
"license": "MIT",
"repository": "CompanyName/company-package",
"main": "dist/bundle.js",
"types": "dist/index.d.ts",
"dependencies": {
"#types/jquery": "^3.3.33",
"#types/node": "^12.20.33",
"#types/urijs": "^1.19.6",
"axios": "^0.21.4",
"deepmerge": "^4.2.2",
"dotenv": "^8.2.0",
"highcharts": "^8.2.2",
"ismobilejs": "^1.1.1",
"moment": "^2.24.0",
"urijs": "^1.19.7"
},
"devDependencies": {
"ts-loader": "^6.2.1",
"typescript": "^3.8.3",
"webpack": "^4.42.0",
"webpack-cli": "^3.3.11"
}
}
Thanks for any awnsers

ERR_CONNECTION_REFUSED when I start nightwatch via the chromium driver

package.json
{
"name": "assignment10",
"version": "0.1.0",
"private": true,
"dependencies": {
"#date-io/date-fns": "^2.10.8",
"#material-ui/core": "^4.11.4",
"#material-ui/pickers": "^3.3.10",
"#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.0",
"#types/react-dom": "^17.0.0",
"babel-preset-mobx": "^2.0.0",
"chromedriver": "^90.0.0",
"enzyme": "^3.11.0",
"enzyme-adapter-react-16": "^1.15.6",
"enzyme-to-json": "^3.6.2",
"jest": "^26.6.0",
"mobx": "latest",
"mobx-react": "^7.1.0",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-intl": "^5.17.4",
"react-router-dom": "^5.2.0",
"react-scripts": "4.0.3",
"styled-components": "^5.3.0",
"typescript": "^4.1.2",
"web-vitals": "^1.0.1"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"eject": "react-scripts eject",
"lint": "eslint --ext .js,.jsx,.ts,.tsx src --color",
"test": "jest -u",
"browsertest": "nightwatch",
"coverage": "jest --coverage"
},
"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/enzyme": "^3.10.8",
"#types/enzyme-adapter-react-16": "^1.0.6",
"#types/react-router-dom": "^5.1.7",
"#types/styled-components": "^5.1.9",
"#typescript-eslint/eslint-plugin": "4.22.1",
"#typescript-eslint/parser": "4.22.1",
"babel-eslint": "10.1.0",
"eslint": "^7.25.0",
"eslint-config-airbnb": "18.2.1",
"eslint-config-airbnb-typescript": "12.3.1",
"eslint-config-prettier": "8.3.0",
"eslint-config-react-app": "6.0.0",
"eslint-import-resolver-typescript": "2.4.0",
"eslint-loader": "4.0.2",
"eslint-plugin-flowtype": "5.7.2",
"eslint-plugin-import": "2.22.1",
"eslint-plugin-jsx-a11y": "6.4.1",
"eslint-plugin-react": "^7.23.2",
"eslint-plugin-react-hooks": "4.2.0",
"nightwatch": "^1.6.4"
}
}
nightwatch.conf.js
module.exports = {
"src_folders" : ["./src/nightWatch"],
"webdriver" : {
"start_process": true,
"server_path": "node_modules/chromedriver/lib/chromedriver/chromedriver",
"port": 9515
},
"test_settings" : {
"default" : {
"desiredCapabilities": {
"browserName": "chrome"
}
}
}
}
when i run the script npm run browsertest i directly get a connection refused from google chrome. I have already deactivated sandboxing in the browser and disabled all proxies. I have also changed ports, but I just can't figure it out.
Does anyone have a solution? I have Debian 10 as OS
error
Hello I have found a solution. I had several instances running and therefore the npm start then selected a different port than I defined in the test. Have killed all processes on the port and restarted

Resources