builder-vite
builder-vite copied to clipboard
storybookjs
[Bug] Build fails with react-docgen-typescript - [rollup-plugin-dynamic-import-variables] Unexpected token
Describe the bug
Build failing when using react-docgen-typescript.
Steps to reproduce the behavior
latest vite, storybook and vite builder.
"vite": "2.9.1" "@storybook/builder-vite": "^0.1.28" all "@storybook" modules at 6.4.21 storybook config file
const config = {
typescript: {
reactDocgen: 'react-docgen-typescript',
check: true,
},
stories,
addons: [
'@storybook/addon-links',
'@storybook/addon-docs',
'@storybook/addon-controls',
'@storybook/addon-actions',
'@storybook/addon-backgrounds',
'@storybook/addon-viewport',
'@storybook/addon-toolbars',
'@storybook/addon-measure',
'@storybook/addon-outline',
'@storybook/theming',
],
framework: '@storybook/react',
features: {
// Storyshots is not currently compatible with the v7 store.
// However, we can use the following workaround to opt-out of the v7 store when running storyshots
// https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#storyshots-compatibility-in-the-v7-store
// https://github.com/storybookjs/storybook/issues/16939
storyStoreV7: !global.navigator?.userAgent?.match?.('jsdom'),
},
core: {
builder: '@storybook/builder-vite',
},
async viteFinal(config, { configType }) {
if (config.optimizeDeps) {
config.optimizeDeps.include = [...config.optimizeDeps.include, ...coreJsModules, ...deps];
} else {
config.optimizeDeps = {
include: [...coreJsModules, ...deps],
};
}
if (alias) {
config.resolve.alias = alias;
}
if (configType === 'DEVELOPMENT') {
config.define = {
...config.define,
global: 'window',
};
}
config.plugins = config.plugins.filter(({ name }) => name !== 'mock-core-js');
return config;
},
}
Expected behavior
The build should be compiled or at least present a meaningful error message
Screenshots and/or logs
#36 [test 20/22] RUN yarn compile
#36 sha256:14854e81c02ccd8fc622d62d86dc9eef1669dfd1328ed7cbea84177beacfe0de
#36 0.320 yarn run v1.22.15
#36 0.387 $ build-storybook -c .storybook -o dist --quiet
#36 3.199 info @storybook/react v6.4.21
#36 3.200 info
#36 3.205 info => Cleaning outputDir: /src/dist
#36 4.539 info => Loading presets
#36 6.145 info => Compiling manager..
#36 28.06 vite v2.9.1 building for production...
#36 28.16 transforming...
#36 47.46 ✓ 578 modules transformed.
#36 47.46 [rollup-plugin-dynamic-import-variables] Unexpected token (83:11)
#36 47.46 file: /src/workspaces/styleguide/components/progress/LinearProgress/LinearProgress.component.tsx:83:11
#36 47.50 ERR! SyntaxError: Unexpected token (83:11)
#36 47.50 ERR! at Parser.pp$4.raise (/src/node_modules/rollup/dist/shared/rollup.js:19596:13)
#36 47.50 ERR! at Parser.pp$9.unexpected (/src/node_modules/rollup/dist/shared/rollup.js:16911:8)
#36 47.50 ERR! at Parser.pp$9.semicolon (/src/node_modules/rollup/dist/shared/rollup.js:16888:66)
#36 47.50 ERR! at Parser.pp$8.parseExpressionStatement (/src/node_modules/rollup/dist/shared/rollup.js:17371:8)
#36 47.50 ERR! at Parser.pp$8.parseStatement (/src/node_modules/rollup/dist/shared/rollup.js:17104:24)
#36 47.50 ERR! at Parser.pp$8.parseBlock (/src/node_modules/rollup/dist/shared/rollup.js:17387:21)
#36 47.51 ERR! at Parser.pp$8.parseTryStatement (/src/node_modules/rollup/dist/shared/rollup.js:17290:21)
#36 47.51 ERR! at Parser.pp$8.parseStatement (/src/node_modules/rollup/dist/shared/rollup.js:17062:34)
#36 47.51 ERR! at Parser.pp$8.parseTopLevel (/src/node_modules/rollup/dist/shared/rollup.js:16968:21)
#36 47.51 ERR! at Parser.parse (/src/node_modules/rollup/dist/shared/rollup.js:16741:15)
#36 47.51 ERR! at Function.parse (/src/node_modules/rollup/dist/shared/rollup.js:16791:35)
#36 47.51 ERR! at Graph.contextParse (/src/node_modules/rollup/dist/shared/rollup.js:22866:38)
#36 47.51 ERR! at Object.transform (/src/node_modules/vite/dist/node/chunks/dep-611778e0.js:17562:27)
#36 47.51 ERR! at /src/node_modules/rollup/dist/shared/rollup.js:22740:25
#36 47.51 ERR! at processTicksAndRejections (node:internal/process/task_queues:96:5)
#36 47.51 ERR! SyntaxError: Unexpected token (83:11)
#36 47.51 ERR! at Parser.pp$4.raise (/src/node_modules/rollup/dist/shared/rollup.js:19596:13)
#36 47.51 ERR! at Parser.pp$9.unexpected (/src/node_modules/rollup/dist/shared/rollup.js:16911:8)
#36 47.51 ERR! at Parser.pp$9.semicolon (/src/node_modules/rollup/dist/shared/rollup.js:16888:66)
#36 47.51 ERR! at Parser.pp$8.parseExpressionStatement (/src/node_modules/rollup/dist/shared/rollup.js:17371:8)
#36 47.51 ERR! at Parser.pp$8.parseStatement (/src/node_modules/rollup/dist/shared/rollup.js:17104:24)
#36 47.51 ERR! at Parser.pp$8.parseBlock (/src/node_modules/rollup/dist/shared/rollup.js:17387:21)
#36 47.51 ERR! at Parser.pp$8.parseTryStatement (/src/node_modules/rollup/dist/shared/rollup.js:17290:21)
#36 47.51 ERR! at Parser.pp$8.parseStatement (/src/node_modules/rollup/dist/shared/rollup.js:17062:34)
#36 47.51 ERR! at Parser.pp$8.parseTopLevel (/src/node_modules/rollup/dist/shared/rollup.js:16968:21)
#36 47.51 ERR! at Parser.parse (/src/node_modules/rollup/dist/shared/rollup.js:16741:15)
#36 47.51 ERR! at Function.parse (/src/node_modules/rollup/dist/shared/rollup.js:16791:35)
#36 47.51 ERR! at Graph.contextParse (/src/node_modules/rollup/dist/shared/rollup.js:22866:38)
#36 47.51 ERR! at Object.transform (/src/node_modules/vite/dist/node/chunks/dep-611778e0.js:17562:27)
#36 47.51 ERR! at /src/node_modules/rollup/dist/shared/rollup.js:22740:25
#36 47.51 ERR! at processTicksAndRejections (node:internal/process/task_queues:96:5) {
#36 47.51 ERR! pos: 1889,
#36 47.51 ERR! loc: Position { line: 83, column: 11 },
#36 47.51 ERR! raisedAt: 1900,
#36 47.51 ERR! code: 'PLUGIN_ERROR',
#36 47.51 ERR! plugin: 'rollup-plugin-dynamic-import-variables',
#36 47.51 ERR! hook: 'transform',
#36 47.51 ERR! id: '/src/workspaces/styleguide/components/progress/LinearProgress/LinearProgress.component.tsx',
#36 47.51 ERR! watchFiles: [
#36 47.51 ERR! '/src/iframe.html',
Environment
- OS: docker linux
- Node.js version: v16.13.1
- NPM version: yarn v1
Additional context
the file with the error is not the actual problem. I've tried to change the content and remove the whole file, the problem continues to other files. also, there are no dynamic imports there. (I do have dynamic imports in other places though)
"@storybook/addon-actions": "6.4.21",
"@storybook/addon-essentials": "6.4.21",
"@storybook/addon-interactions": "6.4.21",
"@storybook/addon-links": "6.4.21",
"@storybook/addon-storyshots": "6.4.21",
"@storybook/addon-storyshots-puppeteer": "6.4.21",
"@storybook/addon-storysource": "6.4.21",
"@storybook/addons": "6.4.21",
"@storybook/cli": "6.4.21",
"@storybook/react": "6.4.21",
"@storybook/theming": "6.4.21",
@AlonMiz thanks for the report. This is going to be a bit tricky to troubleshoot without a reproduction. Any chance you could either share a link to your repo if it's open source, or create another repo that reproduces this issue?
In the meantime, maybe @joshwooding do you have any thoughts on what could be causing this?
Thanks, @IanVS, I totally understand. reproduction is essential, but I'm afraid it would be almost impossible to achieve. i mean, it took me some time to realize that the issue is when I enable "react-docgen-typescript". the main issue is that we have a large private monorepo and it's hard to reproduce the behavior. i can add another important fact, that the build failure is only happening in our docker build runtime. this "might" indicate that it is related to different versions on some deep dependencies. as in local it does work (might be due to how yarn hoists the dependencies) I hope that at least this issue is now searchable and if anyone encounters that, we can try to figure it out together. ill post if I have some news.
Thanks, that's all great information to know, and yeah, hopefully either you or someone else hitting the issue will be able to figure out what's going on. I'll keep my eyes open for any similar reports.