craco | Create React App Configuration Override | Frontend Framework library

by gsoft-inc JavaScript Version: v7.0.0-alpha.0 License: Apache-2.0

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

kandi X-RAY | craco Summary

craco is a JavaScript library typically used in User Interface, Frontend Framework, React Native, React, Webpack, Next.js applications. craco has no bugs, it has no vulnerabilities, it has a Permissive License and it has medium support. You can install using 'npm i iman-craco' or download it from GitHub, npm.

Create React App Configuration Override is an easy and comprehensible configuration layer for create-react-app. Get all the benefits of create-react-app and customization without using 'eject' by adding a single configuration (e.g. craco.config.js) file at the root of your application and customize your eslint, babel, postcss configurations and many more. All you have to do is create your app using create-react-app and customize the configuration file.

Support

Quality

Security

License

Reuse

Support

craco has a medium active ecosystem.

It has 5606 star(s) with 392 fork(s). There are 44 watchers for this library.

It had no major release in the last 12 months.

There are 56 open issues and 237 have been closed. On average issues are closed in 111 days. There are no pull requests.

It has a neutral sentiment in the developer community.

The latest version of craco is v7.0.0-alpha.0

Quality

craco has 0 bugs and 0 code smells.

Security

craco has no vulnerabilities reported, and its dependent libraries have no vulnerabilities reported.

craco code analysis shows 0 unresolved vulnerabilities.

There are 0 security hotspots that need review.

License

craco is licensed under the Apache-2.0 License. This license is Permissive.

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

Reuse

craco releases are available to install and integrate.

Deployable package is available in npm.

Top functions reviewed by kandi - BETA

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

Updates the configuration with the given configuration .
Creates a babel transformer
Extend postcss to add plugins
Remove a loader recursively .
Creates a dev server based on the browser configuration .
Override the eslint config .
Extend plugin config .
Creates a new Webpack configuration .
Overrides the css config with the given CSS module .
Merge cordova configuration into runner configuration .

Get all kandi verified functions for this library.

craco Key Features

No Key Features are available at this moment for craco.

craco Examples and Code Snippets

No Code Snippets are available at this moment for craco.

Community Discussions

Trending Discussions on craco

How to start react app on custom port with CRACO?

Why styles don't update when saving the files in Tailwind CSS JIT mode and I need to restart the server?

Meteor + Semantic React

TypeError: match.loader.options.plugins is not a function

Craco does not work properly with react-scripts@5.0.0

`craco start` not compiling, `craco build` does

Webpack logs on React compilation

process is not defined on hot reload

Failed to update react-scripts

PostCSS error "tailwindcss requires PostCSS 8" when npm start

QUESTION

How to start react app on custom port with CRACO?

Asked 2022-Apr-04 at 21:49

I want to use Tailwind CSS for my react apps. The problem is CRACO start starts the app on the default port, which is 3000 and I want to have custom ports but I can't figure out what is the right approach. ( Can't find anything about this in their documentation )

I tried something like PORT=5000 CRACO start inside the scripts field of the package.json file but doesn't work. Any idea?

...

ANSWER

Answered 2021-Nov-20 at 20:31

CRACO use the webpack devserver configuration to set the port.

you need to create a configuration. read more here in the readme:

https://github.com/gsoft-inc/craco/blob/master/packages/craco/README.md#configuration-file

So you solution need to redefine devServer. How to define it read in the webpack documentation:

https://webpack.js.org/configuration/dev-server/#devserver

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

QUESTION

Why styles don't update when saving the files in Tailwind CSS JIT mode and I need to restart the server?

Asked 2022-Mar-26 at 19:43

Edit: This issue is now deprecated since version 3.0.0 of tailwind works with react without having to use CRACO.

While trying to use Tailwind with React in JIT mode the classes that I add have no styles, even after refreshing the page. I have to restart the server for the styles to take effect.

tailwind.config.js:

...

ANSWER

Answered 2021-Nov-05 at 14:41

In package.json you should activate watch mode on the start script like

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

QUESTION

Meteor + Semantic React

Asked 2022-Mar-15 at 10:45

LAST EDIT :

never use npm raw command in meteor. always meteor npm. That is the reason why everything broke.

AND do upgrade step by step , version to the nearest version.

I think that's all that causes this headache.

Everything works now.

Thanks !

EDIT :

After trying all the steps ahead ... I remove jquery / less and semantic:ui from meteor

...

ANSWER

Answered 2022-Feb-28 at 21:21

I think you have created a bit of a mess for yourself. I was able to create a simple meteor app using semantic-ui-react as follows:

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

QUESTION

TypeError: match.loader.options.plugins is not a function

Asked 2022-Feb-24 at 05:03

I am trying to use tailwindCSS in a ReactJS app

These are the scripts commands in package.json file

...

ANSWER

Answered 2021-Dec-18 at 22:00

It looks like the Tailwind configuration from CRACO is not needed anymore.

https://github.com/facebook/create-react-app/issues/11771#issuecomment-997217680

Look at Tailwind 3.0 install steps: https://tailwindcss.com/docs/guides/create-react-app

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

QUESTION

