[Bug] v7 ts-transformer is not being applied

[unional]

What version of vite are you using?

7.0.0-beta.15

System info and storybook versions

Environment Info:

System:
OS: macOS 12.6.1
CPU: (10) arm64 Apple M1 Pro
Binaries:
Node: 16.14.2 - ~/.nvm/versions/node/v16.14.2/bin/node
npm: 8.5.0 - ~/.nvm/versions/node/v16.14.2/bin/npm
Browsers:
Chrome: 108.0.5359.124
Firefox: 108.0.1
Safari: 16.2
npmPackages:
@storybook/addon-actions: ^7.0.0-beta.15 => 7.0.0-beta.15
@storybook/addon-backgrounds: ^7.0.0-beta.15 => 7.0.0-beta.15
@storybook/addon-console: ~1.2.3 => 1.2.3
@storybook/addon-docs: ^7.0.0-beta.15 => 7.0.0-beta.15
@storybook/addon-essentials: ^7.0.0-beta.15 => 7.0.0-beta.15
@storybook/addon-interactions: ^7.0.0-beta.15 => 7.0.0-beta.15
@storybook/addon-links: ^7.0.0-beta.15 => 7.0.0-beta.15
@storybook/addon-measure: ^7.0.0-beta.15 => 7.0.0-beta.15
@storybook/addon-outline: ^7.0.0-beta.15 => 7.0.0-beta.15
@storybook/addon-storysource: ~7.0.0-beta.15 => 7.0.0-beta.15
@storybook/addons: ~7.0.0-beta.15 => 7.0.0-beta.15
@storybook/channel-postmessage: ^7.0.0-beta.15 => 7.0.0-beta.15
@storybook/channel-websocket: ^7.0.0-beta.15 => 7.0.0-beta.15
@storybook/client-api: ^7.0.0-beta.15 => 7.0.0-beta.15
@storybook/jest: ~0.0.11-next.0 => 0.0.11-next.0
@storybook/preview-web: ^7.0.0-beta.15 => 7.0.0-beta.15
@storybook/react: ^7.0.0-beta.15 => 7.0.0-beta.15
@storybook/react-vite: ^7.0.0-beta.15 => 7.0.0-beta.15
@storybook/test-runner: ~0.10.0-next.3 => 0.10.0-next.3
@storybook/testing-library: ^0.0.14-next.1 => 0.0.14-next.1

Describe the Bug

I'm using TypeScript and FormatJS, and using ts-transformer to inject id.

In vite.config.js, it is working correctly:

