create-react-app | Set up a modern web app by running one command

by facebook JavaScript Version: v5.0.1 License: MIT

X-Ray Key Features Code Snippets(5)Community Discussions(10)Vulnerabilities Install Support

kandi X-RAY | create-react-app Summary

create-react-app is a JavaScript library typically used in Institutions, Learning, Administration, Public Services, User Interface, Template Engine, React Native, React, Webpack, NPM applications. create-react-app has no bugs, it has no vulnerabilities, it has a Permissive License and it has medium support. You can install using 'npm i xy-react-scripts' or download it from GitHub, npm.

If you've previously installed create-react-app globally via npm install -g create-react-app, we recommend you uninstall the package using npm uninstall -g create-react-app or yarn global remove create-react-app to ensure that npx always uses the latest version. Then open to see your app. When you’re ready to deploy to production, create a minified bundle with npm run build.

Support

Quality

Security

License

Reuse

Support

create-react-app has a medium active ecosystem.

It has 99898 star(s) with 26376 fork(s). There are 1954 watchers for this library.

It had no major release in the last 12 months.

There are 1585 open issues and 6486 have been closed. On average issues are closed in 221 days. There are 433 open pull requests and 0 closed requests.

It has a neutral sentiment in the developer community.

The latest version of create-react-app is v5.0.1

Quality

create-react-app has 0 bugs and 0 code smells.

Security

create-react-app has no vulnerabilities reported, and its dependent libraries have no vulnerabilities reported.

create-react-app code analysis shows 0 unresolved vulnerabilities.

There are 0 security hotspots that need review.

License

create-react-app is licensed under the MIT License. This license is Permissive.

Permissive licenses have the least restrictions, and you can use them in most projects.

Reuse

create-react-app releases are available to install and integrate.

Deployable package is available in npm.

Installation instructions, examples and code snippets are available.

create-react-app saves you 106 person hours of effort in developing the same functionality from scratch.

It has 270 lines of code, 0 functions and 305 files.

It has low code complexity. Code complexity directly impacts maintainability of the code.

Top functions reviewed by kandi - BETA

kandi has reviewed create-react-app and discovered the below as its top functions. This is intended to give you an instant insight into create-react-app implemented functionality, and help decide if they suit your requirements.

Verify typescript configuration .
Initialize the commander module
Install React components package .
Compile a compiler .
Creates a new editor
Formats an error object into a message .
Page component .
Create an app .
Creates a named exported function .
Prepare the proxy server if it exists

Get all kandi verified functions for this library.

create-react-app Key Features

Set up a modern web app by running one command.

create-react-app Examples and Code Snippets

react ie fetch Unhandled promise rejection TypeError: Network request failed

Lines of Code : 14

License : Strong Copyleft (CC BY-SA 4.0)

Copy

npm install react-app-polyfill

//or

yarn add react-app-polyfill

// These must be the first lines in src/index.js
import 'react-app-polyfill/ie11';
import 'react-app-polyfill/stable';

// ...

React site items are not clickable and elements are overlapping in IE11

Lines of Code : 24

License : Strong Copyleft (CC BY-SA 4.0)

Copy

npm install react-app-polyfill

yarn add react-app-polyfill

import 'react-app-polyfill/ie11';
import 'react-app-polyfill/stable';

  "browse

unble to get property "includes" of undefined or null reference

Lines of Code : 7

License : Strong Copyleft (CC BY-SA 4.0)

Copy

npm install react-app-polyfill

yarn add react-app-polyfill

import 'react-app-polyfill/ie11';
import 'react-app-polyfill/stable';

React production build not working with IE 11

Lines of Code : 12

License : Strong Copyleft (CC BY-SA 4.0)

Copy

npm install react-app-polyfill

yarn add react-app-polyfill

// These must be the first lines in src/index.js
import 'react-app-polyfill/ie9';
import 'react-app-polyfill/stable';

SCRIPT438: Object doesn't support property or method 'setPrototypeOf'

Lines of Code : 6

License : Strong Copyleft (CC BY-SA 4.0)

Copy

npm install react-app-polyfill

import 'react-app-polyfill/ie9';
// or
import 'react-app-polyfill/ie11';

Community Discussions

Trending Discussions on create-react-app

Deprecation notice: ReactDOM.render is no longer supported in React 18

Error while creating new React app ("You are running `create-react-app` 4.0.3, which is behind the latest release (5.0.0)")

Failed to load plugin 'flowtype' declared in 'package.json » eslint-config-react-app': Cannot find module 'eslint/use-at-your-own-risk'

Getting the error "Nested CSS was detected, but CSS nesting has not been configured correctly" in React app?

i tried to Polyfill modules in webpack 5 but not working (Reactjs)

Create-React-App creates this that prevents me from clicking or editing directly the app unless I delete it in the elements browswer editor

