Typescript error TS1259: Module '"/node_modules/@types/react/index"' can only be default-imported using the 'esModuleInterop' flag

[andresgutgon]

Hi, I just started a NextJs project this weekend with this versions:

Node: 14.15.4
Next.js: 10.0.1
Typescript: 4.1.3

I'm getting this error:

node_modules/next/dist/client/link.d.ts:2:8 - error TS1259: Module '"/Users/myName/myProject/node_modules/@types/react/index"' can only be default-imported using the 'esModuleInterop' flag

import React from 'react';
 node_modules/@types/react/index.d.ts:65:1
  65 export = React;
  ~~~~~~~~~~~~~~~
 This module is declared with using 'export =', and can only be used with a default import when 
using the 'esModuleInterop' flag.

When running this command:

yarn tsc pages/index.tsx

I searched on Google
Searched on open issues and discussions on this repo
Also tried "allowSyntheticDefaultImports": true and "esModuleInterop": true

I would love some help. Thanks!

Ah this is my tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noImplicitAny": true,
    "noImplicitThis": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noImplicitReturns": true,
    "noEmit": true,
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "skipLibCheck": true
  },
  "include": [
    "next-env.d.ts",
    "**/*.ts",
    "**/*.tsx"
  ],
  "exclude": [
    "node_modules"
  ]
}

[dcsan]

i broke apart imports to get it to work like this:

import * as React from 'react'
import {
    // useEffect,
    useState, useEffect
}  from 'react';

for some reason can't get it as a one-liner