[Bug] v7 ts-transformer is not being applied
unional opened this issue · comments
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.
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.
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
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
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.
If you can share a link to a reproduction, I can try taking a look to see what might be going on.
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.