Can only be default-imported using the allowsyntheticdefaultimports flag

Q: Can only be default imported using the esModuleInterop flag node?

The error Module can only be default-imported using esModuleInterop flag occurs when we try to import a CommonJS module into an ES6 module. To solve the error, set the esModuleInterop option to true in your tsconfig. json file.

Q: Has no default export Did you mean to use import?

The Module has no default export error occurs when we try to import as default from a module that doesnt have a default export. To solve the error make sure the module has a named export and wrap the import in curly braces, e.g. import {myFunction} from ./myModule .

[

Table of Contents Show

allowSyntheticDefaultImports
esModuleInterop
noErrorTruncation
noImplicitAny
strictNullCheck
noUnusedParameters
results matching ""
No results matching ""
Can only be default imported using the esModuleInterop flag node?
What is allowSyntheticDefaultImports?
Has no default export Did you mean to use import?
What is isolatedModules?

I am getting the below error while doing npm publish, but build is working fine.

and below is the command running to publish package.

npm run ng-packagr -p projects/core/package.json && cd dist/@app/formgenerator-core && npm publish

package.json

{
  "name": "@app/formgenerator-core",
  "version": "0.0.4",
  "description": "Angular JSON schema form generator core",
  "author": "devteam",
  "keywords": [
    "angular json schema form generator"
  ],
  "contributors": [
    "[email protected]"
  ],
  "private": false,
  "license": "UNLICENSED",
  "ngPackage": {
    "$schema": "../../node_modules/ng-packagr/package.schema.json",
    "dest": "../../dist/@app/formgenerator-core",
    "lib": {
      "entryFile": "src/public_api.ts",
      "umdModuleIds": {
        "lodash/isEqual": "lodash-es",
        "lodash/cloneDeep": "lodash-es",
        "lodash/filter": "lodash-es",
        "lodash/map": "lodash-es",
        "lodash/uniqueId": "lodash-es",
        "ajv": "ajv",
        "ajv/lib/refs/json-schema-draft-06.json": "jsonDraft6",
        "hot-formula-parser": "hot-formula-parser",
        "@app/app-virtual-keypad": "@app/app-virtual-keypad"
      }
    },
    "whitelistedNonPeerDependencies": [
      "lodash-es",
      "ajv",
      "hot-formula-parser",
      "@app/app-virtual-keypad"
    ]
  },
  "dependencies": {
    "@app/app-virtual-keypad": "0.1.2",
    "ajv": "6.12.3",
    "hot-formula-parser": "3.0.2",
    "lodash": "^4.17.20",
    "lodash-es": "^4.17.15"
  },
  "peerDependencies": {
    "@angular/common": ">=6.0.0",
    "@angular/core": ">=6.0.0",
    "@angular/forms": ">=6.0.0",
    "@angular/platform-browser": ">=6.0.0",
    "rxjs": ">=6.0.0"
  },
  "devDependencies": {
    "@types/lodash-es": "4.17.3"
  },
  "main": "karma.conf.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  }
}

tsconfig.json

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "module": "esnext",
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "allowSyntheticDefaultImports": true,
    "resolveJsonModule": true,
    "importHelpers": true,
    "target": "es2015",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2018",
      "dom"
    ],
    "paths": {
      "@app/formgenerator-core": [
        "dist/@app/formgenerator-core"
      ],
      "@app/formgenerator-core/*": [
        "dist/@app/formgenerator-core/*"
      ]
    }
  },
  "angularCompilerOptions": {
    "fullTemplateTypeCheck": true,
    "strictInjectionParameters": true
  }
}

console error:

Compiling TypeScript sources through ngc
ERROR: projects/core/src/lib/shared/json.validators.ts:1:8 - error TS1259: Module '"D:/app2020/septmber/formgenerator/projects/core/node_modules/@types/lodash/isEqual"' can only be default-imported using the 'allowSyntheticDefaultImports' flag

1 import isEqual from 'lodash/isEqual';
         ~~~~~~~

  projects/core/node_modules/@types/lodash/isEqual.d.ts:2:1
    2 export = isEqual;
      ~~~~~~~~~~~~~~~~~
    This module is declared with using 'export =', and can only be used with a default import when using the 'allowSyntheticDefaultImports' flag.

is there any configuration missing or extra need to add in my project.

Please any help is very appriciated.

Thanks.

You nee to add "allowSyntheticDefaultImports": true in your <projectroot>/tsconfig.json file as below

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "downlevelIteration": true,
    "experimentalDecorators": true,
    "module": "esnext",
    "moduleResolution": "node",
    "importHelpers": true,
    "target": "es2015",
    "lib": [
      "es2018",
      "dom"
    ]
  },
  "exclude": ["node_modules"],
  "angularCompilerOptions": {
    "fullTemplateTypeCheck": true,
    "strictInjectionParameters": true,
    "allowSyntheticDefaultImports": true <------ add this
  }
  
}

i added this object

   "angularCompilerOptions": {
     "allowSyntheticDefaultImports": true
    }

to my tsconfig.base.json

]

In this section, I'll talk about the compiler options and which option I recommend and why.

You should configure most of these options in tsconfig.json.

