Vite is not transpiling ES6 syntax

Question

I'm setting up a new repo to transpile a bunch of HTML, CSS and JS into modules that can be imported in my projects. However, I can't seem to transpile the JS file properly i.e. the output script does not contain the JavaScript code I've written.

This is my Vite config(disabling minify temporarily to show readable content):

import { defineConfig } from 'vite'
import { resolve } from 'path'

import { ViteMinifyPlugin } from 'vite-plugin-minify'

export default defineConfig({
  copyPublicDir: false,
  build: {
    minify: false,
    rollupOptions: {
      input: {
        footer: resolve(__dirname, 'src/footer/footer.html'),
        navbar: resolve(__dirname, 'src/navbar/navbar.html'),
      },
      output: {
        entryFileNames: `assets/[name].js`,
        chunkFileNames: `assets/[name].js`,
        assetFileNames: `assets/[name].[ext]`
      }
    },
  },
  plugins: [
    // ViteMinifyPlugin({})
  ]
})

This is JavaScript code I use for testing purpose:

function loadUserInfo() {
  return {
    email: "[email protected]",
    name: "Jane Doe",
    username: "janedoe"
  }
}

const world = "hello world"

console.log("testing")

export { loadUserInfo, world }

and this is the transpiled JavaScript code:

(function polyfill() {
  const relList = document.createElement("link").relList;
  if (relList && relList.supports && relList.supports("modulepreload")) {
    return;
  }
  for (const link of document.querySelectorAll('link[rel="modulepreload"]')) {
    processPreload(link);
  }
  new MutationObserver((mutations) => {
    for (const mutation of mutations) {
      if (mutation.type !== "childList") {
        continue;
      }
      for (const node of mutation.addedNodes) {
        if (node.tagName === "LINK" && node.rel === "modulepreload")
          processPreload(node);
      }
    }
  }).observe(document, { childList: true, subtree: true });
  function getFetchOpts(link) {
    const fetchOpts = {};
    if (link.integrity)
      fetchOpts.integrity = link.integrity;
    if (link.referrerPolicy)
      fetchOpts.referrerPolicy = link.referrerPolicy;
    if (link.crossOrigin === "use-credentials")
      fetchOpts.credentials = "include";
    else if (link.crossOrigin === "anonymous")
      fetchOpts.credentials = "omit";
    else
      fetchOpts.credentials = "same-origin";
    return fetchOpts;
  }
  function processPreload(link) {
    if (link.ep)
      return;
    link.ep = true;
    const fetchOpts = getFetchOpts(link);
    fetch(link.href, fetchOpts);
  }
})();
console.log("testing");

As you can see, only console.log("testing") is being parsed to the generated script. What am I missing here?

Updated:

Disabling tree shaking works without modification but somehow stopped working once I re-enable minification:

(function(){const t=document.createElement("link").relList;if(t&&t.supports&&t.supports("modulepreload"))return;for(const e of document.querySelectorAll('link[rel="modulepreload"]'))n(e);new MutationObserver(e=>{for(const r of e)if(r.type==="childList")for(const o of r.addedNodes)o.tagName==="LINK"&&o.rel==="modulepreload"&&n(o)}).observe(document,{childList:!0,subtree:!0});function s(e){const r={};return e.integrity&&(r.integrity=e.integrity),e.referrerPolicy&&(r.referrerPolicy=e.referrerPolicy),e.crossOrigin==="use-credentials"?r.credentials="include":e.crossOrigin==="anonymous"?r.credentials="omit":r.credentials="same-origin",r}function n(e){if(e.ep)return;e.ep=!0;const r=s(e);fetch(e.href,r)}})();console.log("testing");

Answer 1

By default Vite tells rollup to do tree shaking which means it will remove all unused code. If you want to keep all code even if it’s not used you can add treeshake: false to rollupOptions.