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
Dec 20, 2022
1
Level 1
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.
Please or to participate in this conversation.