Testing React: Target Container is not a DOM element

I'm attempting to test a React component with Jest/Enzyme while using Webpack. I have a very simple test @ import React from 'react'; import { shallow } from 'enzyme'; import App from...

Cannot run npm run build or npm start

Whenever I try building my web-pack file or starting web-pack dev server I get an error. It was working, but I was messing around with eslint and broke something. This is the error package when...

Webpack HMR timeouts on a manifest request

I want to use Webpack HMR with my React app. My webpack config looks like this: var path = require('path'); var ExtractTextPlugin = require('extract-text-webpack-plugin'); var StyleLintPlugin =...

How to remove ESlint error no-unresolved from importing 'react'

no-unresolved https://github.com/benmosher/eslint-plugin-import/blob/master/docs/rules/no-unresolved.md After installing eslint-import-resolver-webpack My .eslintrc config { "extends":...

Module not found: Error: Can't resolve 'sass-loader'

New to webpack. Trying to get sass-loader to play nice with my react project, have followed tutorials. Config seems correct, but result is always "Can't resolve 'sass-loader'". I suspect this is...

Material UI after updating throws TypeError: Cannot read property 'muiName' of undefined

I updated "material-ui": "^1.0.0-beta.38" to "@material-ui/core": "^1.3.0". I've changed imports, run npm install, removed node_modules even package-lock.json but I still receive the vague error...

Expected argument to be of type `array` but received type `string` - image-webpack-loader

I'm using image-webpack-loader but I got this error message: I import my images like this: import icon10 from '../../assets/img/icon10.png'; ERROR in ./app/assets/img/icon10.png Module build...

create-react-app + npm start - 'react-scripts' is not recognized as an internal or external command

Similar questions that I have tried following "npm-run-all" is not recognized as an internal or external command "'react-scripts' is not recognized as an internal or external command" I am trying...

MIME type ('text/html') is not a supported stylesheet MIME type

I have tried almost every solution for the problem which includes. giving type for <link rel="stylesheet" href="./style.css" /> use of app.use(express.static('public')) and many more but it seems...

Cannot fix "Unexpected token name «i», expected punc «;»" from UglifyJs

I have created a react app with a custom next server server.js: const { createServer } = require('http'); const next = require('next'); const app = next({ dev: process.env.NODE_ENV !==...

How to resolve "Cannot use import statement outside a module" in jest

I have a React application (not using Create React App) built using TypeScript, Jest, Webpack, and Babel. When trying to run "yarn jest", I get the following error: I have tried removing all...

Why webpack doesn't tree-shake the lodash when using "import * as _"?

I am learning about tree-shaking with a webpack 4/React application that uses Lodash. At first, my Lodash usage looked like this: import * as _ from "lodash"; _.random(... I soon learned, via the...

React - how to copy an image to clipboard?

im working on react web app and one of the feature needs to be implemented is to copy an image when clicked, so the user could paste it in: paint, word, etc... i tried several approaches, first...

"serve -s build" returns "serve: command not found"

I cloned a react project, which was probably developed under pure Windows, into WSL of my windows. It seems that, to launch a react app properly in IE and Edge, we need to build the project and...

Plotly/Dash title of y-axes are not shown

I want to create a dashboard with Plotly/Dash. If I just plot my figure with figDashboard.show()everything is fine. But creating the Dashboard with external_stylesheets =...

Forced to run npm install before yarn?

Strange one today, wondering if you can help. I recently reformatted my work laptop, and reinstalled all my tooling. Strangely, I'm finding I have to run npm install in full, before I can run yarn...

Create React App: ESLint config is not working with Typescript

I have created a react app using CRA (typescript template) and TypeScript is not following rules written in ESLint config. This is quite weird for me because I use this config in every react...

Nextjs - getting cookies value on _app init

I need to get the cookies value on the first render. I get those in _app.tsx. Everything looks fine (render correctly the html) but I get the server/client mismatch warning because at the first...

React Module parse failed: Unexpected token (1:48)

Can someone help me? I just create react app then I start it immediately. Then I got an error something like this. I don't know much about webpack. CMD ./src/index.js 1:48 Module parse failed:...

npx create-react-app is not working instead it throws error

I have been for some times now trying to use the command npx create-react-app but I keep getting a error in this way. I am working on a windows 10, npm version - 7.6.3 and node -12.18.2 npm WARN...

React Native 0.64 Command PhaseScriptExecution failed with a nonzero exit code

I'm installing a new project with a bunch of modules with React Native 0.64. I can do a pod install without troubles, but when I want to make my app running (with react-native run-ios or with...

create-react-app + gatsby packages in monorepo won't both run

I'm trying to create a monorepo with these packages: a web app created using create-react-app a gatsby site a library of components etc. that the web app and gatsby app will share (which is my...

Cannot read property 'up' of undefined, material ui, theme.breakpoints

i'm struggling with the export of makeStyles. below is my code and configuration import SearchField from "../SearchField"; import { TextField, Select, useMediaQuery, Grid, Button, Box, Fade }...

IE11 browser: getting SCRIPT1002 Syntax Error in React App

Been trying to make my React app work with IE11 with not luck so far. Getting the error: Basically this error points to arrow function during bundle I already tried adding react-app-polyfill in...

How to solve UnicodeDecodeError: 'utf-8' codec can't decode byte 0xff in position 0: invalid start byte

I'm trying to use Black to format my Django code. It works fine in most directories. However, I get the Unicode decode error UnicodeDecodeError: 'utf-8' codec can't decode byte 0xff in position 0:...

Invalid testPattern --config=jest.config.js with react-scripts with Mono Repo

I am trying to set a custom jest.config to react-scripts via: "test": "react-scripts test -- --config=jest.config.js", I feel it is important to mention that I have a mono repo. However this has...

React 17 and webpack 5 not working in IE11

I have looked into everything I could about the migration to react 17 and webpack 5. This for an application that is also running on IE11. And after all the changes (as you will see in the code) ,...

SyntaxError: Unexpected token export while running tests in Jest with components having amcharts4

Geeting error: Unexpected token export while running tests in Jest with components having amcharts4 export { System, system } from "./.internal/core/System"; ^^^^^^ SyntaxError:...

How to configure Storybook to run from a directory other than the project root

I'm trying to configure Storybook to run from a directory that is not the root of the project and I'm having a little trouble. I've setup a mono-rep using...

How to add Autocomplete, Syntax Highlighting using Antlr4 grammar file functionality to Monaco Editor in my React application?

I am using the Monaco Editor in a react app in the following way: My monaco-editor.jsx looks like - import MonacoEditor from 'react-monaco-editor'; return ( <Flex> <Flex.Box> ...