Resolving static assets from a linked dep inside a monorepo

Describe the bug

When I run tsc && vite build --watch --mode development command of my app in a pnpm workspaces monorepo, vite is unable to resolve static assets referenced in a linked dependency of that app.

In my case: apps/outlook imports the packages/calendar package (a react calendar client built with vite as well). The calendar has some .tsx files that reference some statis assets of their own.

Error:

Could not resolve '../../assets/info.svg' from ../../packages/calendar/src/components/action-pane/action-pane.tsx

Research:

I tried asking the question on Discord & Twitter first but didn’t get any response
I also searched through other issues (Monorepo assets serving error, Wrong JSX runtime in linked dependency) but in one case they’re not importing a react packages that uses static assets, in the other it’s about the react runtime in the bundle.
I’ve also tried having build.assetsDir point to the linked dep, but that of course will lead to assets from apps/outlook to not be resolved as it’s not assuming only one asset directory (there’s an issue open about this use case)

Reproduction

https://stackblitz.com/edit/github-zdg7ym?file=apps%2Foutlook%2Fpackage.json

System Info

vite version: 3.0.0
Operating System: macOS
Node version: v16.14.2
Package manager: `pnpm` v7.9.4-0

Also: `@vitejs/plugin-react`: v2.0.1

Used Package Manager

pnpm

Logs

Expand `--debug` logs

  vite:config bundled config file loaded in 807.70ms +0ms
  vite:config using resolved config: {
  vite:config   server: {
  vite:config     preTransformRequests: true,
  vite:config     https: true,
  vite:config     port: 8082,
  vite:config     middlewareMode: false,
  vite:config     fs: { strict: true, allow: [Array], deny: [Array] }
  vite:config   },
  vite:config   optimizeDeps: {
  vite:config     disabled: 'build',
  vite:config     include: [ 'calendar', 'react/jsx-runtime', 'react/jsx-dev-runtime' ],
  vite:config     exclude: [ 'react' ],
  vite:config     esbuildOptions: { preserveSymlinks: true }
  vite:config   },
  vite:config   plugins: [
  vite:config     'vite:ensure-watch',
  vite:config     'vite:build-metadata',
  vite:config     'vite:pre-alias',
  vite:config     'alias',
  vite:config     'vite:react-babel',
  vite:config     'vite:react-refresh',
  vite:config     'vite:react-jsx',
  vite:config     'vite:modulepreload-polyfill',
  vite:config     'vite:resolve',
  vite:config     'vite:html-inline-proxy',
  vite:config     'vite:css',
  vite:config     'vite:esbuild',
  vite:config     'vite:json',
  vite:config     'vite:wasm-helper',
  vite:config     'vite:worker',
  vite:config     'vite:asset',
  vite:config     'vite:wasm-fallback',
  vite:config     'vite:define',
  vite:config     'vite:css-post',
  vite:config     'vite:build-html',
  vite:config     'vite:worker-import-meta-url',
  vite:config     'vite:ensure-watch',
  vite:config     'vite:watch-package-data',
  vite:config     'commonjs',
  vite:config     'vite:data-uri',
  vite:config     'vite:asset-import-meta-url',
  vite:config     'vite:dynamic-import-vars',
  vite:config     'vite:import-glob',
  vite:config     'vite:build-import-analysis',
  vite:config     'vite:esbuild-transpile',
  vite:config     'vite:terser',
  vite:config     'vite:reporter',
  vite:config     'vite:load-fallback'
  vite:config   ],
  vite:config   resolve: {
  vite:config     dedupe: [ 'react', 'react', 'react-dom' ],
  vite:config     alias: [ [Object], [Object] ]
  vite:config   },
  vite:config   build: {
  vite:config     target: [ 'es2020', 'edge88', 'firefox78', 'chrome87', 'safari13' ],
  vite:config     polyfillModulePreload: true,
  vite:config     outDir: 'dist',
  vite:config     assetsDir: 'assets',
  vite:config     assetsInlineLimit: 4096,
  vite:config     cssCodeSplit: true,
  vite:config     cssTarget: [ 'es2020', 'edge88', 'firefox78', 'chrome87', 'safari13' ],
  vite:config     sourcemap: false,
  vite:config     rollupOptions: { external: [Array], input: [Object] },
  vite:config     minify: 'esbuild',
  vite:config     terserOptions: {},
  vite:config     write: true,
  vite:config     emptyOutDir: null,
  vite:config     manifest: false,
  vite:config     lib: false,
  vite:config     ssr: false,
  vite:config     ssrManifest: false,
  vite:config     reportCompressedSize: true,
  vite:config     chunkSizeWarningLimit: 500,
  vite:config     watch: true,
  vite:config     w: true,
  vite:config     commonjsOptions: { include: [Array], extensions: [Array] },
  vite:config     dynamicImportVarsOptions: { warnOnError: true, exclude: [Array] }
  vite:config   },
  vite:config   mode: 'development',
  vite:config   configFile: '/home/projects/github-zdg7ym/apps/outlook/vite.config.ts',
  vite:config   configFileDependencies: [ '/home/projects/github-zdg7ym/apps/outlook/vite.config.ts' ],
  vite:config   inlineConfig: {
  vite:config     root: undefined,
  vite:config     base: undefined,
  vite:config     mode: 'development',
  vite:config     configFile: undefined,
  vite:config     logLevel: undefined,
  vite:config     clearScreen: undefined,
  vite:config     optimizeDeps: { force: undefined },
  vite:config     build: { watch: true, w: true }
  vite:config   },
  vite:config   root: '/home/projects/github-zdg7ym/apps/outlook',
  vite:config   base: '/',
  vite:config   publicDir: '/home/projects/github-zdg7ym/apps/outlook/public',
  vite:config   cacheDir: '/home/projects/github-zdg7ym/apps/outlook/node_modules/.vite',
  vite:config   command: 'build',
  vite:config   ssr: {
  vite:config     format: 'esm',
  vite:config     target: 'node',
  vite:config     optimizeDeps: { disabled: true, esbuildOptions: [Object] }
  vite:config   },
  vite:config   isWorker: false,
  vite:config   mainConfig: null,
  vite:config   isProduction: false,
  vite:config   preview: {
  vite:config     port: undefined,
  vite:config     strictPort: undefined,
  vite:config     host: undefined,
  vite:config     https: true,
  vite:config     open: undefined,
  vite:config     proxy: undefined,
  vite:config     cors: undefined,
  vite:config     headers: undefined
  vite:config   },
  vite:config   env: { BASE_URL: '/', MODE: 'development', DEV: true, PROD: false },
  vite:config   assetsInclude: [Function: assetsInclude],
  vite:config   logger: {
  vite:config     hasWarned: false,
  vite:config     info: [Function: info],
  vite:config     warn: [Function: warn],
  vite:config     warnOnce: [Function: warnOnce],
  vite:config     error: [Function: error],
  vite:config     clearScreen: [Function: clearScreen],
  vite:config     hasErrorLogged: [Function: hasErrorLogged]
  vite:config   },
  vite:config   packageCache: Map(0) { set: [Function (anonymous)] },
  vite:config   createResolver: [Function: createResolver],
  vite:config   worker: {
  vite:config     format: 'iife',
  vite:config     plugins: [
  vite:config       'vite:ensure-watch',
  vite:config       'vite:build-metadata',
  vite:config       'vite:pre-alias',
  vite:config       'alias',
  vite:config       'vite:modulepreload-polyfill',
  vite:config       'vite:resolve',
  vite:config       'vite:html-inline-proxy',
  vite:config       'vite:css',
  vite:config       'vite:esbuild',
  vite:config       'vite:json',
  vite:config       'vite:wasm-helper',
  vite:config       'vite:worker',
  vite:config       'vite:asset',
  vite:config       'vite:wasm-fallback',
  vite:config       'vite:define',
  vite:config       'vite:css-post',
  vite:config       'vite:build-html',
  vite:config       'vite:worker-import-meta-url',
  vite:config       'vite:ensure-watch',
  vite:config       'vite:watch-package-data',
  vite:config       'commonjs',
  vite:config       'vite:data-uri',
  vite:config       'vite:asset-import-meta-url',
  vite:config       'vite:dynamic-import-vars',
  vite:config       'vite:import-glob',
  vite:config       'vite:build-import-analysis',
  vite:config       'vite:esbuild-transpile',
  vite:config       'vite:terser',
  vite:config       'vite:reporter',
  vite:config       'vite:load-fallback'
  vite:config     ],
  vite:config     rollupOptions: {}
  vite:config   },
  vite:config   appType: 'spa',
  vite:config   experimental: { importGlobRestoreExtension: false, hmrPartialAccept: false }
  vite:config } +6ms
