When building for production, asset files are not bundled with the right path/file name when dot is present in entry name
Folder structure:
.
└── src/
├── prefix.button/
│ ├── prefix.button.component.tsx
│ └── prefix.button.component.scss
└── prefix.input/
├── prefix.input.component.tsx
└── prefix.input.component.scss
vite.config.ts
import react from '@vitejs/plugin-react';
import path from 'node:path';
import dts from 'vite-plugin-dts';
import { libInjectCss } from 'vite-plugin-lib-inject-css';
export default defineConfig({
plugins: [
react(),
dts({
insertTypesEntry: true,
}),
libInjectCss(),
],
build: {
cssCodeSplit: true,
lib: {
entry: {
'prefix.button': path.resolve(__dirname, 'src/prefix.button/prefix.button.component.tsx'),
'prefix.input': path.resolve(__dirname, 'src/prefix.input/prefix.input.component.tsx'),
},
name: 'prefix.controls',
formats: ['es'],
},
rollupOptions: {
external: ['react', 'react-dom'],
output: {
entryFileNames: '[name]/[name].component.js',
assetFileNames: '[name]/[name].component.[ext]',
globals: {
react: 'React',
'react-dom': 'ReactDOM',
'styled-components': 'styled',
},
},
},
},
});
After ‘npm run build’ ( “build”: “tsc && vite build”)
Vite version is 5.2.0
I end up with something like this
.
└── dist/
├── prefix.button/
│ └── prefix.button.component.js
├── prefix.input/
│ └── prefix.input.component.tsx
└── prefix/
├── prefix1.css
└── prefix2.css
I would expect structure such as:
.
└── dist/
├── prefix.button/
│ ├── prefix.button.component.js
│ ├── prefix.button.component.d.ts
│ └── prefix.button.component.css
└── prefix.input/
├── prefix.input.component.js
├── prefix.input.component.d.ts
└── prefix.input.component.css
It looks like when bundling asset file names everyting after last dot is trimmed.
That’s weird because for entry file names it doesn’t do that
New contributor
Aldo is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.