#Vite storybook argv missing

8 messages · Page 1 of 1 (latest)

orchid edge
#

I have an existing CRA app I am trying to migrate to Vite. One of the dependencies is pulling in Colorize and that seems to be trying to access process.argv and I get the following error

TypeError: Cannot read properties of undefined (reading 'indexOf')
at module2.exports (http://localhost:6006/node_modules/.vite-storybook/deps/@api-common_esm_utils.js?v=b9aa83b9:445:32)
at node_modules/@colors/colors/lib/system/supports-colors.js (http://localhost:6006/node_modules/.vite-storybook/deps/@api-common_esm_utils.js?v=b9aa83b9:461:9)
at __require2 (http://localhost:6006/node_modules/.vite-storybook/deps/chunk-LFBQMW2U.js?v=b9aa83b9:19:50)
at node_modules/@colors/colors/lib/colors.js (http://localhost:6006/node_modules/.vite-storybook/deps/@api-common_esm_utils.js?v=b9aa83b9:892:28)
at __require2 (http://localhost:6006/node_modules/.vite-storybook/deps/chunk-LFBQMW2U.js?v=b9aa83b9:19:50)
at node_modules/@colors/colors/safe.js (http://localhost:6006/node_modules/.vite-storybook/deps/@api-common_esm_utils.js?v=b9aa83b9:1029:18)
at __require2 (http://localhost:6006/node_modules/.vite-storybook/deps/chunk-LFBQMW2U.js?v=b9aa83b9:19:50)
at node_modules/logform/dist/colorize.js (http://localhost:6006/node_modules/.vite-storybook/deps/@api-common_esm_utils.js?v=b9aa83b9:1179:18)
at __require2 (http://localhost:6006/node_modules/.vite-storybook/deps/chunk-LFBQMW2U.js?v=b9aa83b9:19:50)
at node_modules/logform/dist/levels.js (http://localhost:6006/node_modules/.vite-storybook/deps/@api-common_esm_utils.js?v=b9aa83b9:1268:20)

Wanted to check if there is a way to initialise argv and is there a way to add source maps Storybooks tsconfig sourcemaps don't seem to be applying?

terse wyvern
#

process is not available in the browser, so it seems like that package is written for node and not browsers. Vite does not polyfill process like webpack does. You can polyfill it manually though, for example by initializing it as a global variable in .storybook/preview-head.html

orchid edge
#

Thanks @terse wyvern ... I ended up rewriting my logger and now all the stories render. The product build isn't working though. I see the Vite Land chats filled with issues around "Unexpected tokens" it seems like Vite is trying to convert es format to es

[commonjs--resolver] Unexpected token (86:57) in /path/component-v2/node_modules/@mui/material/Slider/Slider.js
file: /path/component-v2/node_modules/@mui/material/Slider/Slider.js:86:57
84: }
85: }));
86: process.env.NODE_ENV !== "production" ? SliderRoot.propTypes /* remove-proptypes */ = {
^
87: // ----------------------------- Warning --------------------------------
88: // | These PropTypes are generated from the TypeScript type definitions |
error during build:
SyntaxError: Unexpected token (86:57) in /path/component-v2/node_modules/@mui/material/Slider/Slider.js
at pp$4.raise (file:///path/component-v2/node_modules/vite/node_modules/rollup/dist/es/shared/rollup.js:20337:13)
at pp$9.unexpected (file:////component-v2/node_modules/vite/node_modules/rollup/dist/es/shared/rollup.js:17638:8)
at pp$9.semicolon (file:///path/component-v2/node_modules/vite/node_modules/rollup/dist/es/shared/rollup.js:17615:66)

terse wyvern
#

Are you using sb 6.5 or 7 BTW?

orchid edge
#

Using 7.0.0-beta.32

terse wyvern
bleak kite
#

Any updates on this. I'm running into the same issue.

terse wyvern
#

I did not get a reproduction, @bleak kite maybe you can put one togehter?