Vite build error: TypeError: PluginCritical is not a function

[Kretiss]

Describe the bug

Cannot build Vite project when using this plugin in plugins section in vite.config.ts. It says TypeError: PluginCritical is not a function. What am I doing wrong? I tried rollup.config.js, but it looks like Vite is ignoring that file.

Steps to reproduce

• Install plugin
• Import plugin in vite.config.ts with import PluginCritical from 'rollup-plugin-critical'
• use plugin in config

/// <reference types="vite/client" />
import { defineConfig, loadEnv, splitVendorChunkPlugin } from 'vite'
import react from '@vitejs/plugin-react-swc'
import svgr from 'vite-plugin-svgr'
import eslintPlugin from 'vite-plugin-eslint'
import { sentryVitePlugin } from '@sentry/vite-plugin'
import { visualizer } from 'rollup-plugin-visualizer'
import viteCompression from 'vite-plugin-compression'
import { ViteImageOptimizer } from 'vite-plugin-image-optimizer'
import VitePluginInjectPreload from 'vite-plugin-inject-preload'
import PluginCritical from 'rollup-plugin-critical'


// https://vitejs.dev/config/
export default defineConfig(({ mode }) => {
  const env = loadEnv(mode, process.cwd(), '')

  return {
    build: {
      // required for sentry: tells vite to create source maps
      sourcemap: true,
      // cssCodeSplit: true,
    },
    server: {
      port: 3000,
      host: true,
    },
    plugins: [
      react(),
      svgr(),
      eslintPlugin(),
      sentryVitePlugin({
        url: env.VITE_SENTRY_URL,
        authToken: env.VITE_SENTRY_AUTH_TOKEN,
        org: env.VITE_SENTRY_ORG,
        project: env.VITE_SENTRY_PROJECT,
        release: {
          create: !!env.SENTRY_DEPLOY_ENV,
          deploy: {
            env: env.SENTRY_DEPLOY_ENV || 'Not specified',
          },
          setCommits: {
            auto: true,
            ignoreMissing: true,
          },
        },
        // telemetry: false,
        // debug: true,
      }),
      visualizer({
        template: 'treemap', // or sunburst
        // open: true,
        gzipSize: true,
        brotliSize: true,
        filename: 'analyse.html', // will be saved in project's root
      }),
      splitVendorChunkPlugin(),
      viteCompression(),
      ViteImageOptimizer(),
      VitePluginInjectPreload({
        files: [
          {
            match: /hero-[a-zA-Z0-9]*.webp$/,
          },
        ],
      }),
      PluginCritical({
        criticalUrl: '',
        criticalBase: './',
        criticalPages: [{ uri: '', template: 'index' }],
        criticalConfig: {},
      }),
    ],
  }
})

Screenshots

Versions

• Plugin version: 1.0.12
• Vite version: 4.3.9

[ElPrudi]

Got it to work with a workaround:

      (PluginCritical as any).default({
        criticalUrl: '',
        criticalBase: './',
        criticalPages: [{ uri: '', template: 'index' }],
        criticalConfig: {},
      }),

The any is needed or else typescript will throw an error.

[davidhellmann]

Got it to work with a workaround:

      (PluginCritical as any).default({
        criticalUrl: '',
        criticalBase: './',
        criticalPages: [{ uri: '', template: 'index' }],
        criticalConfig: {},
      }),

The any is needed or else typescript will throw an error.

Thanks! Works!

[khalwat]

hmmmm. I'm going to see if there's a way I can solve this at the plugin level

[khalwat]

Okay so I was already properly generating a CJS and ESM variants of the library, but I needed to add Conditional Exports as a hint to help with module resolution:

https://nodejs.org/dist/latest-v18.x/docs/api/packages.html#conditional-exports

So what was happening is it was doing an import of the CJS version of the library, which worked likely because of the esModuleInterop in your project's tsconfig.json until the project was changed to "type": "module"

Adding this to the project's package.json fixes it:

  "exports": {
    "types": "./dist/index.d.ts",
    "import": "./dist/index.mjs",
    "require": "./dist/index.js"
  },

I'll roll out an update shortly.

[khalwat]

Released as 1.0.13 -> https://github.com/nystudio107/rollup-plugin-critical/releases/tag/1.0.13