Create-React-App with TypeScript failing to compile after importing Semantic UI

styled-components/macro isn't working with CRA

react-chartjs-2 with chartJs 3: Error "arc" is not a registered element

npx create-react-app prompting to globally uninstall non-existent create-react-app package?

QUESTION

Deprecation notice: ReactDOM.render is no longer supported in React 18

Asked 2022-Apr-05 at 08:50

I get this error every time I create a new React App and I don't know how to fix it:

Warning: ReactDOM.render is no longer supported in React 18. Use createRoot instead. Until you switch to the new API, your app will behave as if it's running React 17. Learn more: https://reactjs.org/link/switch-to-createroot

I created my react app using: npx create-react-app my-app

...

ANSWER

Answered 2022-Apr-05 at 08:44

In your file index.js, change to:

Source https://stackoverflow.com/questions/71668256

QUESTION

Error while creating new React app ("You are running `create-react-app` 4.0.3, which is behind the latest release (5.0.0)")

Asked 2022-Apr-04 at 11:58

I am getting this create React app error again and again even after doing the uninstall part.

npm uninstall -g create-react-app

up to date, audited 1 package in 570ms

found 0 vulnerabilities

npx create-react-app test-app

Need to install the following packages: create-react-app Ok to proceed? (y) y

You are running create-react-app 4.0.3, which is behind the latest release (5.0.0).

We no longer support global installation of Create React App.

Please remove any global installs with one of the following commands:

npm uninstall -g create-react-app

yarn global remove create-react-app

The latest instructions for creating a new app can be found here: https://create-react-app.dev/docs/getting-started/

...

ANSWER

Answered 2022-Jan-01 at 22:34

You will have to clear the npx cache to make it work.

You can locate the location of the folder where create-react-app is installed using npm ls -g create-react-app.

Also, to clear the cache, refer to this answer in How can I clear the central cache for `npx`?

Source https://stackoverflow.com/questions/70358474

QUESTION

Failed to load plugin 'flowtype' declared in 'package.json » eslint-config-react-app': Cannot find module 'eslint/use-at-your-own-risk'

Asked 2022-Mar-29 at 06:53

I created a new React project with create-react-app.

In the terminal npm start.

Instantly get this error

Failed to load plugin 'flowtype' declared in 'package.json » eslint-config-react-app': Cannot find module 'eslint/use-at-your-own-risk'

How do I fix this?

Not this project specifically, but how do I get create-react-app to create without errors?

...

ANSWER

Answered 2021-Dec-29 at 23:19

what's happening is that when you run npm start it's probably doing some checks with eslint, from what I remember create-react-app has some checks that break your build if you have eslint errors so makes sense that they're associated.

The error you're getting here is related to a node feature that eslint is using called subpath exports but it's support is hit or miss depending on how the library is consumed. This has been highlighted to cause issues when used with jest for example.

For the flowtype eslint plugin this is the exact line of code that's causing you issues.

You can also read about a similar issue reported regarding the typescript eslint plugin.

The solution and the reason I'm even able to understand what's causing this problem is that I made a fix to this yesterday in a clone of the eslint-plugin-flowtype (given that the original plugin had a lack of maintenance) here https://github.com/flow-typed/eslint-plugin-ft-flow/pull/23.

I'll raise an issue with create-react-app and see if they're willing to swap out the plugin with the new one which would have more maintenance and solve issues that you're experiencing.

Source https://stackoverflow.com/questions/70397587

QUESTION

Getting the error "Nested CSS was detected, but CSS nesting has not been configured correctly" in React app?

Asked 2022-Mar-23 at 09:04

I've been upgrading my CRA project to TailwindCSS 3, but now CSS nesting no longer works. Upon starting the server, the console spits out:

...

ANSWER

Answered 2022-Feb-03 at 18:38

This is mostly just bad news.

Create React App's Tailwind support means that they will detect tailwind.config.js in the project and add tailwindcss to their existing postcss configuration. Source in CRA

The guide that Tailwind offers on their site creates a dummy postcss.config.js - Making changes in this file does not change the actual postcss configuration. (misleading if anything)

This is a known issue currently - Github discussion on Tailwind support PR between Adam Wathan (Tailwind founder) and Ian Sutherland (CRA maintainer). But it does not seem like there is an intention to be fixed soon.

If you want to use nesting (or any PostCSS plugin really) is to eject from CRA using:

Source https://stackoverflow.com/questions/70665302

QUESTION

i tried to Polyfill modules in webpack 5 but not working (Reactjs)

Asked 2022-Mar-17 at 17:08

Hi guys am a newbie in React when i start my project i get the Wepback V5 Error Message

Resolve updated : https://github.com/facebook/create-react-app/issues/11756#issuecomment-1001162736

This What am using!

