I'm writing a standard react app using vite and yarn. I'm new to vite...

package.json

{
  "name": "bpm",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-icons": "^4.4.0",
    "uuid": "^9.0.0"
  },
  "devDependencies": {
    "@types/react": "^18.0.17",
    "@types/react-dom": "^18.0.6",
    "@vitejs/plugin-react": "^2.1.0",
    "vite": "^3.1.0"
  }
}

vite.config.js

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  server: {host:'0.0.0.0', port:8080},
  plugins: [react()]
})

When I run it directly in wsl (ubuntu), using yarn dev it works fine. I can point my browser at http://localhost:8080 and my app runs with no problems.

I also have this basic dockerfile which I build in the normal way:

from node:alpine3.15
workdir /app
copy package.json /app/package.json
run yarn
copy src /app/src
copy public /app/public
copy vite.config.js /app/
cmd ["yarn", "dev", "--debug"]

But, when I run this in wsl:

docker run -it --rm -p 8080:8080 bpm

The app no longer works.

What do I mean by 'no longer works'? Well, that's where it gets interesting. When the app starts the debugging output shows that vite has resolved all of its dependencies, so vite appears to be working, it reports no errors on stdout, and reports its port bindings. But, when I access the app root: http://localhost:8080 I get a 404.

I can access the files in the app if I enter their URI's: curl http://localhost:8080/src/main.jsx returns the appropriate source-code. So, this isn't a docker networking problem.

If I navigate to http://localhost:8080/index.html then that page loads and the network tab shows no problems, but the console reports an error:

@vitejs/plugin-react can't detect preamble. Something is wrong. See https://github.com/vitejs/vite-plugin-react/pull/11#discussion_r430879201
    at Toolbar.jsx:6:11

Where Toolbar.jsx is on of my component files.

Just in case, I read the docs and tried adding:

origin: 'http://127.0.0.1:8080'

To the vite server config and it hasn't helped (surprisingly).

There seem to be some other questions on this topic (here and here), but those questions and answers don't seem to cover the actual behaviour I'm seeing, though I have read them and applied their solutions they don't help.

I've also tried different base containers for node, and different versions of node. It doesn't seem to make any difference.

I've been banging my head against this all evening but it's getting annoying now. Any insights would be appreciated.

Note

I can vite build the app and serve it in nginx, and it works, but that really doesn't help during development.

I reproduced the same error. You have to set host to true in your vite config and you have to copy all files in your dockerfile, those inside and outside src folder, index.html is outside your src folder and you are not copying it

Compared to CRA using vite your index.html have to be on your root directory in dev mode. If you want to serve it from public directory you have to add some middleware for that, but it's more like a workaround, I don't advice you doing this since the public directory is for assets like robots.txt file ...

https://vitejs.dev/guide/assets.html#the-public-directory

-vite config file

export default defineConfig({
 plugins: [react()],
 server: {
  watch: {
   usePolling: true,
  },
  host: true, // Here
  strictPort: true,
  port: 8080, 
}

-Dockerfile file

FROM node:alpine
WORKDIR /app
COPY package.json .
RUN yarn
# copy all files
COPY . .
cmd ["yarn", "dev", "--debug"]

And if you copy everything (COPY . .) Don't forget to add a .dockerignore file

.git
.vscode
.dockerignore
.gitignore
.env
config
build
node_modules
docker-compose.yaml
Dockerfile
README.md

Try to build your image again and run and let me know if it solves your problem