Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Addon-actions: Fix ESM by upgrading from uuid-browser to uuid #22037

Merged
merged 2 commits into from
Apr 20, 2023

Conversation

misino
Copy link

@misino misino commented Apr 11, 2023

Closes #21916

What I did

The library uuid-browser doesn't support esm, so running storybook with webpack could produce an error Can't resolve 'uuid-browser/v4

How to test

Checklist

  • Make sure your changes are tested (stories and/or unit, integration, or end-to-end tests)
  • Make sure to add/update documentation regarding your changes
  • If you are deprecating/removing a feature, make sure to update
    MIGRATION.MD

Maintainers

  • If this PR should be tested against many or all sandboxes,
    make sure to add the ci:merged or ci:daily GH label to it.
  • Make sure this PR contains one of the labels below.

["cleanup", "BREAKING CHANGE", "feature request", "bug", "documentation", "maintenance", "dependencies", "other"]

The library uuid-browser doesn't support esm, so the start with webpack fails.
@misino misino force-pushed the fix/21916-uuid-browser-not-found branch from cebe3b1 to 59c72ce Compare April 11, 2023 22:17
@socket-security
Copy link

New dependency changes detected. Learn more about Socket for GitHub ↗︎


👍 No new dependency issues detected in pull request

Bot Commands

To ignore an alert, reply with a comment starting with @SocketSecurity ignore followed by a space separated list of package-name@version specifiers. e.g. @SocketSecurity ignore foo@1.0.0 bar@* or ignore all packages with @SocketSecurity ignore-all

Pull request alert summary
Issue Status
Install scripts ✅ 0 issues
Native code ✅ 0 issues
Bin script confusion ✅ 0 issues
Bin script shell injection ✅ 0 issues
Shell access ✅ 0 issues
Uses eval ✅ 0 issues
Unresolved require ✅ 0 issues
Invalid package.json ✅ 0 issues
HTTP dependency ✅ 0 issues
Git dependency ✅ 0 issues
GitHub dependency ✅ 0 issues
New author ✅ 0 issues
Potential typo squat ✅ 0 issues
Known Malware ✅ 0 issues
Telemetry ✅ 0 issues
Protestware/Troll package ✅ 0 issues

📊 Modified Dependency Overview:

➕ Added Package Capability Access +/- Transitive Count Publisher
@types/uuid@9.0.1 None +0 types
uuid@9.0.0 None +0 ctavan

@shilman shilman added bug patch:yes Bugfix & documentation PR that need to be picked to main branch builder-webpack5 labels Apr 16, 2023
@shilman shilman changed the title Fix #21916 - using uuid library instead of uuid-browser Addon-actions: Fix ESM compat by upgrading from uuid-browser to uuid Apr 16, 2023
@shilman shilman changed the title Addon-actions: Fix ESM compat by upgrading from uuid-browser to uuid Addon-actions: Fix ESM by upgrading from uuid-browser to uuid Apr 16, 2023
@@ -117,7 +117,6 @@ const INCLUDE_CANDIDATES = [
'ts-dedent',
'unfetch',
'util-deprecate',
'uuid-browser/v4',
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I wonder if uuid package also needs to be here? It seems that this list has been updated in the past to avoid some issues:

The pull request that created this list in the first place is this one:

That one says that the vite builder was able to be tested with:

yarn task --task smoke-test --template react-vite/default-js --force
yarn task --task smoke-test --template vue3-vite/default-js --force

Maybe worth trying to run that here unless the same tests are also being ran in CI automatically?

The comment where this list gets used is this one:

// We need Vite to precompile these dependencies, because they contain non-ESM code that would break
// if we served it directly to the browser.
include: [...include, ...(config.optimizeDeps?.include || [])],

So it could be that uuid is indeed not necessary to add here if it already ships ESM code?

I'm not that familiar with this code but these are the only worries I would have about these code changes.

I've tested using the uuid package in place of uuid-browser/v4 successfully in our own project where we have manually set a webpack alias for uuid-browser/v4 import to point to this file instead:

// This file acts like a monkeypatch for fixing this issue:
// https://github.com/storybookjs/storybook/issues/21916
//
// We have custom webpack configuration that makes Storybook load
// this file instead of the file from `uuid-browser` package so that
// we can get the imports to work correctly.
//
// Once the issue mentioned above is fixed, this file should be removed.

import { v4 as uuidv4 } from 'uuid';
export default uuidv4;

This workaround has worked for us and usage of uuid package in place of uuid-browser succeeds.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I ran a storybook locally on this branch, and vite didn't warn about this...

@ndelangen ndelangen merged commit c79588c into storybookjs:next Apr 20, 2023
@shilman shilman added the patch:done Patch/release PRs already cherry-picked to main/release branch label Apr 24, 2023
shilman pushed a commit that referenced this pull request Apr 24, 2023
Addon-actions: Fix ESM by upgrading from uuid-browser to uuid
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
addon: actions bug builder-webpack5 patch:done Patch/release PRs already cherry-picked to main/release branch patch:yes Bugfix & documentation PR that need to be picked to main branch
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[Bug]: Module not found: Error: Can't resolve 'uuid-browser/v4'
5 participants