In this project, my dev team decided to utilize Nx mono-repo. After various configurations, an issue arose when attempting to reference files located in the assets folder rather than the workspace from the feature workspace.

The error encountered at that time was as follows:

Looking at the error message, it indicates that Storybook is built through the server provided by Vite, but it cannot reference files located under libs/shared/assets from libs/feature-vue-company workspace because the file reference url is outside of Vite serving allow list. One suggested solution is to add entries to the server.fs.allow list in the vite.config settings. This allows specifying areas higher up in the project's root or specific folder locations that the Vite server should reference, rather than just the root of the existing workspace.

This approach has been used as a solution when referencing workspaces or files from libs within the workspace located in apps. To achieve this, prior configurations such as scope settings in lint, tsconfig, and alias settings in Vite are necessary.

Nevertheless, despite adding the paths of the folders containing the files to the vite server.fs.allow list, it did not work as expected.

Another approach to resolve this issue is to add aliases directly to Storybook itself. (Note that Storybook-vue is being used in this context.)

import path from 'path';

import type { StorybookConfig } from '@storybook/vue3-vite';

const config: StorybookConfig = {
  // ...
  viteFinal: async (config) => {
    if (config.resolve) {
      config.resolve.alias = {
        ...config.resolve.alias,
        '@nx-nest-vue/shared/assets': path.resolve(
          __dirname,
          '../../shared/assets',
        ),
      };
    }
    return config;
  },
};

export default config;

Using the above method, it was confirmed that the shared/assets/images file is being retrieved correctly.

The below images are before and after screenshot. It will help you to understanding my situation.

Before

After