LoginSignup
4
1

More than 1 year has passed since last update.

monorepoのviteでエイリアスを使ったらエラーになったメモ

Posted at

概要

モノレポ構成でエイリアスを指定して開発していた。
作ったモジュールをいざ別のところから利用しようとしたらRollup failed to resolve importのエラーが発生したのでメモ。
結論から言うと、利用する側でも同様のエイリアス設定が必要だった。
stack overflow: Ambiguous aliases in Vite monorepoを参考に解決。

TURBOのInternal Packagesにはviteは設定不要とあるが、エイリアスを使うと設定が必要になる模様。

ソースコード

構成

- packages
  - component ← ここでエイリアスを切っていた
- apps
  - front ← ここでcomponentのモジュールを利用しようとしてエラー

エラー発生時の状況

packages/componentでエイリアスを使用しており、下記のように設定していた。

packages/component/vite.config.ts
export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: [{ find: "@", replacement: "/src" }],
  },
});
packages/component/tsconfig.json
{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}
packages/component/jest.config.json
{
  "roots": [
    "<rootDir>/src"
  ],
  "moduleNameMapper": {
    "^@/(.*)$": "<rootDir>/src/$1"
  }
}

エラー解消後の状況

apps/frontにて下記の追加設定。

apps/front/vite.config.ts
export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
      "@": path.join( __dirname, "../../packages/components/src")
    },
  },
});
apps/front/tsconfig.json
{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["../../packages/components/src/*"]
    }
  }
}

今後の検討

@のエイリアスだと分かりにくいので、@frontとか@componentとかのエイリアスにしたほうがよさそう

エラーメッセージ


front:build: [vite]: Rollup failed to resolve import "@/components/common/atoms/InputFileButton" from "D:/develop/project/RinneCircle/packages/components/src/components/builder/ScenarioEdit/ScenarioForm/PostFormHeroImage/index.tsx".
front:build: This is most likely unintended because it can break your application at runtime.
front:build: If you do want to externalize this module explicitly add it to
front:build: `build.rollupOptions.external`
front:build: error during build:
front:build: Error: [vite]: Rollup failed to resolve import "@/components/common/atoms/InputFileButton" from "D:/develop/project/RinneCircle/packages/components/src/components/builder/ScenarioEdit/ScenarioForm/PostFormHeroImage/index.tsx".
front:build: This is most likely unintended because it can break your application at runtime.
front:build: If you do want to externalize this module explicitly add it to
front:build: `build.rollupOptions.external`
front:build:     at viteWarn (file:///D:/develop/project/RinneCircle/node_modules/.pnpm/vite@4.3.9/node_modules/vite/dist/node/chunks/dep-e8f070e8.js:46597:23)
front:build:     at onwarn (file:///D:/develop/project/RinneCircle/node_modules/.pnpm/@vitejs+plugin-react-swc@3.3.2_vite@4.3.9/node_modules/@vitejs/plugin-react-swc/index.mjs:180:9)
front:build:     at onRollupWarning (file:///D:/develop/project/RinneCircle/node_modules/.pnpm/vite@4.3.9/node_modules/vite/dist/node/chunks/dep-e8f070e8.js:46618:9)   
front:build:     at onwarn (file:///D:/develop/project/RinneCircle/node_modules/.pnpm/vite@4.3.9/node_modules/vite/dist/node/chunks/dep-e8f070e8.js:46368:13)
front:build:     at Object.onwarn (file:///D:/develop/project/RinneCircle/node_modules/.pnpm/rollup@3.22.0/node_modules/rollup/dist/es/shared/node-entry.js:25346:13)   
front:build:     at ModuleLoader.handleInvalidResolvedId (file:///D:/develop/project/RinneCircle/node_modules/.pnpm/rollup@3.22.0/node_modules/rollup/dist/es/shared/node-entry.js:23981:26)
front:build:     at file:///D:/develop/project/RinneCircle/node_modules/.pnpm/rollup@3.22.0/node_modules/rollup/dist/es/shared/node-entry.js:23941:26
front:build:     at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
front:build:  ELIFECYCLE  Command failed with exit code 1.
front:build: ERROR: command finished with error: command (D:\develop\project\RinneCircle\apps\front) pnpm run build exited (1)
command (D:\develop\project\RinneCircle\apps\front) pnpm run build exited (1)

 Tasks:    4 successful, 5 total
Cached:    3 cached, 5 total
  Time:    14.588s
Failed:    front#build

 ERROR  run failed: command  exited (1)
 ELIFECYCLE  Command failed with exit code 1.
4
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
4
1