-
Hi there! I tried to follow the docs on Backend Integration to add Vite to our WordPress stack, but can't access transpiled versions of the TypeScript and SCSS entrypoints when running Here's my import path from 'node:path'
import { defineConfig } from 'vite'
export default defineConfig({
publicDir: path.resolve(__dirname, 'public'),
build: {
manifest: true,
outDir: path.resolve(__dirname, 'public/content/themes/theme/assets/dist'),
copyPublicDir: false,
emptyOutDir: true,
sourcemap: true,
rollupOptions: {
input: [
path.resolve(__dirname, 'public/content/themes/theme/scripts/index.ts'),
path.resolve(__dirname, 'public/content/themes/theme/styles/index.scss')
]
}
}
}) As far as I read the docs, I need to put this code into my frontend HTML to load the dev assets: <link rel="stylesheet" href="http://localhost:5173/content/themes/theme/styles/index.scss" type="text/css">
<script type="module" src="http://localhost:5173/@vite/client" defer></script>
<script type="module" src="http://localhost:5173/content/themes/theme/scripts/index.ts" defer></script> However, when I open console.log('Hello, World.' as string) I expected this to be a transpiled JavaScript version similar to the one I get when running console.log("Hello, World."); The same applies to the SCSS entrypoint. Is this how it is supposed to work or am I using the wrong asset URLs in dev mode? |
Beta Was this translation helpful? Give feedback.
Replies: 1 comment
-
I was able to solve the issue by disabling Here's my updated import path from 'node:path'
import { defineConfig } from 'vite'
export default defineConfig({
publicDir: false,
build: {
manifest: true,
outDir: path.resolve(__dirname, 'public/content/themes/theme/assets/dist'),
emptyOutDir: true,
sourcemap: true,
rollupOptions: {
input: [
path.resolve(__dirname, 'public/content/themes/theme/scripts/index.ts'),
path.resolve(__dirname, 'public/content/themes/theme/styles/index.scss')
]
}
}
}) |
Beta Was this translation helpful? Give feedback.
I was able to solve the issue by disabling
publicDir
. It might have interfered with the delivery of transpiled assets. Also, I noticed, that the Vite client needs to be loaded first, before Vite starts transpiling entrypoints. Refreshing the TypeScript asset without hitting the Vite client before, shows the original file. That was misleading during debugging. Now I get consistent results.Here's my updated
vite.config.ts
: