This is a question for the SAP Spartacus team.
While creating a Spartacus component, I have come across errors where specific Spartacus .d.ts definition files cannot be resolved.
The issue is reproducible in the following Github repo/branch: https://github.wdf.sap.corp/vis/commerce-cloud-poc/tree/module-import-issue/storefront
The issue is not happening for all Spartacus definitions, just some.
When I use the following import statement in our component code, tsc can compile the code without issue (the file /Users/i070295/SAPDevelop/vis/commerce-cloud-poc/storefront/node_modules/@spartacus/storefront/cms-structure/page/model/cms-component-data.d.ts exists):
import { CmsComponentData } from '@spartacus/storefront/cms-structure/page/model/cms-component-data';
But when I run ng serve --verbose I can see that angular/webpack are not probing for it. The probing is just checking for files with a .ts extension, but not a .d.ts extension:
WARNING in [DedupeModuleResolvePlugin]: /Users/i070295/SAPDevelop/vis/commerce-cloud-poc/storefront/node_modules/@spartacus/core/node_modules/tslib/tslib.es6.js -> /Users/i070295/SAPDevelop/vis/commerce-cloud-poc/storefront/node_modules/@spartacus/storefront/node_modules/tslib/tslib.es6.js
ERROR in ./src/app/cms-epd-visual.model.ts
Module not found: Error: Can't resolve '@spartacus/storefront/cms-structure/page/model/cms-component-data' in '/Users/i070295/SAPDevelop/vis/commerce-cloud-poc/storefront/src/app'
resolve '@spartacus/storefront/cms-structure/page/model/cms-component-data' in '/Users/i070295/SAPDevelop/vis/commerce-cloud-poc/storefront/src/app'
Parsed request is a module
using description file: /Users/i070295/SAPDevelop/vis/commerce-cloud-poc/storefront/package.json (relative path: ./src/app)
Field 'browser' doesn't contain a valid alias configuration
resolve as module
looking for modules in /Users/i070295/SAPDevelop/vis/commerce-cloud-poc/storefront
using description file: /Users/i070295/SAPDevelop/vis/commerce-cloud-poc/storefront/package.json (relative path: .)
Field 'browser' doesn't contain a valid alias configuration
using description file: /Users/i070295/SAPDevelop/vis/commerce-cloud-poc/storefront/package.json (relative path: ./@spartacus/storefront/cms-structure/page/model/cms-component-data)
no extension
Field 'browser' doesn't contain a valid alias configuration
/Users/i070295/SAPDevelop/vis/commerce-cloud-poc/storefront/@spartacus/storefront/cms-structure/page/model/cms-component-data doesn't exist
.ts
Field 'browser' doesn't contain a valid alias configuration
/Users/i070295/SAPDevelop/vis/commerce-cloud-poc/storefront/@spartacus/storefront/cms-structure/page/model/cms-component-data.ts doesn't exist
.tsx
Field 'browser' doesn't contain a valid alias configuration
/Users/i070295/SAPDevelop/vis/commerce-cloud-poc/storefront/@spartacus/storefront/cms-structure/page/model/cms-component-data.tsx doesn't exist
.mjs
Field 'browser' doesn't contain a valid alias configuration
/Users/i070295/SAPDevelop/vis/commerce-cloud-poc/storefront/@spartacus/storefront/cms-structure/page/model/cms-component-data.mjs doesn't exist
.js
Field 'browser' doesn't contain a valid alias configuration
/Users/i070295/SAPDevelop/vis/commerce-cloud-poc/storefront/@spartacus/storefront/cms-structure/page/model/cms-component-data.js doesn't exist
as directory
/Users/i070295/SAPDevelop/vis/commerce-cloud-poc/storefront/@spartacus/storefront/cms-structure/page/model/cms-component-data doesn't exist
/Users/i070295/SAPDevelop/vis/commerce-cloud-poc/storefront/src/app/node_modules doesn't exist or is not a directory
/Users/i070295/SAPDevelop/vis/commerce-cloud-poc/storefront/src/node_modules doesn't exist or is not a directory
/Users/i070295/SAPDevelop/vis/commerce-cloud-poc/node_modules doesn't exist or is not a directory
/Users/i070295/SAPDevelop/vis/node_modules doesn't exist or is not a directory
/Users/i070295/SAPDevelop/node_modules doesn't exist or is not a directory
/Users/i070295/node_modules doesn't exist or is not a directory
/Users/node_modules doesn't exist or is not a directory
/node_modules doesn't exist or is not a directory
looking for modules in /Users/i070295/SAPDevelop/vis/commerce-cloud-poc/storefront/node_modules
using description file: /Users/i070295/SAPDevelop/vis/commerce-cloud-poc/storefront/package.json (relative path: ./node_modules)
Field 'browser' doesn't contain a valid alias configuration
using description file: /Users/i070295/SAPDevelop/vis/commerce-cloud-poc/storefront/node_modules/@spartacus/storefront/package.json (relative path: ./cms-structure/page/model/cms-component-data)
no extension
Field 'browser' doesn't contain a valid alias configuration
/Users/i070295/SAPDevelop/vis/commerce-cloud-poc/storefront/node_modules/@spartacus/storefront/cms-structure/page/model/cms-component-data doesn't exist
.ts
Field 'browser' doesn't contain a valid alias configuration
/Users/i070295/SAPDevelop/vis/commerce-cloud-poc/storefront/node_modules/@spartacus/storefront/cms-structure/page/model/cms-component-data.ts doesn't exist
.tsx
Field 'browser' doesn't contain a valid alias configuration
/Users/i070295/SAPDevelop/vis/commerce-cloud-poc/storefront/node_modules/@spartacus/storefront/cms-structure/page/model/cms-component-data.tsx doesn't exist
.mjs
Field 'browser' doesn't contain a valid alias configuration
/Users/i070295/SAPDevelop/vis/commerce-cloud-poc/storefront/node_modules/@spartacus/storefront/cms-structure/page/model/cms-component-data.mjs doesn't exist
.js
Field 'browser' doesn't contain a valid alias configuration
/Users/i070295/SAPDevelop/vis/commerce-cloud-poc/storefront/node_modules/@spartacus/storefront/cms-structure/page/model/cms-component-data.js doesn't exist
as directory
/Users/i070295/SAPDevelop/vis/commerce-cloud-poc/storefront/node_modules/@spartacus/storefront/cms-structure/page/model/cms-component-data doesn't exist
[/Users/i070295/SAPDevelop/vis/commerce-cloud-poc/storefront/@spartacus/storefront/cms-structure/page/model/cms-component-data]
[/Users/i070295/SAPDevelop/vis/commerce-cloud-poc/storefront/@spartacus/storefront/cms-structure/page/model/cms-component-data.ts]
[/Users/i070295/SAPDevelop/vis/commerce-cloud-poc/storefront/@spartacus/storefront/cms-structure/page/model/cms-component-data.tsx]
[/Users/i070295/SAPDevelop/vis/commerce-cloud-poc/storefront/@spartacus/storefront/cms-structure/page/model/cms-component-data.mjs]
[/Users/i070295/SAPDevelop/vis/commerce-cloud-poc/storefront/@spartacus/storefront/cms-structure/page/model/cms-component-data.js]
[/Users/i070295/SAPDevelop/vis/commerce-cloud-poc/storefront/src/app/node_modules]
[/Users/i070295/SAPDevelop/vis/commerce-cloud-poc/storefront/src/node_modules]
[/Users/i070295/SAPDevelop/vis/commerce-cloud-poc/node_modules]
[/Users/i070295/SAPDevelop/vis/node_modules]
[/Users/i070295/SAPDevelop/node_modules]
[/Users/i070295/node_modules]
[/Users/node_modules]
[/node_modules]
[/Users/i070295/SAPDevelop/vis/commerce-cloud-poc/storefront/node_modules/@spartacus/storefront/cms-structure/page/model/cms-component-data]
[/Users/i070295/SAPDevelop/vis/commerce-cloud-poc/storefront/node_modules/@spartacus/storefront/cms-structure/page/model/cms-component-data.ts]
[/Users/i070295/SAPDevelop/vis/commerce-cloud-poc/storefront/node_modules/@spartacus/storefront/cms-structure/page/model/cms-component-data.tsx]
[/Users/i070295/SAPDevelop/vis/commerce-cloud-poc/storefront/node_modules/@spartacus/storefront/cms-structure/page/model/cms-component-data.mjs]
[/Users/i070295/SAPDevelop/vis/commerce-cloud-poc/storefront/node_modules/@spartacus/storefront/cms-structure/page/model/cms-component-data.js]
@ ./src/app/cms-epd-visual.model.ts 1:0-101 4:47-63
@ ./src/app/epd-visual.component.ts
@ ./src/app/app.component.ts
@ ./src/app/app.module.ts
@ ./src/main.ts
@ multi (webpack)-dev-server/client?http://0.0.0.0:0/sockjs-node&sockPath=/sockjs-node ./src/main.ts
I have seen a hack/workaround suggested on the web which is to change the import path to include a .d suffix to attempt to fool the module loading mechanism to treat a .d.ts file as a .ts file, but this does not work with angular 10.1 which rightly points out that 3rd party libraries should include definition files, not uncompiled .ts files:
Module build failed (from ./node_modules/@ngtools/webpack/src/index.js):
Error: /Users/i070295/SAPDevelop/vis/commerce-cloud-poc/storefront/node_modules/@spartacus/storefront/cms-structure/page/model/cms-component-data.d.ts is missing from the TypeScript compilation. Please make sure it is in your tsconfig via the 'files' or 'include' property.
The missing file seems to be part of a third party library. TS files in published libraries are often a sign of a badly packaged library. Please open an issue in the library repository to alert its author and ask them to package the library using the Angular Package Format (https://docs.google.com/document/d/1CZC2rcpxffTDfRDs6p1cfbmKNLA6x5O-NtkJglDaBVs/preview).
at AngularCompilerPlugin.getCompiledFile (/Users/i070295/SAPDevelop/vis/commerce-cloud-poc/storefront/node_modules/@ngtools/webpack/src/angular_compiler_plugin.js:949:23)
at plugin.done.then (/Users/i070295/SAPDevelop/vis/commerce-cloud-poc/storefront/node_modules/@ngtools/webpack/src/loader.js:43:31)
at process._tickCallback (internal/process/next_tick.js:68:7)
@ ./src/app/cms-epd-visual.model.ts 1:0-103 4:47-63
@ ./src/app/epd-visual.component.ts
@ ./src/app/app.component.ts
@ ./src/app/app.module.ts
@ ./src/main.ts
@ multi (webpack)-dev-server/client?http://0.0.0.0:0/sockjs-node&sockPath=/sockjs-node ./src/main.ts
I have also tried the following import statement which doesn't work:
import { CmsComponentData } from '@spartacus/storefront/cms-structure/page/model';
The issue is specific to particular Spartacus definition files.
If I remove the usage of CmsComponentData and instead import and use the following type in exactly the same place in the code, I do not see any issue:
import { B2cStorefrontModule } from '@spartacus/storefront';
Can anyone provide any suggestions as to what I can do to avoid this issue?
Best regards, Sam Garland
