Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

saurabhdatta's avatar

Vite generates empty chunks of JS module files

So, I have a regular es module JS file that I import in HTML to use the functions. It runs fine in development mode with npm run dev. But when I build with npm run build, the generated JS file is empty and the CLI output says Generated empty chunk: sale.new.js

sale.new.js

const init = (data) => {
    let elem = document.querySelector('select[name=region_id]');

    let opt = document.createElement('option');
    opt.value = -1;
    opt.innerText = "Select a region";
    elem.appendChild(opt);

    for(const r in data) {
        const d = data[r];
        let opt = document.createElement('option');
        opt.value = d.id;
        opt.innerText = d.label;
        elem.appendChild(opt);
    }
}

const onRegionChange = (data, region_id) => {
    let elem = document.querySelector('select[name=category_id]');
    elem.innerHTML = '';
    document.querySelector('select[name=item_id]').innerHTML = '';

    if(region_id < 1) return false;

    let opt = document.createElement('option');
    opt.value = -1;
    opt.innerText = "Select a category";
    elem.appendChild(opt);

    for(const r in data[region_id]['categories']) {
        const d = data[region_id]['categories'][r];
        let opt = document.createElement('option');
        opt.value = d.id;
        opt.innerText = d.label;
        elem.appendChild(opt);
    }
};

const onCategoryChange = (data, region_id, category_id) => {
    let elem = document.querySelector('select[name=item_id]');
    elem.innerHTML = '';

    if(region_id < 1 || category_id < 1) return false;

    let opt = document.createElement('option');
    opt.value = -1;
    opt.innerText = "Select an item";
    elem.appendChild(opt);

    for(const r in data[region_id]['categories'][category_id]['items']) {
        const d = data[region_id]['categories'][category_id]['items'][r];
        let opt = document.createElement('option');
        opt.value = d.id;
        opt.innerText = d.label;
        elem.appendChild(opt);
    }
}

export {
    init,
    onCategoryChange,
    onRegionChange
};

new.blade.php

@extends('layout.layout')

@section('header-stylesheets')
    @vite(['resources/lib/fontawesome/css/all.min.css', 'resources/css/app.css'])
@endsection

@section('footer-scripts')
<script>
    import {init,onRegionChange,onCategoryChange} from '@/resources/js/sale.new.js';
    let data = <?=json_encode($dataset)?>;

    window.addEventListener('load', (ev) => init(data));
    document.querySelector('select[name=region_id]').addEventListener('change', (ev) => onRegionChange(data, document.querySelector('select[name=region_id]').value));
    document.querySelector('select[name=category_id]').addEventListener('change', (ev) => onCategoryChange(data, document.querySelector('select[name=region_id]').value, document.querySelector('select[name=category_id]').value));
</script>
@endsection

@section('title')
    Add new sale offer
@endsection

@section('content')
    <div class="container mx-auto pt-10 md:w-3/4 lg:w-1/2 pb-10">

   
    </div>
@endsection

npm run build gives:

build
vite build
vite v3.2.4 building for production...
transforming...
✓ 16 modules transformed.
>rendering chunks...
Generated an empty chunk: "app"
Generated an empty chunk: "city"
Generated an empty chunk: "sale.new"
public/build/assets/logo.dc6ec60b.png                   12.91 KiB
public/build/assets/logo_v0.1.3.07617a4b.png            40.72 KiB
public/build/assets/logo_v0.1.2.a0e57e3d.png            21.10 KiB
public/build/assets/banner-1.ef506824.png               2494.34 KiB
public/build/assets/fa-regular-400.6a274e76.woff2       23.38 KiB
public/build/assets/fa-brands-400.404c746c.woff2        103.06 KiB
public/build/assets/fa-solid-900.d76fb4e8.woff2         150.61 KiB
public/build/assets/fa-v4compatibility.0db31bef.woff2   4.84 KiB
public/build/assets/fa-regular-400.4e96a7e0.ttf         59.10 KiB
public/build/assets/fa-brands-400.e523f49c.ttf          177.59 KiB
public/build/assets/fa-v4compatibility.86a687cf.ttf     10.31 KiB
public/build/assets/fa-solid-900.03f2986c.ttf           379.36 KiB
public/build/manifest.json                              3.51 KiB
public/build/assets/register.6222a7e8.js                1.15 KiB / gzip: 0.48 KiB
public/build/assets/index.023ebe22.js                   2.92 KiB / gzip: 0.99 KiB
public/build/assets/app.e5198d1b.js                     0.00 KiB / gzip: 0.02 KiB
public/build/assets/login.e47aca23.js                   1.23 KiB / gzip: 0.50 KiB
public/build/assets/city.f681beb1.js                    0.00 KiB / gzip: 0.02 KiB
public/build/assets/sale.new.09352282.js                0.00 KiB / gzip: 0.02 KiB
public/build/assets/index.f26903a7.css                  0.60 KiB / gzip: 0.31 KiB
public/build/assets/frappe-datatable.min.7624d12f.css   5.00 KiB / gzip: 1.34 KiB
public/build/assets/app.26969bb0.css                    21.65 KiB / gzip: 5.22 KiB
public/build/assets/all.min.3931434f.css                92.98 KiB / gzip: 19.89 KiB
public/build/assets/chart.a585446a.js                   480.04 KiB / gzip: 95.62 KiB

What do I do?

I do not want to place these scripts in the public folder. That would not be elegant.

Thanks for the help.

0 likes
1 reply
Sinnbeck's avatar

Most likely its because rollup has no way of knowing you are using the exports outside of the js files. I suggest a google for how to force rollup to keep export in a specific file

Please or to participate in this conversation.