Typescript : Importing something that was exported with module.exports

Question

I have the following theme file that for some reason needs to be written in ES5 :

module.exports.theme = {
  primaryColor: 'blue',
  borderSize: '2px',
  // ...
}

I want to import it in a Typescript file (in a create-react-app environment). So I did the following :

import { theme } from "../../../../session/theme";

Which causes the following error :

Attempted import error: 'theme' is not exported from '../../../../session/theme'.

I also tried exporting with module.exports.default = { ... } and importing the default, but it basically says the same thing (no default export).

How should I solve this ?

My tsconfig.json looks like this :

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react"
  },
  "include": ["src"]
}

Answer 1

As your module compiles with ES5 you have to use require instead of import. Try this

const theme = require('../../../../session/theme').theme;

Otherwise you need to compile the module with ES6