Skip to content

Conversation

@saraDahanCode
Copy link
Collaborator

Related to: #2693

What I did

Added prism-esm to the default importmap in web-dev-server.config.js to enable client-side highlighting for code-block.

Testing Instructions

Run npm run dev and open the client-side-highlighting demo inside code-block to verify client highlighting works correctly.

Notes to Reviewers

Extracted from POC PR #2725.

@changeset-bot
Copy link

changeset-bot bot commented Nov 12, 2025

⚠️ No Changeset found

Latest commit: e3433d8

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

@netlify
Copy link

netlify bot commented Nov 12, 2025

Deploy Preview for red-hat-design-system ready!

Name Link
🔨 Latest commit e3433d8
🔍 Latest deploy log https://app.netlify.com/projects/red-hat-design-system/deploys/691e198321f1770008711ab2
😎 Deploy Preview https://deploy-preview-2735--red-hat-design-system.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

@saraDahanCode
Copy link
Collaborator Author

@zeroedin @bennypowers Hi,
I'd be happy if you could review this PR.
Thanks

@Gili-Greenberger
Copy link
Collaborator

Gili-Greenberger commented Nov 19, 2025

@saraDahanCode I've reviewed the changes in web-dev-server.config.js and indeed they work as expected.
Testing results:
When I ran the deploy-preview, I can see that the error that occurred in main has been resolved. The "prism-esm" module is now properly fixed.

The code correctly implements what @Zerodin suggested - adding prism-esm and its related paths to the importmap in web-dev-server.config.js. This fixes the issue where couldn't find the prism-esm module.

During testing I saw errors related to @floating-ui/utils still resolving to null.
@bennypowers can we fix this by adding something like this to web-dev-server.config.js ?

`@floating-ui/utils': '/node_modules/@floating-ui/utils/dist/floating-ui.utils.browser.min.mjs,`

@bennypowers
Copy link
Member

patternfly/patternfly-elements#2945 removed the dependency on floating-ui. This released in @patternfly/pfe-core 5.0.4. We can update to that version and remove floating-ui from these locations in RHDS

❯ rg floating-ui
web-dev-server.config.js
63:      '@floating-ui/dom': '/node_modules/@floating-ui/dom/dist/floating-ui.dom.browser.min.mjs',
64:      '@floating-ui/core': '/node_modules/@floating-ui/core/dist/floating-ui.core.browser.min.mjs',

eleventy.config.ts
144:      '@floating-ui/core',
145:      '@floating-ui/dom',

docs/get-started/developers/installation.md
75:          "@floating-ui/core": "https://www.redhatstatic.com/dssf-001/v2/@floating-ui/core@{{ packageinfo.packages["node_modules/@floating-ui/core"].version }}/dist/floating-ui.core.mjs",
76:          "@floating-ui/dom": "https://www.redhatstatic.com/dssf-001/v2/@floating-ui/dom@{{ packageinfo.packages["node_modules/@floating-ui/dom"].version }}/dist/floating-ui.dom.mjs",
77:          "@floating-ui/utils": "https://www.redhatstatic.com/dssf-001/v2/@floating-ui/utils@{{ packageinfo.packages["node_modules/@floating-ui/utils"].version }}/dist/floating-ui.utils.mjs",
78:          "@floating-ui/utils/dom": "https://www.redhatstatic.com/dssf-001/v2/@floating-ui/utils@{{ packageinfo.packages["node_modules/@floating-ui/utils"].version }}/dist/floating-ui.utils.dom.mjs",
168:          "@floating-ui/core": "https://cdn.jsdelivr.net/npm/@floating-ui/core@{{ packageinfo.packages["node_modules/@floating-ui/core"].version }}/dist/floating-ui.core.mjs",
169:          "@floating-ui/dom": "https://cdn.jsdelivr.net/npm/@floating-ui/dom@{{ packageinfo.packages["node_modules/@floating-ui/dom"].version }}/dist/floating-ui.dom.mjs",
170:          "@floating-ui/utils": "https://cdn.jsdelivr.net/npm/@floating-ui/utils@{{ packageinfo.packages["node_modules/@floating-ui/utils"].version }}/dist/floating-ui.utils.mjs",
171:          "@floating-ui/utils/dom": "https://cdn.jsdelivr.net/npm/@floating-ui/utils@{{ packageinfo.packages["node_modules/@floating-ui/utils"].version }}/dist/floating-ui.utils.dom.mjs",

@saraDahanCode
Copy link
Collaborator Author

@bennypowers Hi,
I’ve implemented it,
but once I remove the dependency on floating-ui the runtime fails and I get an error:

Uncaught TypeError: Failed to resolve module specifier "@floating-ui/dom". Relative references must start with either "/", "./", or "../".

@bennypowers
Copy link
Member

@bennypowers Hi, I’ve implemented it, but once I remove the dependency on floating-ui the runtime fails and I get an error:

Uncaught TypeError: Failed to resolve module specifier "@floating-ui/dom". Relative references must start with either "/", "./", or "../".

You still have pfe-core 5.0.3: https://github.com/saraDahanCode/red-hat-design-system/blob/e3433d895f2d5fbdcbf4d7024d83b5ae6d4fc69c/package.json#L288

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

Status: No status

Development

Successfully merging this pull request may close these issues.

3 participants