Synchronous import not allowed

[Marius Šomka]

Describe the bug
when trying to import anything from 'react-loading-skeleton', I get this typescript error message:
Module 'react-loading-skeleton' cannot be imported using this construct. The specifier only resolves to an ES module, which cannot be imported synchronously. Use dynamic import instead.ts(1471)

To Reproduce
Try to import import Skeleton from 'react-loading-skeleton';

Actual Behavior
I got an error message specified above.

Expected Behavior
I expect sync imports to be allowed.

Versions
"react-loading-skeleton": "^3.2.0",
"typescript": "~4.7.4",

Any clues on solving this?

[Sam Magura]

Please try upgrading to the latest version (3.3.1). If that does not fix it, please post your code.

[Marius Šomka]

Thanks @srmagura! Upgraded to 3.3.1 as you suggested. It doesn't fix it. It fails on every import as given in the example - import Skeleton from 'react-loading-skeleton'. Not only for Skeleton component, every other as well.
I've checked tsconfig and tried to align with the example in codebox from docs, made sure to have esModuleInterop as true.
Sending other config options, perhaps anything is clashing that I'm not aware of?

{
  "compilerOptions": {
    "allowJs": true,
    "allowSyntheticDefaultImports": true,
    "declaration": false,
    "emitDecoratorMetadata": true,
    "esModuleInterop": true,
    "experimentalDecorators": true,
    "forceConsistentCasingInFileNames": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "module": "CommonJS",
    "moduleResolution": "nodenext",
    "noEmit": false,
    "noFallthroughCasesInSwitch": true,
    "removeComments": true,
    "resolveJsonModule": true,
    "skipLibCheck": true,
    "strict": true,
    "strictPropertyInitialization": false,
    "target": "ES2017"
  },
  "compilerOptions": {
    "jsx": "react-jsx",
    "lib": ["DOM", "DOM.Iterable", "ESNext"],
    "noEmit": true
  },
  "include": [
    "./*.d.ts",
    "./src",
  ]
}

[Sam Magura]

Hey @somkamarius, I think the problem is that your TSConfig is invalid. You have two compilerOptions keys — I assume the second one will overwrite the first one.

[Marius Šomka]

Very much so sorry for this, as I was copying the config i made some mistakes when editing it. Attaching the actual tsconfig:

{
  "compilerOptions": {
    "allowJs": true,
    "allowSyntheticDefaultImports": true,
    "declaration": false,
    "emitDecoratorMetadata": true,
    "esModuleInterop": true,
    "experimentalDecorators": true,
    "forceConsistentCasingInFileNames": true,
    "isolatedModules": true,
    "jsx": "react-jsx",
    "module": "CommonJS",
    "moduleResolution": "nodenext",
    "noEmit": true,
    "noFallthroughCasesInSwitch": true,
    "removeComments": true,
    "resolveJsonModule": true,
    "skipLibCheck": true,
    "strict": true,
    "strictPropertyInitialization": false,
    "target": "ES2017",
    "lib": ["DOM", "DOM.Iterable", "ESNext"]
  },
  "include": [
    "./*.d.ts",
    "./src",
  ]
}

[Sam Magura]

I used your TSConfig, and I got this error from tsc:

error TS1479: The current file is a CommonJS module whose imports will produce 'require' calls; however, the referenced file is an ECMAScript module and cannot be imported with 'require'. Consider writing a dynamic 'import("react-loading-skeleton")' call instead.
  To convert this file to an ECMAScript module, change its file extension to '.mts', or add the field `"type": "module"` to '/home/srmagura/oss/react-loading-skeleton-test-projects/node-esm/package.json'.

1 import Skeleton, { SkeletonTheme } from 'react-loading-skeleton';

The root cause seems to be that you have a mix of "old school" CommonJS stuff and "new school" ES Module stuff in your configuration.

It works if everything is "old school":

   "module": "CommonJS",
   "moduleResolution": "node",

It also works if everything is "new school":

    "module": "ESNext",
    "moduleResolution": "nodenext",

and

"type": "module"

in package.json.

I would recommend the second approach (all ESM) whenever possible.

Based on the above, do you still think this is an issue with react-loading-skeleton? If it is an issue with the library, I am not sure how to fix it 🤔

[Sam Magura]

Closing due to lack of activity. Please comment or open a new issue if you think there is room to improve the library.