Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – [vite]: Rollup failed to resolve import "index.tsx" from "/app/index.html"

Here is my vite.config.ts:

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import postcssNesting from 'postcss-nesting';

// https://vitejs.dev/config/
export default defineConfig({
    plugins: [react()],
    build: {
        outDir: "../backend/static",
        emptyOutDir: true,
        sourcemap: true
    },
    server: {
        proxy: {
            "/ask": "http://localhost:5000",
            "/chat": "http://localhost:5000"
        }
    },
    css: {
        postcss: {
            plugins: [
                postcssNesting
            ],
        },
    }
});

and index.html contains this

<script type="module" src="/src/index.tsx"></script>

If i change /src/index.tsx to index.tsx,then it whines with error in the title …

Every thread references that vite config is wrong but i do not know enough about React to figure it out …

Many thanks for the help!

I tried what I wrote above.

edit:

------------------------------------
FROM node:21-alpine as node-builder

ENV APP_PATH="/app"

WORKDIR $APP_PATH
# copy both 'package.json' and 'package-lock.json' (if available)
COPY app/frontend .

# install project dependencies
RUN npm install --verbose

# build app for production with minification
RUN npm run build
---------------------------------------


COPY --from=node-builder $APP_PATH $APP_PATH/static

where APP_PATH = /app

Tags:

3

Answers


  1. Chosen as BEST ANSWER
    0

    Ah i got it, i think ...

    in vite config, build dir needs to be relative:

    outDir: "dist",

    and then in dockerfile, i copy the contents of the built folder like so:

    COPY --from=node-builder $APP_PATH/dist $APP_PATH/static

    and then flask needs this route

    @app.route('/')
def index():
    return app.send_static_file('index.html')

    No changes needed in index.html .... in fact, build process fails with any change i make in there ...

    Anyway, flask now serves both react and python apps


  2. 0

    The error you are encountering may be related to the incorrect path specified in the script tag in your HTML file. When you change the path from "/src/index.tsx" to "index.tsx," the browser is likely unable to locate the file. To resolve this issue, make sure to provide the correct path based on the structure of your project.

    Assuming that your index.tsx file is in the "src" directory, you should use a relative path like this:

    <script type="module" src="./src/index.tsx"></script>
    Login or Signup to reply.
  3. 0

    If you are using default Vite js template then the main index.tsx file is created in src directory and their diclarations are setup based on the main file location.

    If you want to change the path of your script then you have to create index.tsx file in you project root directory with appropriate rendering.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search