... can only be default-imported using the 'esModuleInterop' flag

[Valdomar]

Hello!

First, thank you for your amazing project that is helping me to gain a considerable amount a time!

So I set up admin bro on my project, configured the admin panel, authentification & everything is working. But when I tried to deploy it on my server, I got a lot of errors related to typescript. This project is quite big so I have many modules but I don't think it's on my end.

I'm using this 3 modules from adminbro:

...
{
    "admin-bro": "^1.5.0",
    "admin-bro-expressjs": "^0.4.0",
    "admin-bro-typeorm": "^0.1.6-alpha.2",
}
...

Just in case, here is my tsconfig.json:

{
    "compilerOptions": {
        "module": "commonjs",
        "sourceMap": true,
        "target": "es6",
        "outDir": "./build",
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true
    },
    "experimentalDecorators": true,
    "include": [
        "app/**/*.ts"
    ],
    "exclude": [
        "node_modules"
    ]
}

And the yarn build is only rimraf build && tsc --outDir build. I don't have the problem in dev because i'm using nodemon I think...

Here is the report:

username@computer:[~/P/M/projecti]$ yarn build                                                              master +
yarn run v1.19.1
$ yarn run clean && tsc --outDir build
$ rimraf build
node_modules/admin-bro/types/src/frontend/components/app/action-button.d.ts:1:8 - error TS1259: Module '"/Users/username/project/node_modules/@types/react/index"' can only be default-imported using the 'esModuleInterop' flag

1 import React from 'react';
         ~~~~~

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

node_modules/admin-bro/types/src/frontend/components/app/action-header.d.ts:1:8 - error TS1259: Module '"/Users/username/project/node_modules/@types/react/index"' can only be default-imported using the 'esModuleInterop' flag

1 import React from 'react';
         ~~~~~

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

node_modules/admin-bro/types/src/frontend/components/app/base-action-component.d.ts:1:8 - error TS1259: Module '"/Users/username/project/node_modules/@types/react/index"' can only be default-imported using the 'esModuleInterop' flag

1 import React, { ReactNode } from 'react';
         ~~~~~

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

node_modules/admin-bro/types/src/frontend/components/app/breadcrumbs.d.ts:1:8 - error TS1259: Module '"/Users/username/project/node_modules/@types/react/index"' can only be default-imported using the 'esModuleInterop' flag

1 import React, { ReactNode } from 'react';
         ~~~~~

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

node_modules/admin-bro/types/src/frontend/components/app/default-dashboard.d.ts:1:8 - error TS1259: Module '"/Users/username/project/node_modules/@types/react/index"' can only be default-imported using the 'esModuleInterop' flag

1 import React from 'react';
         ~~~~~

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

node_modules/admin-bro/types/src/frontend/components/app/drop-area.d.ts:2:8 - error TS1259: Module '"/Users/username/project/node_modules/@types/react/index"' can only be default-imported using the 'esModuleInterop' flag

2 import React from 'react';
         ~~~~~

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

node_modules/admin-bro/types/src/frontend/components/app/error-boundary.d.ts:1:8 - error TS1259: Module '"/Users/username/project/node_modules/@types/react/index"' can only be default-imported using the 'esModuleInterop' flag

1 import React, { ReactNode } from 'react';
         ~~~~~

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

node_modules/admin-bro/types/src/frontend/components/app/filter.d.ts:1:8 - error TS1259: Module '"/Users/username/project/node_modules/@types/react/index"' can only be default-imported using the 'esModuleInterop' flag

1 import React, { ReactNode, MouseEvent, SyntheticEvent } from 'react';
         ~~~~~

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

node_modules/admin-bro/types/src/frontend/components/app/logged-in.d.ts:1:8 - error TS1259: Module '"/Users/username/project/node_modules/@types/react/index"' can only be default-imported using the 'esModuleInterop' flag

1 import React from 'react';
         ~~~~~

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

node_modules/admin-bro/types/src/frontend/components/app/no-records.d.ts:1:8 - error TS1259: Module '"/Users/username/project/node_modules/@types/react/index"' can only be default-imported using the 'esModuleInterop' flag

1 import React from 'react';
         ~~~~~

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

node_modules/admin-bro/types/src/frontend/components/app/notice.d.ts:1:8 - error TS1259: Module '"/Users/username/project/node_modules/@types/react/index"' can only be default-imported using the 'esModuleInterop' flag

1 import React from 'react';
         ~~~~~

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

node_modules/admin-bro/types/src/frontend/components/app/property-header.d.ts:1:8 - error TS1259: Module '"/Users/username/project/node_modules/@types/react/index"' can only be default-imported using the 'esModuleInterop' flag

1 import React from 'react';
         ~~~~~

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

node_modules/admin-bro/types/src/frontend/components/app/record-in-list.d.ts:1:8 - error TS1259: Module '"/Users/username/project/node_modules/@types/react/index"' can only be default-imported using the 'esModuleInterop' flag

1 import React from 'react';
         ~~~~~

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

node_modules/admin-bro/types/src/frontend/components/app/records-table-header.d.ts:1:8 - error TS1259: Module '"/Users/username/project/node_modules/@types/react/index"' can only be default-imported using the 'esModuleInterop' flag

1 import React from 'react';
         ~~~~~

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

node_modules/admin-bro/types/src/frontend/components/app/records-table.d.ts:1:8 - error TS1259: Module '"/Users/username/project/node_modules/@types/react/index"' can only be default-imported using the 'esModuleInterop' flag

