💛 You can help the author become a full-time open-source maintainer by sponsoring him on GitHub.

vite-plugin-remove-exports

Use Case

It's useful if you want to implement something like Next.js' getServerSideProps or the loader function from Remix.js. This is done by creating a proxy of your code with the exports you specfied excluded and using esbuild to bundle the proxy code in order to eliminate unneeded exports.

Despite that we added an extra step to the build process, the plugin is still very fast due the how fast esbuild is.

Install

npm i vite-plugin-remove-exports

Usage

vite.config.ts:

export default {
  plugins: [
    removeExports({
      match() {
        return ['getServerSideProps']
      },
    }),
  ],
}

Now if you have a index.tsx:

import fs from 'fs'

export const getServerSideProps = () => {
  return {
    content: fs.readFileSync('./foo.txt', 'utf-8'),
  }
}

export default ({ content }) => {
  return <div>{content}</div>
}

The output will be:

export default ({ content }) => {
  return <div>{content}</div>
}

Advanced usage:

removeExports({
  match(filepath, ssr) {
    // Ignore SSR build
    if (!ssr) return

    // Remove getServerSideProps in "pages" in browser build
    if (filepath.startsWith(pagesDir)) {
      return ['getServerSideProps']
    }
  },
}),

Caveats

export * is not supported.
When using both Vue's <script setup> and <script> tags in a single file, the imports in regular <script> tags can't be removed even if they're only used in removed exports.