For a full list of compiler options, please go to https://www.typescriptlang.org/docs/handbook/compiler-options.html.

allowSyntheticDefaultImports

Allow default imports from modules with no default export. This does not affect code emit, just typechecking.

This flag allows you to use the import x from 'x' syntax when importing commonjs modules. This is introduced before the esModuleInterop flag.

Do not use this flag. Use esModuleInterop instead.
Why? Since this flag does not affect code emit, it creates a discrepency between the typings and the actual emitted code. This causes a systematic issue at consumption rendering your package is not usable in certain ecosystem. The only place that make sense to use this flag is at the application level. But even that, you can just use esModuleInterop instead.
You can learn more about this in https://github.com/Microsoft/TypeScript/issues/7398

esModuleInterop

Enable TypeScript emitted code to work with code emitted by the Babel ecosystem.

This flag is introduced in TypeScript 2.7.

Prior to 2.7, when importing commonjs module, you have to do either import x = require('x') or import * as x from 'x'.

This seems to be a reasonable approach but it does not work when the primary object being exported is a primitive or a value with call/construct signatures. ECMAScript stated the namespace record is a plain object (https://github.com/Microsoft/TypeScript/issues/16093).

That is why this flag is introduced.

Enable this flag

noErrorTruncation

Do not truncate error messages.

Enable this flag.
Why? Most type errors are very deep, and the most important piece of information is at the end of the message.
Why not? If you are in the process of converting your JavaScript project to TypeScript, you can turn off this flag if you have many errors. But remember the existence of this flag so that you can get the full error detail when you need them.

noImplicitAny

Raise error on expressions and declarations with an implied any type. This flag will be enabled if you use the strict flag.

If this flag is enabled, the control flow analysis will able to perform additional tricks to make it work even better.

For example, const x = [] will have type any[] instead of never[] when noImplicitAny is enabled.

You must enable this flag.

Why? While enabling this flag has its benefit, This flag requires either all function parameters must be typed or define as any explicitly.
Requiring all parameters to be typed contradicts with my design principle of being efficient.
For example, at the time of writing, jest plugin system does not provide the type of jestHook below:

  export class WatchSuspendPlugin {
    apply(jestHook) { // error: `jestHook` is implicitly any
      jestHooks.shouldRunTestSuite(() ={
        return !this.suspend
      })
    }
  }

To be comply with noImplicitAny, I have to either define the type myself which requires work and is more complicated, or I will just silent the error with jestHook: any, which is a bad practice in general (see basic-types for more information)
I will have tests to cover all the use cases so I am not concerned about bugs due to the lack of types, and I prefer to have the flexibilty to omit the type as I see fit, or add the type when I find the type will be reused elsewhere and worth creating.

strictNullCheck

Enable this flag

strict

Enable this flag
Help wanted Mostly due to noImplicitAny. Other strict check does not seem to be an issue.

noUnusedParameters

Perfer to turn off this flag
Why? There are valid cases to have uninterested parameters in the function signature. For example, callbacks, polymorphic functions. When you have this flag turned on, You have to prefix them with _, which could be problematic if you refactor down the road, and also hinder readability if this is a public function. I value readability of the code above other factors, that's why I prefer to leave this flag off.
Why not? If you want to avoid accidental mistakes as much as possible, fell free to turn on this flag, and prefix uninterested parameters with _.

References:

https://github.com/Microsoft/TypeScript/issues/9458

results matching ""

No results matching ""

Can only be default imported using the esModuleInterop flag node?

The error "Module can only be default-imported using esModuleInterop flag" occurs when we try to import a CommonJS module into an ES6 module. To solve the error, set the esModuleInterop option to true in your tsconfig. json file.

What is allowSyntheticDefaultImports?

--allowSyntheticDefaultImports: Allow default imports from modules with no default export. This does not affect code emit, just typechecking.

Has no default export Did you mean to use import?

The "Module has no default export" error occurs when we try to import as default from a module that doesn't have a default export. To solve the error make sure the module has a named export and wrap the import in curly braces, e.g. import {myFunction} from './myModule' .

What is isolatedModules?

Setting the isolatedModules flag tells TypeScript to warn you if you write certain code that can't be correctly interpreted by a single-file transpilation process. It does not change the behavior of your code, or otherwise change the behavior of TypeScript's checking and emitting process.

Can only be default-imported using the allowsyntheticdefaultimports flag

allowSyntheticDefaultImports

esModuleInterop

noErrorTruncation

noImplicitAny

strictNullCheck

strict

noUnusedParameters

results matching ""

No results matching ""

Can only be default imported using the esModuleInterop flag node?

What is allowSyntheticDefaultImports?

Has no default export Did you mean to use import?

What is isolatedModules?

Related Posts

Advertising

LATEST NEWS

After how many weeks pregnancy is safe

Icd 10 major depressive disorder recurrent moderate

Where is the account number on a td bank check

Blood in discharge but not period reddit

Bank of america home affordable mortgage program

2005 jeep grand cherokee 3 inch lift kit

Cooking frozen salmon fillets in air fryer

If a friend drives my car are they insured

Best place to see redwoods in san francisco

Travel requirements to st thomas virgin islands

Advertising

Populer

Advertising

About

Legal

Help

Social