This module is declared with using 'export =', and can only be used with a default import when using the 'allowSyntheticDefaultImports' flag

Question

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": [
    "devteam@gmail.com"
  ],
  "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.

Answer 1

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
  }
  
}

Answer 2

i added this object

   "angularCompilerOptions": {
     "allowSyntheticDefaultImports": true
    }

to my tsconfig.base.json

Answer 3

Try adding too (I helped me): "esModuleInterop": true, in the "compilerOptions"

 { "compileOnSave": false, "compilerOptions": { "baseUrl": "./", "outDir": "./dist/out-tsc", "sourceMap": true, "declaration": false, "downlevelIteration": true, "experimentalDecorators": true, "module": "esnext", "moduleResolution": "node", "importHelpers": true, "target": "es2015", "esModuleInterop": true <------ add here "lib": [ "es2018", "dom" ] }, }