Automigration: Correctly apply the wrap-require automigration in ESM modules

[valentinpalkovic]

Relates #31415

What I did

The wrap-require automigration was applying a helper function to wrap addon and framework definitions so that they can be properly resolved in package managers with a strict dependency requirement.

The automigration was transforming a file like this:

const config = {
  stories: ['../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
  addons: [
    {
      name: '@chromatic-com/storybook',
      options: {},
    },
    '@storybook/addon-vitest',
  ],
  framework: {
    name: '@storybook/angular',
    options: {},
  },
  docs: {
    autodocs: 'tag',
  },
};
export default config;

To this:

import { dirname, join } from "path";

const config = {
    stories: ['../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
    addons: [
      {
        name: getAbsolutePath("@chromatic-com/storybook"),
        options: {},
      },
      getAbsolutePath("@storybook/addon-vitest"),
    ],
    framework: {
      name: getAbsolutePath("@storybook/angular"),
      options: {},
    },
    docs: {
      autodocs: 'tag',
    },
  };
export default config;

function getAbsolutePath(value) {
  return dirname(require.resolve(join(value, "package.json")));
}

In Node.js v24, though, .storybook/main.ts ESM module is tre ESM module and therefore CJS globals like require are not available. I have enhanced the automigration to add the following:

import { createRequire } from "node:module";
+ import { dirname, join } from "path";
const config = {
    stories: ['../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
    addons: [
      {
        name: getAbsolutePath("@chromatic-com/storybook"),
        options: {},
      },
      getAbsolutePath("@storybook/addon-vitest"),
    ],
    framework: {
      name: getAbsolutePath("@storybook/angular"),
      options: {},
    },
    docs: {
      autodocs: 'tag',
    },
  };
export default config;
+ const require = createRequire(import.meta, url);

function getAbsolutePath(value) {
    return dirname(require.resolve(join(value, "package.json")));
}

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

This section is mandatory for all contributions. If you believe no manual test is necessary, please state so explicitly. Thanks!

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 pull request has been released as version 0.0.0-pr-31420-sha-a3613a15. Try it out in a new sandbox by running npx [email protected] sandbox or in an existing project with npx [email protected] upgrade.

More information

Published version	0.0.0-pr-31420-sha-a3613a15
Triggered by	@valentinpalkovic
Repository	storybookjs/storybook
Branch	valentin/make-wrap-pnp-automigration-node-24-compatible
Commit	a3613a15
Datetime	Thu May 8 09:53:53 UTC 2025 (1746698033)
Workflow run	14903718880

To request a new release of this pull request, mention the @storybookjs/core team.

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

Greptile Summary

Based on the provided files and pull request information, I'll create a concise summary of the changes:

Updates the wrap-require automigration to properly handle ESM modules in Node.js v24 environments, particularly focusing on module resolution in strict dependency contexts.

• Fixed critical bug in wrap-require.ts where import.meta.url was incorrectly referenced as import.meta, url
• Added createRequire import from node:module for ESM compatibility in .storybook/main.ts
• Updated test snapshots in wrap-require.test.ts to verify ESM module handling
• Made doesVariableOrFunctionDeclarationExist exportable in wrap-require-utils.ts for better module checking

[greptile-apps]

_{3 file(s) reviewed, 3 comment(s)
Edit PR Review Bot Settings | Greptile}

[greptile-apps]

logic: Syntax error in createRequire call - 'import.meta, url' should be 'import.meta.url'

Suggested change

	const require = createRequire(import.meta, url);
	const require = createRequire(import.meta.url);

[nx-cloud]

View your CI Pipeline Execution ↗ for commit a3613a1.

Command	Status	Duration	Result
nx run-many -t build --parallel=3	✅ Succeeded	1m 42s	View ↗

---

☁️ Nx Cloud last updated this comment at 2025-05-08 09:51:51 UTC