Почему после сборки vite не работают модули?

Question

[Danya Wyse]

В режиме разработки все отлично работает, в чем может быть проблема может кто сталкивался?

<script type="module" src="main.js"></script>

Comments

[Сергей delphinpro]

Читать ошибки пробовали?

[WbICHA]

А ты как страницу открываешь?

[Danya Wyse]

Сергей delphinpro, и что мне это дает ? Он локально с папки dist должен открываться без проблем. А тут какие то дикие ошибки вылазят связанные с сервером

[Danya Wyse]

WbICHA, через index.html

[Danya Wyse]

Сергей delphinpro,
билд в vite вот такой, может в нем что то не так

import { defineConfig, splitVendorChunkPlugin } from "vite";
import { resolve } from "path";
import path from "path";
// plg
import handlebars from "vite-plugin-handlebars";
import HandlebarUpdate from "./src/js/common/handlerUpdate";
// import imagemin from "imagemin";
// import imageminWebp from "imagemin-webp";

export default defineConfig({
    root: path.resolve(__dirname, "src"),
    base: "./",

    plugins: [
        HandlebarUpdate(),
        handlebars({
            partialDirectory: resolve(__dirname, "./src/partials/"),
            reloadOnPartialChange: true,
        }),
        // await imagemin(["images/*.{jpg,png}"], {
        //     destination: "dist/images",
        //     plugins: [imageminWebp({ quality: 50 })],
        // }),

        // viteImagemin({
        //     gifsicle: {
        //         optimizationLevel: 3,
        //         interlaced: false,
        //     },
        //     optipng: {
        //         optimizationLevel: 3,
        //     },
        //     mozjpeg: {
        //         quality: 80,
        //     },
        //     pngquant: {
        //         quality: [0.8, 0.9],
        //         speed: 1,
        //     },
        //     svgo: {
        //         plugins: [
        //             {
        //                 name: "removeViewBox",
        //             },
        //             {
        //                 name: "removeEmptyAttrs",
        //                 active: false,
        //             },
        //         ],
        //     },
        // }),

        splitVendorChunkPlugin(),
    ],

    build: {
        emptyOutDir: path.resolve(__dirname, "dist"),
        outDir: path.resolve(__dirname, "dist"),
        sourcemap: false,
        minify: true,

        rollupOptions: {
            output: {
                chunkFileNames: "js/[name].js",
                entryFileNames: "js/[name].js",

                assetFileNames: (assetInfo) => {
                    let info = assetInfo.name.split(".");
                    let extType = info[info.length - 1];
                    if (/png|jpe?g|svg|gif|tiff|bmp|ico/i.test(extType)) {
                        extType = "images";
                    } else if (/ttf|eot|svg|woff|woff2/.test(extType)) {
                        extType = "fonts";
                    }
                    return `${extType}/[name][extname]`;
                },
            },

            input: {
                index: path.resolve(__dirname, "src/index.html"),
            },
        },
    },

    server: {
        port: 3000,
        host: "0.0.0.0",
        open: true,
        hmr: true,
    },
});

[Сергей delphinpro]

Danya Wyse,

и что мне это дает ?

Вам видимо ничего. А вообще текст ошибки обычно дает понимание о ее причинах.

Он локально с папки dist должен открываться без проблем.

Нет, не должен.
Модули не будут загружаться не по http. О чем и написано в тексте ошибки.

[WbICHA]

Danya Wyse, и в дополнение ответу Сергей delphinpro, у вита есть такая команда как vite preview, он запустит сервер с использованием сбилженых файлов.

[Danya Wyse]

WbICHA,мне просто условно хотелось бы скидывать папку dist заказчику чтобы он смотрел удаленно сайт

[WbICHA]

Danya Wyse, это называется не удалённо, а локально. А для удалённого надо загружать на сервер. Или использовать свой пека как сервер. Причём если надо просто показать здесь и сейчас, то этот функционал уже нативно в вскод встроен (vscode ports).

[Danya Wyse]

WbICHA, в общем на gitHub pages буду сажать, слишком много танцев с бубном делать. Если какую то БД надо будет подключать то через JSON и Proxy буду выводить

[Danya Wyse]

WbICHA, вопрос не по теме. Если бы щас реакт начинали учить, как бы вы это делали ? Через офф документацию или какие то курсы/видео ?

[WbICHA]

Danya Wyse, универсальный вариант: всё вместе, а там уже отсеиваешь неподходящие лично тебе варианты обучения.

Answer 1

[Алексей Николаев]

Я полагаю, что у вас скрипт пытается загрузиться по абсолютному урлу, с диска, а не с дев-сервера. Vite вообще грешит таким, особенно на Windows, все еще сырой, все еще корявый.

Попробуйте в ENV файл добавить url энтри пойнта и подключить скрипт через эту переменную.

Comments

[WbICHA]

Я полагаю, что у вас скрипт пытается загрузиться по абсолютному урлу, с диска, а не с дев-сервера.

Гениально. Может так потому, что он вообще сервер не запускает, о чём он написал в комментах?

Vite вообще грешит таким, особенно на Windows, все еще сырой, все еще корявый.

Ммм... А кто-нибудь ещё знает, что он этим грешит?

[Алексей Николаев]

WbICHA, да, посмотрите ишью открытые (и закрытые тоже). Например, на виндовс не работает динамический импорт с new URL где базовый урл это Import.meta.url. Все еще сыро, ага.