{
  build: {
    rollupOptions: {
      plugins: [
        typescript({
          tsconfig: 'tsconfig.vite.json',
          transformers: {
            before: [
              transform({
                overrideIdFn: '[sha512:contenthash:base64:6]',
                ast: true
              })
            ]
          }
        })
      ],
}

But this setting within .storybook/main.cjs does not work:

async viteFinal(config) {
    return mergeConfig(config, {
      // customize the Vite config here
      plugins: [
        typescript({
          tsconfig: 'tsconfig.storybook.json',
          transformers: {
            before: [transform({
              overrideIdFn: '[sha512:contenthash:base64:6]',
              ast: true
            })]
          }
        }),
      ],
    });
  }

Gets the typical error from formatjs about missing id:

[@formatjs/intl] An `id` must be provided to format a message. You can either:
1. Configure your build toolchain with [babel-plugin-formatjs](https://formatjs.io/docs/tooling/babel-plugin)
or [@formatjs/ts-transformer](https://formatjs.io/docs/tooling/ts-transformer) OR
2. Configure your `eslint` config to include [eslint-plugin-formatjs](https://formatjs.io/docs/tooling/linter#enforce-id)
to autofix this issue

Link to Minimal Reproducible Example

No response

Participation

• I am willing to submit a pull request for this issue.

[IanVS]

I'm a little bit confused, you say you're using vite version 7.0.0-beta.15 (I think you mean this is your storybook version, vite only goes up to 4.0.x right now). But your @storybook packages listed out are at 6.5. You may need to run npx sb@next upgrade --prerelease to upgrade to the 7.0 beta. And once you do, you can remove the viteFinal, since storybook will automatically pick up your vite config.

[unional]

Sorry, this is the updated env info

Environment Info:

  System:
    OS: macOS 12.6.1
    CPU: (10) arm64 Apple M1 Pro
  Binaries:
    Node: 16.14.2 - ~/.nvm/versions/node/v16.14.2/bin/node
    npm: 8.5.0 - ~/.nvm/versions/node/v16.14.2/bin/npm
  Browsers:
    Chrome: 108.0.5359.124
    Firefox: 108.0.1
    Safari: 16.2
  npmPackages:
    @storybook/addon-actions: ^7.0.0-beta.15 => 7.0.0-beta.15 
    @storybook/addon-backgrounds: ^7.0.0-beta.15 => 7.0.0-beta.15 
    @storybook/addon-console: ~1.2.3 => 1.2.3 
    @storybook/addon-docs: ^7.0.0-beta.15 => 7.0.0-beta.15 
    @storybook/addon-essentials: ^7.0.0-beta.15 => 7.0.0-beta.15 
    @storybook/addon-interactions: ^7.0.0-beta.15 => 7.0.0-beta.15 
    @storybook/addon-links: ^7.0.0-beta.15 => 7.0.0-beta.15 
    @storybook/addon-measure: ^7.0.0-beta.15 => 7.0.0-beta.15 
    @storybook/addon-outline: ^7.0.0-beta.15 => 7.0.0-beta.15 
    @storybook/addon-storysource: ~7.0.0-beta.15 => 7.0.0-beta.15 
    @storybook/addons: ~7.0.0-beta.15 => 7.0.0-beta.15 
    @storybook/channel-postmessage: ^7.0.0-beta.15 => 7.0.0-beta.15 
    @storybook/channel-websocket: ^7.0.0-beta.15 => 7.0.0-beta.15 
    @storybook/client-api: ^7.0.0-beta.15 => 7.0.0-beta.15 
    @storybook/jest: ~0.0.11-next.0 => 0.0.11-next.0 
    @storybook/preview-web: ^7.0.0-beta.15 => 7.0.0-beta.15 
    @storybook/react: ^7.0.0-beta.15 => 7.0.0-beta.15 
    @storybook/react-vite: ^7.0.0-beta.15 => 7.0.0-beta.15 
    @storybook/test-runner: ~0.10.0-next.3 => 0.10.0-next.3 
    @storybook/testing-library: ^0.0.14-next.1 => 0.0.14-next.1 

It's in a monorepo and I ran the npx sb@next info at root. So it gets wrong info

[unional]

I tried commenting out the viteFinal in .storybook/main.cjs and it still the same.

I tried to mess up my vite.config.ts to confirm it is loaded, but seems like it does not.

i.e. I have changed the vite.config.ts to:

export default defineConfig({
  ...
  build: {
    rollupOptions: {
      plugins: [
        typescript({
          tsconfig: '...',
          transformers: {
            before: [
              transform({
                 overrideIdFn: '[shaxxx]' // <--- mess this up

When building with vite, this fails as expected.
But storybook still starts with the formatjs an 'is' must be provided error.

btw the vite build will fail with this:

[typescript] Digest method not supported
error during build:
Error: Digest method not supported

[unional]

I have also tried taking out the ts-transformer and add a .babelrc:

{
  "plugins": [
    [
      "formatjs",
      {
        "idInterpolationPattern": "[sha512:contenthash:base64:6]",
        "ast": true
      }
    ]
  ]
}

Also doesn't work.

[IanVS]

If you can share a link to a reproduction, I can try taking a look to see what might be going on.

[unional]

Sure, I'm working on something else at the moment. I will try to create a repro in a few days. If I found out more, will also update the issue.