React img shows [object Module] instead of the image - reactjs

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.

Related

"You need to enable javascript to run this app". basic react app not running in browser

Having some trouble debugging my react app. This app was created using create-react-app, so I should be able to run 'npm start' and see the app run in the localhost window in my browser, but instead I see nothing, and in the Elements tab of chrome devtools shows a tag saying "You need to enable javascript to run this app".
Not sure what is going on here. I had this app running perfectly fine yesterday, and I didn't change anything to the package.json.
Here's what my package.json looks like:
`
`{
"name": "app",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^5.16.5",
"#testing-library/react": "^13.4.0",
"#testing-library/user-event": "^13.5.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-router-dom": "^6.4.3",
"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"
]
}
}`
`
Can anybody help me with this? I tried adding a common solution, to add "proxy": "localhost:5000", but that didn't solve the problem.
I was expecting the app to successfully start in the browser.

How to disable eslint errors showing in the browser

When I run my create react app application using npm start, the eslint errors are shown in the browser on top of my site. I expect to see these warnings and errors in the terminal but not in the actual website, how can I remove this?
package.json
{
"name": "frontend",
"version": "0.1.0",
"private": true,
"dependencies": {
"react": "^16.11.0",
"react-dom": "^16.11.0",
"react-router-dom": "^5.1.2",
"react-scripts": "^5.0.0",
"react-transition-group": "^4.3.0"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"lint": "eslint ."
},
"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": {
"eslint": "^8.12.0",
"eslint-config-airbnb": "^19.0.4",
"eslint-plugin-import": "^2.25.4",
"eslint-plugin-jsx-a11y": "^6.5.1",
"eslint-plugin-react": "^7.29.4",
"eslint-plugin-react-hooks": "^4.4.0"
}
}
You can disable errors in browser by adding the environment variable ESLINT_NO_DEV_ERRORS as it is mentioned here.
If you have .env file in your project, just add this line to it, and re-build the app:
ESLINT_NO_DEV_ERRORS=true
Inside eslint.rc you will have section for your env within module.exports
you can add false to the browser parameter, this will also fix this issue
env: {
browser: false,
es2021: true,
node: true,
},

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',
}),
]
};

Tailwind styles not applied after deployed on Netlify

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

create-react-app with Typescript : Support for the experimental syntax 'classProperties' isn't currently enabled

I created a react app with npx create-react-app my-app --template typescript and added the react component rn-sliding-up-panel. I know that rn stands for react native but the solution is pure js and works fine on the web.
Now I get Support for the experimental syntax 'classProperties' isn't currently enabled (35:20): Add #babel/plugin-proposal-class-properties (https://git.io/vb4SL) to the 'plugins' section of your Babel config to enable transformation.
Which is an awesome informative error message. Unfortunately I don't have an babel configuration since i want to do my whole transpiling with typescript.
I already tried to add the configuration to my package.json, but whitout any luck
{
"name": "slider-test",
"version": "0.1.0",
"private": true,
"babel": {
"presets": [
"#babel/preset-env",
"#babel/preset-react"
],
"plugins": [
"#babel/plugin-proposal-class-properties"
]
},
"dependencies": {
"#testing-library/jest-dom": "^4.2.4",
"#testing-library/react": "^9.4.0",
"#testing-library/user-event": "^7.2.1",
"#types/jest": "^24.0.24",
"#types/node": "^12.12.21",
"#types/react": "^16.9.16",
"#types/react-dom": "^16.9.4",
"react": "^16.12.0",
"react-dom": "^16.12.0",
"react-scripts": "3.3.0",
"rn-sliding-up-panel": "^2.4.0",
"typescript": "^3.7.3"
},
"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/plugin-proposal-class-properties": "^7.7.4"
}
}
How can I fix this?

Resources