Our company is currently focusing on developing our design system as a package that can be easily installed in multiple projects. While the process of building the package is successful, we are facing an issue once it is installed and something is imported from it. The error message we encounter is as follows:
ERROR in ../design-system/dist/main.js 5:0-54
Module not found: Error: Can't resolve '@mui/material/Tab' in '/Users/***/***/minimal-example/frontends/design-system/dist'
Did you mean 'index.js'?
BREAKING CHANGE: The request '@mui/material/Tab' failed to resolve only because it was resolved as fully specified
(probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '*.mjs' file, or a '*.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.
To replicate this issue, I have created a small project which you can access here: https://github.com/antoniogamizbadger/minimal-example
To reproduce the problem, simply clone the repository and follow these steps:
From the design-system directory:
npm ci
npm run build
From the package directory:
npm ci
npm start
We have attempted various solutions but have been unable to pinpoint the exact cause of this issue. Despite the insights provided by the error message, resolving it has proven challenging. Do you have any suggestions on what configurations we should adjust to address this straightforward scenario?