loading assets from node_modules

[hector-jaraba-NWSE]

Describe the bug

I move from CRA to Vite.

I am using an external component library which is using some internal assets (images and fonts). Before moving from CRA everything was working fine, but now Vite is not loading the images in development mode.

It's trying to load them from node_modules/assets but the assets are placed in node_modules/component-library/dist/assets

I am working on a monorepo with yarn and lerna, I don't know if it can be related as I have two levels of node_modules.

Once I do the build I have no issues. All the files are copied correctly into the asset folder.

I'm not using directly the assets in my code. The assets are being used by the library internally. I'm just using a component from the library which is using these internal assets.

This is my configuration file:

/// <reference types="vitest" />
import { defineConfig } from 'vite'
import { configDefaults } from 'vitest/config'

import * as path from 'path'
import react from '@vitejs/plugin-react'
import viteTsconfigPaths from 'vite-tsconfig-paths'
import svgrPlugin from 'vite-plugin-svgr'

// https://vitejs.dev/config/
export default defineConfig({
  base: '/',
  server: {
    open: true,
    port: 3000,
  },
  plugins: [
    react(),
    viteTsconfigPaths(),
    svgrPlugin({
      svgrOptions: {
        svgProps: { role: 'img' },
        titleProp: true,
        descProp: true,
      },
    }),
  ],
  resolve: {
    alias: [{ find: '^@/', replacement: path.resolve(__dirname, 'src/') }],
  },
  test: {
    globals: true,
    environment: 'jsdom',
    setupFiles: './test-setup.ts',
    coverage: {
      reporter: ['text', 'html'],
      exclude: ['./node_modules/', './test-setup.ts', './dist/', './build/'],
    },
    exclude: [...configDefaults.exclude, 'build', 'ssl', 'coverage'],
    include: ['./src/**/*.{test,spec}.{ts,tsx}'],
  },
})

System Info

System:
    OS: macOS 13.3.1
    CPU: (10) arm64 Apple M1 Pro
    Memory: 47.89 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 18.12.1 - ~/.nvm/versions/node/v18.12.1/bin/node
    Yarn: 3.4.1 - /usr/local/bin/yarn
    npm: 8.19.4 - ~/Proyects/new-work/employer-branding-frontend/node_modules/.bin/npm
  Browsers:
    Chrome: 112.0.5615.137
    Firefox: 102.10.0
    Safari: 16.4

Used Package Manager

yarn

Logs

No response

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.

[hector-jaraba-NWSE]

As a workarround I ended adding vite-plugin-static-copy and copying the assets where vite expect to found them:

viteStaticCopy({
      targets: [
        {
          src: 'node_modules/@organisation/component-library/dist/assets/*',
          dest: 'node_modules/assets',
        },
      ],
    }),

is there a way to tell Vite to look in the corresponding path (@organisation/component-library/dist/assets/) for that library?

it is trying to access this path in the css:

url("http://localhost:3000/node_modules/assets/mask-c6a253a6.svg")

[Bandes]

I have a similar issue, have you had any success since May?