Does this work when using rollup options

[SimTheFool]

Hello !

This plugin does not seem to wrok when using rollupOptions for specifying entry points, and pathes are not resolved.

Is there a specific way to make it work ?

[aleclarson]

Please reproduce the issue in the ./demo folder, thx

[doubleedesign]

I had this issue with a React app I am running from a subfolder; everything was running fine for Storybook but not for running the app itself. I found the solution was to put an additional vite.config.ts file inside the subfolder I'm running the app from, containing just the plugins part.

For context, I'm running a React app inside a WordPress theme, so there's some particular folder structures and files required which is why it made sense to run and build from the subfolder, and why you'll see some references to the wp-content folder structure below. Also noteworthy is that the subfolder I am using is called app because it made sense in my context, but for most projects the default name would be src. It shouldn't matter, src should work in place of where I have app.

Relevant parts of the folder structure:

• theme-project-folder/
  • app/
  • components/
  • hooks/
  • App.tsx
  • main.tsx
  • index.html
  • ...etc
  • tsconfig.json
  • vite.config.ts
  • theme.json

Root Vite config:

/* project-root/vite.config.ts */

export default defineConfig({
    plugins: [react(), tsconfigPaths()],
    root: './',
    build: {
        rollupOptions: {
            input: 'app/index.html'
        }
    },
    base: '/wp-content/themes/theme-project-folder/dist/',
    server: {
        port: 5173,
        strictPort: true
    }
});

Subfolder Vite config:

/* app/vite.config.ts */

export default defineConfig({
    plugins: [react(), tsconfigPaths()],
});

Relevant parts of tsconfig:

"compilerOptions": {
    "rootDir": ".",
    "baseUrl": ".",
    "paths": {
    "@/components/*": ["./app/components/*"],
    "@/hooks/*": ["./app/hooks/*"],
    "@/types": ["./app/types.ts"],
    "@/utils": ["./app/utils.ts"],
    "@theme.json": ["./theme.json"]
    },
}

Scripts in package.json:

"dev": "vite serve ./app",
"build": "tsc && vite build && mv ./dist/app/index.html ./dist/index.html & cd dist && rmdir app",
"storybook": "storybook dev -p 6006",

This configuration allows me to:

• Import files from the project root (notably theme.json) from files in the app folder without using the @theme.json shortcut
• Also use similar shortcuts for stuff throughout the app folder

While continuing to meet the requirement that saw me running from a subfolder in the first place:

• Run the dev app at localhost:5173 like I would any other app
• Build the production app into the dist folder with the relevant paths for WordPress to find the assets.