Tailwind styles not applied after deployed on Netlify - reactjs

I'm trying to deploy my react-app to netlify. But the tailwindCSS doesn't seem working.
I have no error message or anything, so have no clue which way to go. Deployment was successful. I was checking all the answers here and other forums, but nothing solved my problem.
Tried different builds, and pushing different settings, but just got a plain HTML page without styles.
My package.json
{
"name": "benji-portfolio",
"version": "0.1.0",
"private": true,
"dependencies": {
"#craco/craco": "^6.2.0",
"#headlessui/react": "^1.4.0",
"#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-parallax-tilt": "^1.5.54",
"react-reveal": "^1.2.2",
"react-router-dom": "^5.2.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.6",
"postcss": "^7.0.36",
"tailwindcss": "npm:#tailwindcss/postcss7-compat#^2.2.7"
}
}
tailwind.config.js
module.exports = {
purge: [
'/src/components/About/About.js',
'/src/components/Contact/Contact.js',
'/src/components/Navbar/Navbar.js',
'/src/components/Projects/Projects.js',
'/src/components/Skills/Skills.js',
'/public/index.html'
],
darkMode: 'class',
theme: {
extend: {
backgroundImage: (theme) => ({
'code': "url('/src/components/About/coding-bg-dark.png')",
'lightcode': "url('/src/components/About/lightcode.png')",
})
},
},
variants: {
extend: {
backgroundImage: ['dark'],
},
},
plugins: [],
}
Netlify build settings:
Build command: craco build
Publish directory: public/
full github repo HERE

So after trying all day long. Somehow I made it up and running. I made multiple changes on netlify in the build process, and also changed craco.config.js and tailwind.config.js, until I successed and deployed.
What worked for me, and hopefully some of you will may find it useful is the tailwind.config.js
I changed the module.exports.purge to:
module.exports = {
purge: [
"./src/components/**/*.{js,jsx}",
"./public/index.html",
],
...
}
and on the Netlify build settings:
Publish Directory: build

Related

Module not found Error when uploading code to server (React Js, Tailwind CSS, render.com)

When I run my program in local host, I get no errors, and it works perfectly. As soon as I uploaded to render.com server following adding Tailwind css to my project, It fails to build because
Module not found: Error: Can't resolve '../components/Navbar.js' in '/opt/render/project/src/src/pages'
I have checked my import statements and they all seem to be correct. I have also tried checking everything related to Tailwind that I added, and they all make sense. I have a suspicion the problem may be with the tailwind config file because maybe it is ignoring my component on the build?
tailwind.config.js
/** #type {import('tailwindcss').Config} */
module.exports = {
content: [
"./src/**/*.{js,jsx,ts,tsx}",
],
theme: {
extend: {},
},
plugins: [],
resolve: {
extensions: ['.js', '.jsx', '.ts', '.tsx'],
},
}
Here is a page that imports Navbar (maybe the issue?)
import Navbar from "../components/Navbar.js";
function Home() {
return (
<div className="App">
<Navbar/>
</div>
);
}
I have tried all the other stack overflow similar questions but none of them worked, I have tried changing my imports to .js, checking my imports for invisible spaces, upper and lower case, I have also tried changing my tailwind css file.
this is my package.json file
{
"name": "ratemyjudge.com",
"version": "0.1.0",
"private": false,
"dependencies": {
"#emotion/react": "^11.10.5",
"#emotion/styled": "^11.10.5",
"#material-ui/core": "^4.12.4",
"#material-ui/icons": "^4.11.3",
"#mui/joy": "^5.0.0-alpha.63",
"#testing-library/jest-dom": "^5.16.5",
"#testing-library/react": "^13.4.0",
"#testing-library/user-event": "^13.5.0",
"firebase": "^9.15.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-icons": "^4.2.0",
"react-rangeslider": "^2.2.0",
"react-router-dom": "^6.7.0",
"react-scripts": "5.0.1",
"react-toastify": "^9.1.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"
]
},
"devDependencies": {
"gh-pages": "^5.0.0",
"tailwindcss": "^3.2.6"
}
}
This is my entire repo: https://github.com/shreybirmiwal/ratemyjudge
Thank you so much for your help
This is a pretty weird issue that I have encountered previously in some of my projects!
I believe you renamed your "components" folder to "Components" or vice versa. Git has trouble recognising this rename and does not track it well!
I'd suggest you manually rename the imports and try!

