Failed to build Typescript Plugin after v4.5.1; Cannot find module design-system/icons

[HenryBrown0]

Bug report

Required System information

• Node.js version: v18 (also checked with v16)
• NPM version: Using Yarn v1.22.19
• Strapi version: v4.5.2 (tested and working in v4.5.1)
• Database: postgreSQL
• Operating system: macOS v12.5

Describe the bug

Unable to use @strapi/icons or @strapi/design-system in custom typescript plugins after v4.5.1 as the modules/types cannot be found.

Cannot find module '@strapi/design-system/Box' or its corresponding type declarations.
Cannot find module '@strapi/icons/Puzzle' or its corresponding type declarations.

Steps to reproduce the behavior

1. Create a new strapi project (select quickstart, I've also tried manual configuration with Typescript):

   yarn create strapi-app my-project
   

2. Stop strapi running and change directory into the new project.
3. Create a Typescript plugin (select typescript):

   yarn strapi generate plugin my-plugin
   

4. (optional) Enable the plugin:

   // ./config/plugins.js
   module.exports = {
     'my-plugin': {
       enabled: true,
       resolve: './src/plugins/my-plugin'
     },
   }

5. . Build the application (fails):

   yarn build
   

Expected behavior

Expect strapi to build successfully.

Screenshots

n/a

Code snippets

Cannot find module '@strapi/icons/Puzzle' or its corresponding type declarations.
Cannot find module '@strapi/design-system/Box' or its corresponding type declarations.

Additional context

If you downgrade strapi dependencies to v4.5.1 the build is successful.

May relate to: #14925

Adding @strapi/icons or @strapi/design-system to either/both the project/plugin does not solve the issue.

[joshuaellis]

The solution to this would be to add some sort of custom.d.ts file that declares:

declare module '@strapi/design-system/*';
declare module '@strapi/icons/*';

Because right now there are no types, but we're using the exports property of the package.json to direct @strapi/design-system/Box to @strapi/design-system/dist/Box where the TS compiler can't follow right now.

[Yizhachok]

@joshuaellis there is a combination of errors (not only with import)

Can you suggest how to fix this? This happens on clean project.
Also I think that instead of using VoidFunctionComponent we need to use FC

[Yizhachok]

The solution to this would be to add some sort of custom.d.ts file that declares:

declare module '@strapi/design-system/*';
declare module '@strapi/icons/*';

Because right now there are no types, but we're using the exports property of the package.json to direct @strapi/design-system/Box to @strapi/design-system/dist/Box where the TS compiler can't follow right now.

Also, this trick unfortunately didn't help :(

[derrickmehaffy]

Hello, we are marking this issue as closed as it has been combined into a centralized Tracking issue for all Typescript issues.

Please see: #15225

If you believe this was merged into the tracking issue in error please let us know. For any further debug information please use the tracking issue.

Thanks!

[jcAtRsi]

Looks like the design system v2 items (pagelink, nextlink, previouslink, pagination) are still impacted by this. The icons part does work now (as of 4.5.6)

[matepaiva]

i don't understand why I have this error only at my server. If I try to build the project locally, it works fine. If I try to build at my digitalocean server, it throws this error. Both my server and my local servers are using the same version for node (v18.12.1) and for npm (6.14.18).

If someone think about a possible reason, please illuminate me!

[SvenWesterlaken]

Might be related to this issue @matepaiva