vite v3.0.8 building for development...

watching for file changes...

build started...
✓ 324 modules transformed.
Could not resolve '../../assets/info.svg' from ../../packages/calendar/src/components/action-pane/action-pane.tsx
transforming (607) ../../node_mod

Validations

Follow our Code of Conduct
Read the Contributing Guidelines.
Read the docs.
Check that there isn’t already an issue that reports the same bug to avoid creating a duplicate.
Make sure this is a Vite issue and not a framework-specific issue. For example, if it’s a Vue SFC related bug, it should likely be reported to vuejs/core instead.
Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
The provided reproduction is a minimal reproducible example of the bug.

Issue Analytics

State:
Created a year ago
Comments:6 (3 by maintainers)

Top GitHub Comments

1reaction

p6l-richardcommented, Aug 26, 2022

Thanks for pointing this out @sapphi-red. I have stripped away all the unnecessary stuff now.

I did leave the monorepo setup with apps/outlook importing the packages/calendar because it’s the asset resolution of the package that’s the issue.

As outlined in the readme, the steps to reproduce are (from the workspace root):

pnpm i
pnpm outlook build:dev --debug

Here’s a screenshare where I did just that. https://user-images.githubusercontent.com/18185649/186877078-ae279b4d-255c-4d0f-aff7-dbbc676642ff.mov

0reactions

sapphi-redcommented, Aug 26, 2022

It did not reproduce on Windows but it did reproduce on Stackblitz. You are using import infoIcon from '../../assets/info.svg'; but it should be import infoIcon from '../../assets/Info.svg';. packages/calendar/src/assets/Info.svg has a capital I.

Top Results From Across the Web

Resolving static assets from a linked dep inside a monorepo

Question. How should asset files from linked deps in a. monorepo be treated? In my `outlook` app, I'm importing the. calendar package (a...

Problem with Vite and CommonJS package in monorepo #5668

I'm trying to migrate CRA to Vite in a monorepo and couldn't make it work with shared cjs packages. So I built a...

Simple monorepos via npm workspaces and TypeScript ...

In this blog post, we'll explore how to set up a simple monorepo for two npm packages. All we need is already built...

serve static assets in storybook monorepo - Stack Overflow

the basic idea is to copy all the static assets of all the packages into the storybook output directory: package.json

Monorepo Explained

Everything you need to know about monorepos, and the tools to build them. ... It uses static analysis to automatically infer file-level dependencies...