Portfolio

History

storybook v6와 v7의 차이점을 명확하게 알고 작업해야겠다는 생각이 들었다.

여러가지 이슈들이 발생하였으나, 스토리북은 이전에 발생했던 이슈를 해결하기 위해 추가하였던 설정을 제거하면 제대로 동작하는 등의 요상한 경우가 많다..

Issue

.stories.mdx 파일의 경우, unexpected token ‘<’ 오류가 발생하는 현상

.mdx 파일의 경우, 아래와 같은 에러가 발생하는 현상


5:33:27 PM [vite] ✨ new dependencies optimized: @emotion/react/jsx-dev-runtime
5:33:27 PM [vite] ✨ optimized dependencies changed. reloading
5:33:27 PM [vite] Internal server error: Failed to parse source for import analysis because the content contains invalid JS syntax. If you are using JSX, make sure to name the file with the .jsx or .tsx extension.
  Plugin: vite:import-analysis
  File: /Users/user/Documents/workspace/ladb-ui/libs/ui/src/stories/Introduction.mdx:45:71
  43 |  ## 📝 License
  44 |  
  45 |  @linecorp/ladb-ui is made available under the [MIT License](./LICENSE)
     |                                                                        ^
  46 |  
      at formatError (file:///Users/user/Documents/workspace/ladb-ui/node_modules/.pnpm/vite@5.0.13_@types+node@18.16.9/node_modules/vite/dist/node/chunks/dep-dh3wN_2j.js:63773:46)
      at TransformContext.error (file:///Users/user/Documents/workspace/ladb-ui/node_modules/.pnpm/vite@5.0.13_@types+node@18.16.9/node_modules/vite/dist/node/chunks/dep-dh3wN_2j.js:63767:19)
      at TransformContext.transform (file:///Users/user/Documents/workspace/ladb-ui/node_modules/.pnpm/vite@5.0.13_@types+node@18.16.9/node_modules/vite/dist/node/chunks/dep-dh3wN_2j.js:61984:22)
      at async Object.transform (file:///Users/user/Documents/workspace/ladb-ui/node_modules/.pnpm/vite@5.0.13_@types+node@18.16.9/node_modules/vite/dist/node/chunks/dep-dh3wN_2j.js:64068:30)
      at async loadAndTransform (file:///Users/user/Documents/workspace/ladb-ui/node_modules/.pnpm/vite@5.0.13_@types+node@18.16.9/node_modules/vite/dist/node/chunks/dep-dh3wN_2j.js:49741:29)
      at async viteTransformMiddleware (file:///Users/user/Documents/workspace/ladb-ui/node_modules/.pnpm/vite@5.0.13_@types+node@18.16.9/node_modules/vite/dist/node/chunks/dep-dh3wN_2j.js:59342:32)
5:33:27 PM [vite] Internal server error: Failed to parse source for import analysis because the content contains invalid JS syntax. If you are using JSX, make sure to name the file with the .jsx or .tsx extension.
  Plugin: vite:import-analysis
  File: /Users/user/Documents/workspace/ladb-ui/libs/ui/src/stories/Introduction.mdx:45:71
  43 |  ## 📝 License
  44 |  
  45 |  @linecorp/ladb-ui is made available under the [MIT License](./LICENSE)
     |                                                                        ^
  46 |  
      at formatError (file:///Users/user/Documents/workspace/ladb-ui/node_modules/.pnpm/vite@5.0.13_@types+node@18.16.9/node_modules/vite/dist/node/chunks/dep-dh3wN_2j.js:63773:46)
      at TransformContext.error (file:///Users/user/Documents/workspace/ladb-ui/node_modules/.pnpm/vite@5.0.13_@types+node@18.16.9/node_modules/vite/dist/node/chunks/dep-dh3wN_2j.js:63767:19)
      at TransformContext.transform (file:///Users/user/Documents/workspace/ladb-ui/node_modules/.pnpm/vite@5.0.13_@types+node@18.16.9/node_modules/vite/dist/node/chunks/dep-dh3wN_2j.js:61984:22)
      at async Object.transform (file:///Users/user/Documents/workspace/ladb-ui/node_modules/.pnpm/vite@5.0.13_@types+node@18.16.9/node_modules/vite/dist/node/chunks/dep-dh3wN_2j.js:64068:30)
      at async loadAndTransform (file:///Users/user/Documents/workspace/ladb-ui/node_modules/.pnpm/vite@5.0.13_@types+node@18.16.9/node_modules/vite/dist/node/chunks/dep-dh3wN_2j.js:49741:29)
      at async viteTransformMiddleware (file:///Users/user/Documents/workspace/ladb-ui/node_modules/.pnpm/vite@5.0.13_@types+node@18.16.9/node_modules/vite/dist/node/chunks/dep-dh3wN_2j.js:59342:32) (x2)

해결 방안

기존에 Vite가 동적 import를 해석하지 못하는 문제가 있어 추가된 코드가 있었다. (history :
🧐
storybook + vite import.meta.url 경고문 (Vite가 동적 import를 분석할 수 없는 문제)


// if (config.plugins) {
    //   config.plugins = config.plugins.filter(
    //     (plugin) => plugin && 'name' in plugin && plugin.name !== 'react-refresh'
    //   )
    // }

놀랍게도 이번에는 해당 구문을 다시 제거하니 제대로 동작하였다. 추측한 이유는 다음과 같다.

react-refresh 플러그인은 React 개발에서 빠른 새로 고침 기능을 활성화해서 상태 손실 없이 React 구성 요소를 실시간으로 편집할 수 있게 해준다. react-refresh 플러그인을 필터링하면 Vite는 특히 MDX 구문 분석과 같은 복잡한 시나리오에서 특정 변환을 올바르게 처리하지 못해 사용자가 관찰한 오류가 발생할 수 있다고 한다.
react-refresh 플러그인에는 JSX 및 MDX 파일을 처리하여 올바르게 구문 분석되고 변환되도록 하는 로직이 있을 수도 있다고 한다?.?
Vite 플러그인은 서로 의존하는 경우가 많다. 하나를 제거하면 다른 플러그인이 수행할 것으로 예상하는 변환이나 단계가 누락될 수 있어서 Vite가 특정 파일 형식을 올바르게 구문 분석하지 못할 수 있다고 한다.

의존성에 따라 달라지는 스토리북 설정..?

History

Issue

해결 방안