Skip to content

Conversation

@ndelangen
Copy link
Member

@ndelangen ndelangen commented Dec 2, 2025

Closes #33252

What I did

Wrap the string with a resolve

Checklist for Contributors

Testing

The changes in this PR are covered in the following automated tests:

  • stories
  • unit tests
  • integration tests
  • end-to-end tests

Manual testing

  • The Issue does not have a simple repro, so I did this based on experience, no testing
  • We'd need to replicate the user's setup, a monorepo where storybook for nextjs is installed in a monorepo subdir, referencing stories from a root dir, and in that story in the root dir uses nextjs/image
  • A stand-alone repro from the user reporting the issue would be nice.

Here are the reproduction steps provided by the user:

  1. Create a monorepo using the tool(s) of your choice
  2. Create a package and install Storybook with the @storybook/nextjs framework
  3. Create a second package and install next
  4. In the NextJS package, create a component that imports next/image or next/router
  5. In the Storybook package, create a component that imports the component in the NextJS package
  6. Create a Story for the Storybook component
  7. The build should fail

I assume "The build" refers to creating a static version of storybook.

Documentation

  • Add or update documentation reflecting your changes
  • If you are deprecating/removing a feature, make sure to update
    MIGRATION.MD

Checklist for Maintainers

  • When this PR is ready for testing, make sure to add ci:normal, ci:merged or ci:daily GH label to it to run a specific set of sandboxes. The particular set of sandboxes can be found in code/lib/cli-storybook/src/sandbox-templates.ts

  • Make sure this PR contains one of the labels below:

    Available labels
    • bug: Internal changes that fixes incorrect behavior.
    • maintenance: User-facing maintenance tasks.
    • dependencies: Upgrading (sometimes downgrading) dependencies.
    • build: Internal-facing build tooling & test updates. Will not show up in release changelog.
    • cleanup: Minor cleanup style change. Will not show up in release changelog.
    • documentation: Documentation only changes. Will not show up in release changelog.
    • feature request: Introducing a new feature.
    • BREAKING CHANGE: Changes that break compatibility in some way with current major version.
    • other: Changes that don't fit in the above categories.

🦋 Canary release

This PR does not have a canary release associated. You can request a canary release of this pull request by mentioning the @storybookjs/core team here.

core team members can create a canary release here or locally with gh workflow run --repo storybookjs/storybook publish.yml --field pr=<PR_NUMBER>

@ndelangen ndelangen changed the title Fix: Update Webpack image aliases to use fileURLToPath for better resolution NextJS: Alias image to use fileURLToPath for better resolution Dec 2, 2025
@ndelangen ndelangen self-assigned this Dec 2, 2025
@nx-cloud
Copy link

nx-cloud bot commented Dec 2, 2025

View your CI Pipeline Execution ↗ for commit e44ce98

Command Status Duration Result
nx run-many -t compile,check,knip,test,pretty-d... ✅ Succeeded 9m 37s View ↗

☁️ Nx Cloud last updated this comment at 2025-12-02 14:38:53 UTC

@valentinpalkovic valentinpalkovic added the patch:yes Bugfix & documentation PR that need to be picked to main branch label Dec 2, 2025
@valentinpalkovic valentinpalkovic merged commit 28bd2de into next Dec 2, 2025
80 of 85 checks passed
@valentinpalkovic valentinpalkovic deleted the norbert/prevent-monorepo-incorrectly-hoisted-packages-problem branch December 2, 2025 14:27
@github-actions github-actions bot mentioned this pull request Dec 2, 2025
5 tasks
@benmarch
Copy link

benmarch commented Dec 2, 2025

Thanks for the quick patch, @ndelangen! I'm curious if these have a similar effect and will need to be updated as well: https://github.com/storybookjs/storybook/blob/next/code/frameworks/nextjs/src/export-mocks/webpack.ts#L5-L11

@github-actions github-actions bot mentioned this pull request Dec 2, 2025
18 tasks
valentinpalkovic added a commit that referenced this pull request Dec 3, 2025
…ncorrectly-hoisted-packages-problem

NextJS: Alias image to use fileURLToPath for better resolution
(cherry picked from commit 28bd2de)
@github-actions github-actions bot added the patch:done Patch/release PRs already cherry-picked to main/release branch label Dec 3, 2025
@ndelangen
Copy link
Member Author

@benmarch potentially, are those giving you problems in your monorepo setup?

@benmarch
Copy link

benmarch commented Dec 3, 2025

@ndelangen I was getting the same error with next/router, but I just installed the latest package with your changes and I'm not seeing any errors anymore, so I think I'm good, thanks!

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

Labels

bug builder-webpack5 ci:normal 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]: @storybook/nextjs breaks some next imports

4 participants