Open
Description
openedon Oct 4, 2024
Package
@carbon/web-components
Browser
Chrome
Package version
v11.67.1
React version
No response
Description
When using a pretty out-of-the-box Webpack 5 configuration, trying to bundle icon modules from @carbon/web-components fails with the following error:
ERROR in ./node_modules/@carbon/web-components/es/icons/play--outline/20.js 9:0-53
Module not found: Error: Can't resolve '../../globals/directives/spread' in '/Users/m4olivei/projects/play/cwc-webpack-play/node_modules/@carbon/web-components/es/icons/play--outline'
Did you mean 'spread.js'?
BREAKING CHANGE: The request '../../globals/directives/spread' 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.
resolve '../../globals/directives/spread' in '/Users/m4olivei/projects/play/cwc-webpack-play/node_modules/@carbon/web-components/es/icons/play--outline'
using description file: /Users/m4olivei/projects/play/cwc-webpack-play/node_modules/@carbon/web-components/package.json (relative path: ./es/icons/play--outline)
Field 'browser' doesn't contain a valid alias configuration
using description file: /Users/m4olivei/projects/play/cwc-webpack-play/node_modules/@carbon/web-components/package.json (relative path: ./es/globals/directives/spread)
Field 'browser' doesn't contain a valid alias configuration
/Users/m4olivei/projects/play/cwc-webpack-play/node_modules/@carbon/web-components/es/globals/directives/spread doesn't exist
@ ./src/index.js 2:0-78 6:36-47
Reproduction/example
https://stackblitz.com/github/m4olivei/carbon-webpack-play?file=src%2Findex.js
Steps to reproduce
- Import an icon from the
@carbon/web-componentspackage, eg.import PlayOutline from '@carbon/web-components/es/icons/play--outline/20.js'; - Attempt to bundle module with the above import with Webpack 5
The above error message is produced.
You can get around this in some case by using resolve.fullySpecified. However, I've found in more complicated cases, like the one we're dealing with, it's not sufficient.
Suggested Severity
Severity 3 = User can complete task, and/or has a workaround within the user experience of a given component.
Application/PAL
ibm.com
Code of Conduct
- I agree to follow this project's Code of Conduct
- I checked the current issues for duplicate problems
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Metadata
Assignees
Labels
Type
Projects
Status
🕵️♀️ Triage