Questions tagged [craco]

Craco stands for Create React App Configuration Overrides - an easy and comprehensible configuration layer for create-react-app.

Craco is a mechanism for overriding aspects the standard Create React App configuration without forcing the developer to eject their app from CRA.

It allows you add a single craco.config.js file at the root of your application and thus customise your eslint, babel, postcss, and webpack configurations.

190 questions
6
votes
1 answer

My React app is using values from the .env file instead of the .env.local file

The dotenv module should be prioritizing my .env.local file over my .env file, but it's not. When I have REACT_APP_API_BASE set in both files, the app always uses the value in .env. It only uses the value in .env.local if I delete the matching…
carpiediem
  • 1,918
  • 22
  • 41
6
votes
2 answers

Webpack Code Splitting - Prevent Duplicate CSS File in Build

I've bootstrapped my app with Create-React-App version 3.4.1 and am using Craco version 5.6.4 to make modifications to the Webpack config CRA provides. Due to specific client expectations which are out of my control, I need to end up with…
huntermacd
  • 77
  • 5
6
votes
1 answer

Adding svgr to create-react-app via craco

I want to use svgr's webpack plugin with create-react-app to use SVGs with MaterialUI's SvgIcon. I'm using craco to add svgr to Webpack's config. Currently, whenever the SVG is supposed to be rendered, the following error is thrown: Failed to…
John Smith
  • 3,863
  • 3
  • 24
  • 42
5
votes
0 answers

Attempted import error: '@module' does not contain a default export (imported as 'module')

I'm using craco to create a react app. Here are my ts configs: { "compilerOptions": { "target": "es5", "lib": [ "dom", "dom.iterable", "esnext" ], "allowJs": true, "skipLibCheck": true, "esModuleInterop":…
BonisTech
  • 342
  • 3
  • 15
5
votes
1 answer

Craco, webpack and library creation

I am creating a small reactjs app which in the end will generate a single .js file (it's basically a chatbot frontend application, which talks to a backend). I have created a react app using npx create-react-app, and I have designed everything…
Bruno Ripa
  • 833
  • 2
  • 12
  • 25
5
votes
0 answers

Create-react-app watch mode fails when file renamed or branch switched

I'm using create-react-app (via craco) and during development I keep it running in the watch mode using react-scripts start (well, craco start to be precise). This refreshes the app when I modify code in real time. However, when I rename a file…
szaman
  • 2,159
  • 1
  • 14
  • 30
5
votes
3 answers

How to enable JIT(Just in time mode) with create react app?

I tried setting up the JIT in create-react-app by myself but it doesn't seem to be working as in the styles are not getting updated. I am using craco to build the app with tailwind css and also added TAILWIND mode=WATCH as they suggested to make it…
Ameya Jangam
  • 63
  • 1
  • 5
5
votes
1 answer

Using craco in new react project - what would cause this error ? (UnhandledPromiseRejectionWarning: TypeError [ERR_INVALID_ARG_VALUE]: ...)

Summary In creating a new project and attempting to use craco with it I've come across an error which I don't understand. What I've got The error looks like this ... $ craco start (node:125281) UnhandledPromiseRejectionWarning: TypeError…
glaucon
  • 8,112
  • 9
  • 41
  • 63
5
votes
0 answers

How can I add support for web workers in a CRACO Webpack application?

I want to leverage web workers in my react app. I decided to use threads as my supporting library. For this to function with a webpack bundle threads-plugin must be included. I happen to use CRACO and so I am still able to modify my webpack…
Womble
  • 345
  • 3
  • 13
4
votes
1 answer

Adding another entry file to webpack w/o being injected to HTML file

I'm using CRA with CRACO to add another entry file to webpack configuration. Here is the code: module.exports = { webpack: { configure: (webpackConfig, {paths}) => { return { ...webpackConfig, entry: { main:…
Edgar Barber
  • 345
  • 3
  • 13
4
votes
1 answer

Using an ES module in TailwindCSS config (Using React and Craco)

I've been trying for hours to import the package d3-colors into my tailwind.config.js. No solutions I have found on the internet have worked so far. I have tried: Converting it to tailwind.config.mjs, but then it doesn't get loaded. The…
Thor Correia
  • 1,159
  • 1
  • 12
  • 20
4
votes
2 answers

React Build Tailwind Not Including all classes

So I'm making an App with React 17, tailwind and craco and its works find in dev but when i build with craco, tailwind don't include classes as h-36, h-44, col-span-1... That's my tailwind.config.js module.exports = { purge:…
4
votes
3 answers

Why is moment-timezone using a lot less space with webpack 4 and/or create react app 4?

With webpack 3, I was using moment-timezone-data-webpack-plugin to reduce my bundle size and it worked well. Tests showed it reduced the bundle size dramatically. I've now upgraded to webpack 4 and create-react-app 4, and it seems like this plugin…
John Bachir
  • 22,495
  • 29
  • 154
  • 227
4
votes
2 answers

Add path alias for typescript

I am using create-react-app as scaffolding and tsconfig-paths as extension of my tsconfig because create-react-app is removing my paths when ran. I have been using this setup for a year now and I have no problems with it but recently when I created…
Ryan Garde
  • 742
  • 1
  • 7
  • 20
4
votes
0 answers

Heroku error after adding Tailwind and CRACO

I recently added TailwindCSS to my React application following these steps: https://tailwindcss.com/docs/guides/create-react-app Now the challenge is, when I deploy to Heroku, which has buildpack https://github.com/mars/create-react-app-buildpack…
1
2
3
12 13