REACT/create-react-app: Module not found crypto / Uncaught ReferenceError: process is not defined

I have seen a couple related questions on this topic but nothing has quite worked!
I am working on a react app and had a bunch of module not found errors once i hit npm start. A few of the not found modules were 'util', 'buffer', 'stream', and 'crypto'. I was able to resolve all but crpyto by npm installing the names here.
For crypto, I'm not sure what I'm using that depends on it, but it is giving me big problems. To solve this, I installed crpyto-browserify and added "browser":{"crypto":false} to my package.json of my 'jwa' module in node modules (where it said i was having problems).
Once I did that, I get a reference error that "process is not found". I've never had this issue before. Including my package.json below, any tips??
To start the react app, I used npx create-react-app appName
Oh, one more note I also created a webpack.config.js file
{
"name": "app",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^5.16.2",
"#testing-library/react": "^12.1.4",
"#testing-library/user-event": "^13.5.0",
"axios": "^0.26.1",
"bootstrap": "^5.1.3",
"jsonwebtoken": "^8.5.1",
"react": "^17.0.2",
"react-app-polyfill": "^3.0.0",
"react-dom": "^17.0.2",
"react-router-dom": "^6.2.2",
"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"
]
}
}
Oh, one more note I also created a webpack.config.js file that looks like this:
const webpack = require('webpack')
module.exports = {
resolve: {
fallback: {
assert: require.resolve('assert'),
buffer: require.resolve('buffer'),
console: require.resolve('console-browserify'),
constants: require.resolve('constants-browserify'),
crypto: require.resolve('crypto-browserify'),
domain: require.resolve('domain-browser'),
events: require.resolve('events'),
http: require.resolve('stream-http'),
https: require.resolve('https-browserify'),
os: require.resolve('os-browserify/browser'),
path: require.resolve('path-browserify'),
punycode: require.resolve('punycode'),
querystring: require.resolve('querystring-es3'),
stream: require.resolve('stream-browserify'),
string_decoder: require.resolve('string_decoder'),
sys: require.resolve('util'),
timers: require.resolve('timers-browserify'),
tty: require.resolve('tty-browserify'),
url: require.resolve('url'),
util: require.resolve('util'),
},
},
plugins: [
new webpack.ProvidePlugin({
process: 'process/browser',
}),
]
};

TailwindCSS classes arent showing up (React) when deployed via Netlify, where did I go wrong?

Hi Ive been racking my brain on what Ive been doing wrong. Locally the formatting is correct, but when I push it to Netlify, Tailwindcss decides to not work. Am I purging wrong? I have a tailwind css file in my dist and src folders.
package.json
{
"name": "bgg_version_3",
"keywords": [
"design, graphic design, art, illustration, web design, Virginia, Massachusetts, Boston, Newport News"
],
"homepage": ".",
"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",
"bootstrap": "^5.0.2",
"framer-motion": "^4.1.17",
"isomorphic-unfetch": "^3.1.0",
"next": "^11.0.1",
"react": "^17.0.2",
"react-bootstrap": "^2.0.0-beta.4",
"react-dom": "^17.0.2",
"react-helmet": "^6.1.0",
"react-router": "^5.2.0",
"react-router-dom": "^5.2.0",
"react-scripts": "^4.0.3",
"react-tsparticles": "^1.33.2",
"react-visibility-sensor": "^5.1.1",
"web-vitals": "^1.1.2"
},
"scripts": {
"build:tailwind": "tailwindcss build -i src/tailwind.css -o src/tailwind.output.css",
"prestart": "npm run build:tailwind",
"prebuild": "npm run build:tailwind",
"start": "craco start",
"build": "react-scripts 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": {
"sass": "^1.36.0"
}
}
tailwind.config.js
module.exports = {
purge: ["./src/*.{js,jsx,ts,tsx}", './src/*.{scss,css}',"./src/components/*.{js,jsx,ts,tsx}","./src/components/*.{scss,css}"],
darkMode: false, // or 'media' or 'class'
theme: {
extend: {},
},
variants: {
extend: {},
},
plugins: [],
}
Any clue as to why it wont seem to work when deployed or what I did wrong?
Normally the devDependecies in your package.json would look somthing like this when using tailwindcss:
"devDependencies": {
"autoprefixer": "^10.3.1",
"postcss": "^8.3.6",
"tailwindcss": "^2.2.7"
}
So I would suggest you redo the process of installing tailwindcss and remember the --save flag on every install