Craco does not work properly with react-scripts@5.0.0

Asked 2022-Feb-23 at 10:05

After upgrading react-scripts to v5, craco start does not work properly. App starts with no error but in browser, there is a blank page and if i open inspector, i only see index.html codes not react codes. It was working well with react-scripts@4.0.3. Here is my local files;

package.json

...

ANSWER

Answered 2022-Feb-23 at 10:05

craco's Github readme, states that it is supporting Create React App (CRA) 4.*. By this statement, I'm assuming CRA 5 is not officially supported by craco.

However, this repository utilizes both CRA 5 and craco (but I have not verified that it is working). Use this repository to compare your setup (after verifying that the linked repositry is working), and try different settings/configs to see if you get further.

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

QUESTION

`craco start` not compiling, `craco build` does

Asked 2022-Feb-16 at 16:40

Context

I've recently switched my CRA dictionary application to Preact using craco. I've made this work using webpack aliases, which replace references to react packages with preact packages (e.g. preact/compat).

What happens when I run... craco build

I get no errors and the build successfully completes, and you can see the folder here:

Everything fine here.

craco start

It starts the predeployment checks (I think), and hits a snag very quickly. It can't find the react module.

...

ANSWER

Answered 2022-Feb-16 at 16:40

You need to keep react installed, unfortunately. It's required by react-scripts for starting the dev server and is unavoidable without forking the package.

If you're concerned about the alias working with React still being installed, you can comment out your config and compare build sizes. You should see a sizable difference, confirming your alias works as intended.

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

QUESTION

Webpack logs on React compilation

Asked 2022-Feb-03 at 03:13

The following logs are showing when I recompile a React app:

On previous projects, only the following would show:

What could be causing this? Have I accidentally enabled a Webpack/Craco/TS setting?

...

ANSWER

Answered 2022-Feb-03 at 03:13

https://webpack.js.org/configuration/stats/

There are a ton of logging options you can use with devServer:

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

QUESTION

process is not defined on hot reload

Asked 2022-Feb-02 at 19:03

I have a react app made with create react app, and hot reloading kills the page entirely with the error:

...

ANSWER

Answered 2021-Dec-15 at 22:41

I fixed it. I did 2 things:

Updated npm to latest
Updated react-scripts to latest

Not sure which one fixed it.

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

QUESTION

Failed to update react-scripts

Asked 2022-Jan-26 at 12:15

I have a react application that was created with create-react-app and is using react-scripts version 3.4.2. The app works great but when I run eslint against it I get many invalid no-unused-vars errors. By invalid I mean that when I go to the file that variable is actually being used.

Based on this answer it seems the issue is related to @typescript-eslint/parser and @typescript-eslint/eslint-plugin. So I went ahead and executed npm list @typescript-eslint/parser @typescript-eslint/eslint-plugin on my app and this is what I get:

...

ANSWER

Answered 2022-Jan-26 at 12:15

The error message that you shared seems to be related to a bug with react-error-overlay.

react-scripts 4.0.3. uses react-error-overlay 6.0.9. However, 6.0.10 is marked as a patch, so npm uses 6.0.10 instead of 6.0.9, but 6.0.10 is not compatible with 6.0.9.

On the other hand, react-scripts 5 does not use react-error-overlay, but might be causing breaking changes with your other packages, hence the other errors.

You can find more information about the react-error-overlay bug in these issues on the CRA repository:

Here's a possible solution with react-scripts 4.0.3.:

In your project's package.json file:

In dependencies, set the react-scripts version to 4.0.3.
Under dependencies, in resolutions, add react-error-overlay 6.0.9.
In devDependencies, add react-error-overlay 6.0.9.

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

QUESTION

PostCSS error "tailwindcss requires PostCSS 8" when npm start

Asked 2022-Jan-22 at 18:06

My project keeps getting the error PostCSS plugin tailwindcss requires PostCSS 8 when npm start.

This case is the same, but now it's old and nothing works. PostCSS 8 now should be compatible with Tailwind and CRA, so I installed the latest versions but returns the same error. I got stuck here for almost 3days, so I'd appreciate any suggestions or comments!

What I tried (but never worked):

Downgraded to compatible versions of tailwindcss/postcss7-compat": "^2.2.17”, PostCSS ^7.0.39 and autoprefixer": "^9.8.8
Upgraded to the latest version of tailwindcss:"^2.2.17", autoprefixer:"^10.4.0", and PostCSS ^8.3.11
Upgraded node v16.13.0,craco: "^6.4.0", and react-scripts:"^4.0.3".
Added --openssl-legacy-provider in start script
Deleted package-lock.json, yarn-lock.json, node-modules, and npm install
Restarted VScode and browser multiple times.

...

ANSWER

Answered 2021-Nov-01 at 06:31

I spent so much time on this and finally found a workaround. Use tailwind CLI instead of postCSS and autoprefixer. Follow this doc. Don't forget to remove require('autoprefixer') from the craco.config.js. PostCSS official says that PostCSS8 is now compatible with create-react-app, but unfortunately not. I saw many people are still having the same problem as me, so I hope this answer helps someone.

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

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