ESM file cannot be loaded by require

[arnriu]

I wanted to give a try to this plugin.
But unfortunately, I've got an error:

Error: Build failed with 1 error:
node_modules/.pnpm/esbuild@0.18.20/node_modules/esbuild/lib/main.js:1373:27: ERROR: [plugin: externalize-deps] "vite-plugin-deadfile" resolved to an ESM file. ESM file cannot be loaded by `require`. See http://vitejs.dev/guide/troubleshooting.html#this-package-is-esm-only for more details.

[stauren]

It's a bug in version 1.0.0, please use v1.0.1

[stauren]

Fixed in 1.0.1

[arnriu]

Hey @stauren , thank you.
I'm definitely using 1.0.1. This is my package.json after pnpm i vite-plugin-deadfile

"vite-plugin-deadfile": "^1.0.1",

[stauren]

That's weird. Can you post your vite config related to the plugin? I am using a full ESM setup, it seems it's been loaded with 'require', try 'import'.

[arnriu]

Sure, here it is:

/* eslint-disable no-undef */
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react-swc'
import svgrPlugin from 'vite-plugin-svgr'
import mkcert from 'vite-plugin-mkcert'
import { VitePWA } from 'vite-plugin-pwa'
import { reactClickToComponent } from 'vite-plugin-react-click-to-component'
import eslint from 'vite-plugin-eslint'
import deadFile from 'vite-plugin-deadfile'
import path from 'path'

export default defineConfig(() => {
  return {
    server: { https: true },
    plugins: [
      reactClickToComponent(),
      react(),
      svgrPlugin(),
      mkcert(),
      eslint({
        cache: false,
        include: ['./src/**/*.js', './src/**/*.jsx'],
        exclude: [],
        failOnError: false
      }),
      VitePWA({
        registerType: 'autoUpdate',
        useCredentials: true,
        devOptions: {
          enabled: false
        },
        manifest: {
          name: 'Funbridge',
          short_name: 'Funbridge',
          icons: [
            {
              src: 'favicon.ico',
              sizes: '64x64 32x32 24x24 16x16',
              type: 'image/x-icon'
            },
            {
              src: 'logo192.png',
              type: 'image/png',
              sizes: '192x192'
            },
            {
              src: 'logo512.png',
              type: 'image/png',
              sizes: '512x512'
            }
          ],
          start_url: './index.html',
          display: 'standalone',
          theme_color: '#011128',
          background_color: '#f9fafb'
        },
        workbox: {
          globPatterns: [
            '**/*.{js,css,html,ico,jpg,png,webp,svg,woff,woff2,ttf,otf,mp3}'
          ],
          globIgnores: ['img/flags/**', '**/*chapitre*']
        }
      }),
      deadFile()
    ],
    build: {
      sourcemap: false,
      chunkSizeWarningLimit: 1400,
      outDir: 'build',
      assetsDir: 'fb_js',
      rollupOptions: {
        input: {
          funbridge: path.resolve(__dirname, 'index.html'),
          sso: path.resolve(__dirname, 'src/sso.js')
        },
        output: {
          assetFileNames: assetInfo => {
            let extType = assetInfo.name.split('.').pop()
            if (/otf|ttf|woff2?/i.test(extType)) {
              extType = 'fonts'
            }
            if (/png|jpe?g|svg|gif|tiff|bmp|ico/i.test(extType)) {
              extType = 'img'
            }
            return `assets/${extType}/[name]-[hash][extname]`
          },
          entryFileNames: file =>
            file?.name === 'sso' ? 'sso.js' : '[name]-[hash].js',
          manualChunks(id) {
            if (id.includes('node_modules')) {
              return (
                'vendors/' +
                id
                  .toString()
                  .split('node_modules/')[1]
                  .split('.pnpm/')[1]
                  .split('/')[0]
              )
            }
          }
        }
      }
    },
    resolve: {
      alias: {
        '@actions': path.resolve(__dirname, './src/actions/'),
        '@assets': path.resolve(__dirname, './src/assets/'),
        '@bridgetable': path.resolve(__dirname, './src/BridgeTable/'),
        '@components': path.resolve(__dirname, './src/components/'),
        '@constants': path.resolve(__dirname, './src/constants/'),
        '@helpers': path.resolve(__dirname, './src/helpers/'),
        '@hooks': path.resolve(__dirname, './src/hooks/'),
        '@reducers': path.resolve(__dirname, './src/reducers/'),
        '@services': path.resolve(__dirname, './src/services/'),
        '@styles': path.resolve(__dirname, './src/styles/'),
        '@': path.resolve(__dirname, './src/')
      }
    }
  }
})

[stauren]

According to the vite documentation: http://vitejs.dev/guide/troubleshooting.html#this-package-is-esm-only

You could:

• adding "type": "module" to the nearest package.json
• or renaming vite.config.js/vite.config.ts to vite.config.mjs/vite.config.mts

I think this is because I only provided the ESM version in the package, a little radical, haha.

[stauren]

Since ESM is the future, and there is dual package hazard, maybe we could all contribute a little for the future? That's why I choose the ESM-only solution.

[stauren]

Add support for cjs format export in 1.0.2.

[stauren]

cjs node API is officially deprecated in vite 5.0: https://vitejs.dev/guide/migration#deprecate-cjs-node-api

[arnriu]

Hello @stauren
I switched to vite 5, and I'm now esm-only.
I installed deadFile v 1.0.2.
I've got this error. It seems dist is missing files.

✘ [ERROR] Failed to resolve entry for package "vite-plugin-deadfile". The package may have incorrect main/module/exports specified in its package.json.

Screenshots :

[stauren]

@arnriu Thank you so much. 1.0.3 should fix this silly bug.
I can't believe I published an empty package...