Eslint import/no-extraneous-dependencies error on path

I am building a React app with Eslint setup.
In my app, I am using GraphQL #apollo/client dependency.
When I tried to do import { setContext } from '#apollo/client/link/context'
I got an eslint error of
'#apollo/client/link/context' should be listed in the project's dependencies. Run 'npm i -S #apollo/client/link/context' to add it import/no-extraneous-dependencies
I do have '#apollo/client' dependency in my package.json.
And import from '#apollo/client/link/context' is the proper way to get 'setContext' according to Apollo documentation.
Seems like import/no-extreaneous-dependencies is not recognize the nested path from '#apollo/client'.
When I set "import/no-extraneous-dependencies": 0 in my .eslintrc.js rules, it will work fine.
But for a proper solution, instead of just turning off the eslint checking, I am assuming that I probably need to set something up with .eslintrc.js rules.
What other set ups should I write for my rules in my .eslintrc.js in this case for properly solving the problem?
my package.json:
{
"name": "my-app",
"version": "0.1.0",
"private": true,
"dependencies": {
"#apollo/client": "^3.3.19",
"#auth0/auth0-react": "^1.4.0",
"#testing-library/jest-dom": "^5.11.4",
"#testing-library/react": "^11.1.0",
"#testing-library/user-event": "^12.1.10",
"eslint": "^7.26.0",
"eslint-config-airbnb": "^18.2.1",
"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",
"graphql": "^15.5.0",
"react": "^17.0.2",
"react-big-calendar": "^0.33.3",
"react-dom": "^17.0.2",
"react-router-dom": "^5.2.0",
"react-scripts": "4.0.3",
"web-vitals": "^1.0.1"
},
"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": {}
}
and my .eslintrc.js file:
module.exports = {
env: {
browser: true,
es2021: true,
},
extends: [
'plugin:react/recommended',
'airbnb',
],
parserOptions: {
ecmaFeatures: {
jsx: true,
},
ecmaVersion: 12,
sourceType: 'module',
},
plugins: [
'react',
],
rules: {
'no-console': 1,
'react/prop-types': 0,
'no-underscore-dangle': ['error', { allow: ['__raw'] }],
},
overrides: [
{
files: ['**/*.test.jsx'],
env: { jest: true },
},
],
};
I had the same issue with rxjs/operators as demonstrated in question 67587146. A solution is to add the path to the core modules setting in .eslintrc.js. This solution isn't great, but it's better than disabling the rule.
settings: {
'import/core-modules': ['#apollo/client/link/context']
}
A few others are finding this issue in a recent version of eslint-plugin-import, but there was a fix in v2.23.4, to the package resolution algorithm.
npm update eslint-plugin-import
Read more about the issue

React img shows [object Module] instead of the image

Recently I pushed my project to Gitlab so I could also work on it on my laptop to practise my React.
After I pulled and npm installed everything (had to use npm audit fix --force which was weird) I tried to run it. Everything looked fine but the images wont show up and when I inspect it, it says [object Module]. Now I have googled it and most answers say something about changing the options to
options: {
esModule: false,
},
in webpack
The thing is, I think I never worked with webpack and on my desktop it works fine (I don't have a webpack.config.js).
This is my package.json which is the same as on my laptop:
{
"name": "test",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^4.2.4",
"#testing-library/react": "^9.3.2",
"#testing-library/user-event": "^7.1.2",
"axios": "^0.19.2",
"bootstrap": "^4.5.0",
"cors": "^2.8.5",
"node-sass": "^4.14.1",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-scripts": "3.4.1",
"react-select": "^3.1.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"
]
},
"devDependencies": {}
}
I used the 'default' property to access the string value (path):
<img
src={require("../../assets/images/svg/shopping-cart.svg").default}
alt="Shopping cart"/>
This solution I took from Carlos Avila's comment to a vuejs GitHub issue.
To Change this Go to node_modules->react-scripts->config->webpack.config.js
{
test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
loader: require.resolve('url-loader'),
options: {
limit: imageInlineSizeLimit,
name: 'static/media/[name].[hash:8].[ext]',
esModule: false
},
}
Find the above line and add esModule: false in options.
Afterwards the image will display.

Resources