How can I load constant variable from src into craco.config.js?

Question

I'm using typescript React for the web app and it is using craco.config.js. I have color declaration in src/theme.ts and I want to import that constant from theme.ts into craco.config.js so I can use that constant to declare modifyVars.

But when I tried import { colorDict} from './src/theme', it raises that it is not a module When I also tried const {colorDict} = require('/src/theme.ts'), it raises syntax error that SyntaxError: Cannot use import statement outside a module (Which shows import statement inside theme.ts is raising an error)

I also tried creating separate file and declare colorDict in there but then it causes an error when I try to load in theme.ts or craco.config.js. (tried using module.exports or export)

How can I resolve this?

Answer 1

craco.config can't use ES6 (or typescript), it has to be commonjs (module.exports), not ESM (import/export)

So the simple answer is to change your src/theme.ts to be src/theme.js and use CJS (module.exports) and, if you need the types in your project create src/theme.d.ts for declaring the types separately.