All Questions
27,503
questions
2225
votes
67
answers
2.8m
views
Error message "error:0308010C:digital envelope routines::unsupported"
I created the default IntelliJ IDEA React project and got this:
Error: error:0308010C:digital envelope routines::unsupported
at new Hash (node:internal/crypto/hash:67:19)
at Object.createHash (...
- 22.9k
834
votes
54
answers
1.1m
views
Uncaught Error: Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function but got: object
I am getting this error:
Uncaught Error: Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.
...
- 9,721
562
votes
23
answers
570k
views
React - changing an uncontrolled input
I have a simple react component with the form which I believe to have one controlled input:
import React from 'react';
export default class MyForm extends React.Component {
constructor(props) {
...
- 12.4k
506
votes
9
answers
577k
views
What does npm install --legacy-peer-deps do exactly? When is it recommended / What's a potential use case?
Just ran into this error:
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
npm ERR! ...
- 6,650
353
votes
40
answers
1.7m
views
"SyntaxError: Unexpected token < in JSON at position 0"
In a React app component which handles Facebook-like content feeds, I am running into an error:
Feed.js:94 undefined "parsererror" "SyntaxError: Unexpected token < in JSON at position 0
I ran ...
- 5,216
332
votes
15
answers
233k
views
Is it safe to store a JWT in localStorage with ReactJS?
I'm currently building a single page application using ReactJS.
I read that one of the reasons for not using localStorage is because of XSS vulnerabilities.
Since React escapes all user input, would ...
user6127082
326
votes
9
answers
169k
views
Dynamic tag name in React JSX
I am trying to write a React component for HTML heading tags (h1, h2, h3, etc.), where the heading level is specified via a prop.
I tried to do it like this:
<h{this.props.level}>Hello</h{...
- 4,762
305
votes
33
answers
1.1m
views
'react-scripts' is not recognized as an internal or external command
I've got a maven project, within which is JavaScript project cloned as a git sub-module. So the directory structure looks like mavenapp/src/main/javascript/[npm project files]
Inside my package.json, ...
- 4,143
275
votes
19
answers
395k
views
npm ERR! code UNABLE_TO_GET_ISSUER_CERT_LOCALLY
I am trying all possible ways to create a React application. I have tried Maven, and now I am trying create-react-app from Facebook Incubators.
When I tried to run the command create-react-app my-app ...
- 7,753
239
votes
14
answers
381k
views
How to make the webpack dev server run on port 80 and on 0.0.0.0 to make it publicly accessible?
I am new to the whole nodejs/reactjs world so apologies if my question sounds silly. I am currently playing around with reactabular.js.
Whenever I do a npm start it always runs on localhost:8080.
How ...
- 7,219
230
votes
8
answers
110k
views
ChunkLoadError: Loading chunk node_modules_next_dist_client_dev_noop_js failed
I've been following the basics tutorial on the Next.js website and when I got to the Global Styles step, I started getting the following runtime error:
ChunkLoadError: Loading chunk ...
- 2,303
198
votes
13
answers
164k
views
ESLint - Error: Must use import to load ES Module
I am currently setting up a boilerplate with React, TypeScript, styled components, Webpack, etc., and I am getting an error when trying to run ESLint:
Error: Must use import to load ES Module
Here ...
- 2,115
193
votes
9
answers
169k
views
Matched leaf route at location "/" does not have an element
Matched leaf route at location "/" does not have an element. This means it will render an with a null value by default resulting in an "empty" page
//App.js File
import { ...
- 1,931
192
votes
12
answers
230k
views
Yarn - How do I update each dependency in package.json to the latest version?
I have a react app with deprecated dependencies. To make it work, I have to update the dependencies to their newer (but stable) versions.
As per this stakoverflow thread, to update dependencies in ...
- 12.9k
186
votes
15
answers
309k
views
Jest gives `Cannot find module` when importing components with absolute paths
Receiving the following error when running Jest
Cannot find module 'src/views/app' from 'index.jsx'
at Resolver.resolveModule (node_modules/jest-resolve/build/index.js:179:17)
at Object.<...
- 9,600
171
votes
15
answers
206k
views
setState doesn't update the state immediately [duplicate]
I would like to ask why my state is not changing when I do an onClick event. I've search a while ago that I need to bind the onClick function in constructor but still the state is not updating.
Here's ...
- 10.3k
169
votes
7
answers
141k
views
Get version number from package.json in React Redux (create-react-app)
OP EDIT: If anyone else comes across this: the app was created using create-react-app, which limits importing to within the src folder. However if you upgrade react-scripts to v1.0.11 it does let you ...
- 4,473
165
votes
4
answers
104k
views
ReactJS server-side rendering vs client-side rendering
I just have began to study ReactJS and found that it gives you 2 ways to render pages: server-side and client-side. But, I can't understand how to use it together. Is it 2 separate ways to build the ...
- 3,360
162
votes
13
answers
173k
views
Node.js Sass version 7.0.0 is incompatible with ^4.0.0 || ^5.0.0 || ^6.0.0
I used Node.js v16.13.1 and created a React application. I tried to use Sass, but when I tried to run it, I got this error:
Node Sass version 7.0.0 is incompatible with ^4.0.0 || ^5.0.0 || ^6.0.0
- 1,819
142
votes
7
answers
102k
views
How to use React to build a multi-page app?
I am building an app with NodeJS and would like to use React for some of the interactive components across the application. I do not want to make it single page app.
How do I break up or bundle my ...
- 1,860
137
votes
10
answers
231k
views
"React.Children.only expected to receive a single React element child" error when putting <Image> and <TouchableHighlight> in a <View>
I have the following render method in my React Native code:
render() {
const {height, width} = Dimensions.get('window');
return (
<View style={styles.container}>
<Image
...
- 7,699
134
votes
7
answers
134k
views
Typescript and Jest: Avoiding type errors on mocked functions
When wanting to mock external modules with Jest, we can use the jest.mock() method to auto-mock functions on a module.
We can then manipulate and interrogate the mocked functions on our mocked ...
- 11.3k
134
votes
20
answers
198k
views
NPM - Failed to replace env in config: ${NPM_TOKEN}
I am trying to build a react app, but when I execute the command npm -i it gives me the following error:
Error: Failed to replace env in config: ${NPM_TOKEN}
at /usr/local/lib/node_modules/npm/...
- 1,736
134
votes
20
answers
252k
views
Module not found: Can't resolve 'fs' in Next.js application
Unable to identify what's happening in my next.js app. As fs is a default file system module of nodejs. It is giving the error of module not found.
- 3,144
128
votes
12
answers
461k
views
Failed to compile. Module not found: Can't resolve 'react-router-dom'
After npm start, the browser gives the error:
Failed to compile ./src/components/App/App.js Module not found: Can't resolve 'react-router-dom'.
React-router-dom has been added to the dependencies in ...
- 1,335
124
votes
17
answers
195k
views
Add Favicon with React and Webpack
I am attempting to add a favicon to a React-based website that I made using webpack. It has been a total nightmare to add a favicon and I have tried many solutions to no avail. The latest solution ...
- 1,399
123
votes
27
answers
192k
views
babel-preset-react-app, is importing the "@babel/plugin-proposal-private-property-in-object" package without declaring it in its dependencies
My issue is that I've tried to create a new React project and after a lot of issues with vulnerabilities, I managed to solve some of them, one of the main instructions was adding this line:
"...
- 1,511
123
votes
7
answers
192k
views
Detect whether input element is focused within ReactJS
How can I detect whether an input element such as the following is currently focused within a ReactJS render function?
<input type="text" style={searchBoxStyle} placeholder="Search"></input&...
122
votes
8
answers
237k
views
Webpack how to build production code and how to use it
I am very new to webpack, I found that in production build we can able to reduce the size of overall code.
Currently webpack builds around 8MB files and main.js around 5MB.
How to reduce the size of ...
- 3,511
122
votes
8
answers
68k
views
React Hooks - using useState vs just variables
React Hooks give us useState option, and I always see Hooks vs Class-State comparisons. But what about Hooks and some regular variables?
For example,
function Foo() {
let a = 0;
a = 1;
...
- 1,341
119
votes
6
answers
16k
views
Strategies for server-side rendering of asynchronously initialized React.js components
One of the biggest advantages of React.js is supposed to be server-side rendering. The problem is that the key function React.renderComponentToString() is synchronous which makes it impossible to load ...
- 7,148
114
votes
14
answers
189k
views
Cannot find module '@babel/core'
I am following along with this webpack4/react tutorial:
https://www.youtube.com/watch?v=deyxI-6C2u4
I have followed it exactly up until the part where he runs npm start. The difference is, his app ...
- 1,207
111
votes
6
answers
146k
views
How do you import a javascript package from a cdn/script tag in React?
I'd like to import this javascript package in React
<script src="https://cdn.dwolla.com/1/dwolla.js"></script>
However, there is no NPM package, so I can't import it as such:
...
- 2,547
110
votes
12
answers
221k
views
Next.js: document is not defined
I am trying to create a payment form where people can pay but I keep getting this error.
document is not defined
I'm using Next.js. Please see my code below:
import React from "react";
...
- 8,227
109
votes
4
answers
51k
views
Webpack-dev-server serves a directory list instead of the app page
I can only see the actual app under /public.
The configs in webpack.config.js are below:
var path = require('path');
var webpack = require('webpack');
module.exports = {
entry: [
'webpack-...
- 1,372
107
votes
19
answers
437k
views
I am getting error in console "You need to enable JavaScript to run this app." reactjs
I am new to reactjs, I am working on a app. It was running fine, but when I've run npm run build command, I am getting error "You need to enable JavaScript to run this app.". I have made ...
- 1,740
106
votes
13
answers
632k
views
How do I add validation to the form in my React component?
My Contact page form is as follows,
<form name="contactform" onSubmit={this.contactSubmit.bind(this)}>
<div className="col-md-6">
<fieldset>
<input ref="name" type="...
- 3,129
101
votes
8
answers
133k
views
failed to load response data request content was evicted from inspector cache
i am trying to get file from server that has size of(15mb) through Axios Request. showing status "200", but not sending file previewData(base64) and showing this error "failed to load ...
- 1,145
100
votes
3
answers
97k
views
How to organise file structure of backend and frontend in MERN
I have backend based on express + mongoose. File structure is:
- /models
-- item.js
- /node.modules
-- ...
- server.js
- package-lock.json
- package.json
And regular create-react-app based folder ...
- 1,426
99
votes
10
answers
127k
views
How to disable source maps for React JS Application
My react folder structure is as below
I've not used the create-react-app version. I tried using GENERATE_SOURCEMAP=false. But It didn't work.
Where can I find the .map files. How can I delete those ...
- 1,785
96
votes
11
answers
165k
views
How to add custom html attributes in JSX
There are different reasons behind it, but I wonder how to simply add custom attributes to an element in JSX?
- 4,561
90
votes
4
answers
191k
views
How to display binary data as image in React?
I am receiving a bindata from the Nodejs server and now from that I need to display an image.
How can I achieve this? Is there any method to convert bindata to JPEG or any other format? Or is it ...
- 1,329
89
votes
16
answers
60k
views
React + Material-UI - Warning: Prop className did not match
I'm having difficulty with differences between client-side and server-side rendering of styles in Material-UI components due to classNames being assigned differently.
The classNames are assigned ...
- 993
82
votes
21
answers
160k
views
Invalid options object. Dev Server has been initialized using an options object that does not match the API schema
I have been stuck on this error in my project when I add "proxy": "http://localhost:6000"
in my package.json.
This is the error response after yarn start.
Invalid options object. ...
- 988
80
votes
19
answers
520k
views
Access to XMLHttpRequest at '...' from origin 'localhost:3000' has been blocked by CORS policy
Edit
A little late, but I remember that I ended up solving this issue by setting credentials: true in my cors config on my backend.
By complete accident, I noticed that if I set credentials: false in ...
- 6,076
79
votes
5
answers
216k
views
Getting error 'digital envelope routines', reason: 'unsupported', code: 'ERR_OSSL_EVP_UNSUPPORTED' [duplicate]
I got this error when learning Next.js, using npx create-next-app command according to site documentation here https://nextjs.org/docs/api-reference/create-next-app. Everything works until I start the ...
- 2,489
78
votes
19
answers
419k
views
'Access-Control-Allow-Origin' issue when API call made from React (Isomorphic app)
I'm running into an issue with my isomorphic JavaScript app using React and Express.
I am trying to make an HTTP request with axios.get when my component mounts
componentDidMount() {
const url = ...
- 1,045
76
votes
11
answers
158k
views
Module not found: Error: Can't resolve 'react-dom/client'
I am using react with the following packages:
{
"name": "demo",
"version": "0.1.0",
"private": true,
"dependencies": {
"@...
- 5,017
75
votes
19
answers
146k
views
How to fix "FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory" error
I'm trying to deploy a reactjs application to heroku. While compiling assets, the build fails and produces this error:
-----> Ruby app detected
-----> Compiling Ruby/Rails
-----> Using Ruby ...
- 783
69
votes
4
answers
81k
views
ES2015 module syntax is preferred over custom TypeScript modules and namespaces @typescript-eslint/no-namespace
I'm receiving the following error running npm start:
ES2015 module syntax is preferred over custom TypeScript modules and namespaces @typescript-eslint/no-namespace
namespace InternalThings {......