1 import React from 'react';
         ~~~~~

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

node_modules/admin-bro/types/src/frontend/components/app/sort-link.d.ts:1:8 - error TS1259: Module '"/Users/username/project/node_modules/@types/react/index"' can only be default-imported using the 'esModuleInterop' flag

1 import React, { ReactNode } from 'react';
         ~~~~~

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

node_modules/admin-bro/types/src/frontend/components/app/topbar.d.ts:1:8 - error TS1259: Module '"/Users/username/project/node_modules/@types/react/index"' can only be default-imported using the 'esModuleInterop' flag

1 import React from 'react';
         ~~~~~

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

node_modules/admin-bro/types/src/frontend/components/app/version.d.ts:1:8 - error TS1259: Module '"/Users/username/project/node_modules/@types/react/index"' can only be default-imported using the 'esModuleInterop' flag

1 import React from 'react';
         ~~~~~

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

node_modules/admin-bro/types/src/frontend/components/ui/column.d.ts:1:8 - error TS1259: Module '"/Users/username/project/node_modules/@types/react/index"' can only be default-imported using the 'esModuleInterop' flag

1 import React from 'react';
         ~~~~~

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

node_modules/admin-bro/types/src/frontend/components/ui/columns.d.ts:1:8 - error TS1259: Module '"/Users/username/project/node_modules/@types/react/index"' can only be default-imported using the 'esModuleInterop' flag

1 import React from 'react';
         ~~~~~

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

node_modules/admin-bro/types/src/frontend/components/ui/dashboard-header.d.ts:1:8 - error TS1259: Module '"/Users/username/project/node_modules/@types/react/index"' can only be default-imported using the 'esModuleInterop' flag

1 import React, { ReactNode } from 'react';
         ~~~~~

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

node_modules/admin-bro/types/src/frontend/components/ui/dropdown.d.ts:1:8 - error TS1259: Module '"/Users/username/project/node_modules/@types/react/index"' can only be default-imported using the 'esModuleInterop' flag

1 import React, { ReactNode } from 'react';
         ~~~~~

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

node_modules/admin-bro/types/src/frontend/components/ui/loader.d.ts:1:8 - error TS1259: Module '"/Users/username/project/node_modules/@types/react/index"' can only be default-imported using the 'esModuleInterop' flag

1 import React from 'react';
         ~~~~~

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

node_modules/admin-bro/types/src/frontend/components/ui/paginate.d.ts:1:8 - error TS1259: Module '"/Users/username/project/node_modules/@types/react/index"' can only be default-imported using the 'esModuleInterop' flag

1 import React, { ReactNode } from 'react';
         ~~~~~

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

node_modules/admin-bro/types/src/frontend/components/ui/placeholder.d.ts:1:8 - error TS1259: Module '"/Users/username/project/node_modules/@types/react/index"' can only be default-imported using the 'esModuleInterop' flag

1 import React from 'react';
         ~~~~~

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

node_modules/admin-bro/types/src/frontend/components/ui/property-in-edit.d.ts:1:8 - error TS1259: Module '"/Users/username/project/node_modules/@types/react/index"' can only be default-imported using the 'esModuleInterop' flag

1 import React, { ReactNode } from 'react';
         ~~~~~

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

node_modules/admin-bro/types/src/frontend/components/ui/property-in-filter.d.ts:1:8 - error TS1259: Module '"/Users/username/project/node_modules/@types/react/index"' can only be default-imported using the 'esModuleInterop' flag

1 import React, { ReactNode } from 'react';
         ~~~~~

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

node_modules/admin-bro/types/src/frontend/components/ui/property-in-show.d.ts:1:8 - error TS1259: Module '"/Users/username/project/node_modules/@types/react/index"' can only be default-imported using the 'esModuleInterop' flag

1 import React, { ReactNode } from 'react';
         ~~~~~

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

node_modules/admin-bro/types/src/frontend/components/ui/value-block.d.ts:1:8 - error TS1259: Module '"/Users/username/project/node_modules/@types/react/index"' can only be default-imported using the 'esModuleInterop' flag

1 import React, { ReactNode } from 'react';
         ~~~~~

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

node_modules/admin-bro/types/src/frontend/components/ui/wrapper-box.d.ts:1:8 - error TS1259: Module '"/Users/username/project/node_modules/@types/react/index"' can only be default-imported using the 'esModuleInterop' flag

1 import React from 'react';
         ~~~~~

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


Found 30 errors.

error Command failed with exit code 2.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

Thanks in advance for your help & thanks for your work!

[wojtek-krysiak]

in your tsconfig you have to add: "esModuleInterop": true - it should help.

[maxpeterson]

I found I had to use "allowSyntheticDefaultImports": true rather than "esModuleInterop": true

[1ak31sha]

im having this error but only in neovim's lint...running a tsc check from terminal shows no errors

[gitsome]

I had to close and reopen VSCode on Mac for the linting to catch up.

[mrnwosu]

Hey! I'm still getting this even with "esModuleInterop" set to true :/

[Andrij-Nalyvayko]

import * as React from 'react' it helped me, but the best way is add to tsconfig

, "references": [ { "path": "src", "prepend": true } ]

[blopez-dev]

For me, this helped med.

[SherAtrium]

adding include to ts config file is helped me.

// ...
"include": [
  "src"
]
// ...