...

ANSWER

Answered 2021-Dec-21 at 09:19

This looks like a new issue with many packages including web3 as these are not compatible with Webpack v5 without adding fallbacks for the polyfils.

Issue noted here: https://github.com/facebook/create-react-app/issues/11756

I solved this issue by adding the fallback to my webpack.config.js file;

Source https://stackoverflow.com/questions/70398678

QUESTION

Create-React-App creates this that prevents me from clicking or editing directly the app unless I delete it in the elements browswer editor

Asked 2022-Mar-17 at 00:14

I recently did a global install of create-react-app and am having an issue where sometimes, when I'm working on a project, instead of editing directly what I have rendered in , it creates this container around the entire app.

Upon further inspection it looks like it is an which is rendered in the browswer as this:

...

ANSWER

Answered 2022-Jan-21 at 21:43

So after MUCH research and testing, I finally figured this out and I hope it can save anyone in the same situation I was in 😊

I have found two solutions that can solve this, one with a .env file that sometimes works, and the other solution is with css that I want to say always will solve this issue.

Fix #1: .env solution

In the root folder level (the same level as the .gitignore, package.json, README.md, yarn.lock, /src), create a .env file and include the following in it:

Source https://stackoverflow.com/questions/70499543

QUESTION

Create-React-App with TypeScript failing to compile after importing Semantic UI

Asked 2022-Mar-15 at 08:26

I've created a new React app by running npx create-react-app@latest --typescript . and I've run the project using npm start and it all works as expected. I ran npm install semantic-ui-react semantic-ui-css and that installs correctly.

But when I add import 'semantic-ui-css/semantic.min.css'; to index.tsx as instructed, I get a failed to compile error.

Here's my index.tsx file:

...

ANSWER

Answered 2021-Dec-15 at 21:37

Judging from this issue: CSS import breaks webpack 5 compilation
I believe this is an issue with Semantic-UI-React and Webpack 5 (which is used by Create-React-App).

The final answer in that issue is a suggestion to switch to Fomantic-UI 😅

This should be reported into the upstream repo: https://github.com/Semantic-Org/Semantic-UI. The problem is that it's dead 🙄 Reasonable solution is to switch to https://github.com/fomantic/Fomantic-UI.

https://github.com/Semantic-Org/Semantic-UI-React/issues/4287#issuecomment-935897619

Source https://stackoverflow.com/questions/70367443

QUESTION

styled-components/macro isn't working with CRA

Asked 2022-Mar-14 at 16:08

When i install a new create-react-app and add babel-plugin-styled-components and add displayName option to babel-plugin-macros.config.js it isn't adding readable classNames as in the documentation -> https://styled-components.com/docs/tooling#babel-macro.

Here is a repo with the configurations https://github.com/Futekov3216/CRA.git

P.S i dont want to eject

...

ANSWER

Answered 2021-Dec-16 at 06:49

Today I myself faced such a problem. The problem lies in styled-components itself. Macro in styled does not work since version 5.2.2, and it is not known when it will be fixed. Simplest solution:

Source https://stackoverflow.com/questions/70189366

QUESTION

react-chartjs-2 with chartJs 3: Error "arc" is not a registered element

Asked 2022-Mar-09 at 11:20

I am working on a React app where i want to display charts. I tried to use react-chartjs-2 but i can't find a way to make it work. when i try to use Pie component, I get the error: Error: "arc" is not a registered element.

I did a very simple react app:

npx create-react-app my-app
npm install --save react-chartjs-2 chart.js

Here is my package.json:

...

ANSWER

Answered 2021-Nov-24 at 15:13

Chart.js is treeshakable since chart.js V3 so you will need to import and register all elements you are using.

Source https://stackoverflow.com/questions/70098392

QUESTION

npx create-react-app prompting to globally uninstall non-existent create-react-app package?

Asked 2022-Feb-19 at 03:11

I am having problems with npx create-react-app involving global installs. My confusion arises because as far as I'm aware the create-react-app package is not installed on my machine.

Some Details:

I start a react project (with typescript template) as I have previously and recently done on this same machine a number of times:

npx create-react-app --template typescript .

I get this prompt from the terminal

Need to install the following packages: create-react-app Ok to proceed? (y)

I press y to confirm it's okay to proceed. (If I press n, the process terminates with the following error: npm ERR! canceled.) The terminal then displays the following message

...

ANSWER

Answered 2021-Dec-21 at 14:45

You can try to locate the installed version by running:

Source https://stackoverflow.com/questions/70352503

Community Discussions, Code Snippets contain sources that include Stack Exchange Network

Vulnerabilities

No vulnerabilities reported

Install create-react-app

You don’t need to install or configure tools like webpack or Babel. They are preconfigured and hidden so that you can focus on the code. Create a project, and you’re good to go.