Our company is currently in the process of developing a design system that can be easily integrated into multiple projects as a package. While building the package has been successful, we encounter an error after installing it and trying to import the theme:
ERROR in ./node_modules/design-system/dist/esm/index.js 4:0-51
Module not found: Error: Can't resolve '@mui/material/styles' in '/Users/***/***/minimal-example/frontends/drupe-mo/node_modules/design-system/dist/esm'
Did you mean 'index.js'?
BREAKING CHANGE: The request '@mui/material/styles' 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 the 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 project and follow these steps:
From the design-system directory:
npm ci
npm run build
From the package directory:
npm ci
# this is to avoid a symlink being created
rm -rf node_modules/design-system && npm install --install-links ../design-system
We have attempted various solutions, but are currently unsure of the root cause of this error. The error message provides some clues, but our attempts to resolve it have been unsuccessful. I previously asked a question on Stack Overflow here, but the suggested solution did not work in this case.
Note: We are using Rollup to build the design-system package, and importing components works without issues. The problem arises when importing the theme from the built package.
Any suggestions on what configuration changes we should make to resolve this issue?
Update
Changing the import statement from:
import { createTheme } from '@mui/material/styles';
to:
import { createTheme } from '@mui/material';
does not resolve the issue.