Just installed React npx create-react-app client and it failed to compile when launched citing the error ...autoprefixer/node_modules/kleur' do not define a valid './colors' target. I re-installed, it launched, but it failed again when launched concurrently with the express server.
Digging further... Kleur (version 4.0.1) is a dependency for "autoprefixer" in the package-lock.json file (version 9.8.1). I noticed that yarn.lock is referencing kleur version 3.0.3, though version 4.0.1 was installed in node_modules. A few days earlier, I had installed a React client where "autoprefixer" (version 9.8.0) used "chalk" with no "kleur" dependency, and which had no problems starting up.
Though not really understanding the problem, I replaced the "autoprefixer" code snippet (v. 9.8.1) in the newly installed client package-lock.json file with the previously installed version (9.8.0) and it appears to have solved the compiler issue. Curiously, references to kleur@^4.0.1 in node_modules seemed to switch to kleur@^3.0.3 after I made the change, which I cannot explain.
Thoughts anyone?
After lots of investigation, I found the problem. The problem was in the autoprefixer.js file which is part of dependencies in node_modules. As I understood system couldn't find the address of Kleur module. Just go to this file in the following path:
node_modules > autoprefixer > lib > autoprefixer.js
in this file change the value of kleur variable from :
var kleur = require('kleur/colors');
to
var kleur = require('../node_modules/kleur/colors');
I found this by comparing the address of this module with other modules in same file. if you hover your mouse on other modules like postcss you can see it has a complete address but this module kleur doesn't have such an address so when I changed the address to new value now it shows full address like other modules and it worked for me.