vitePluginString is not a function

Question

Created a vite + svelte

$ npm init vite@latest
✔ Project name: … app1
✔ Select a framework: › svelte
✔ Select a variant: › svelte-ts

wanted to include vite-plugin-string to use glsl file

installed

npm install --save-dev vite-plugin-string

configured vite.config.js file as below

import { defineConfig } from 'vite'
import { svelte } from '@sveltejs/vite-plugin-svelte'
import vitePluginString from 'vite-plugin-string'


// https://vitejs.dev/config/
export default defineConfig({
  plugins: [svelte(),vitePluginString()]
})

As soon as run npm run dev

I get this error

> [email protected] dev
> vite

failed to load config from ....../Six/trailRun/vite.config.js
error when starting dev server:
TypeError: vitePluginString is not a function
    at file:///....../Six/trailRun/vite.config.js?t=1642958252054:8:22
    at ModuleJob.run (node:internal/modules/esm/module_job:195:25)
    at async Promise.all (index 0)
    at async ESMLoader.import (node:internal/modules/esm/loader:337:24)
    at async importModuleDynamicallyWrapper (node:internal/vm/module:437:15)
    at async loadConfigFromFile (/....../Six/trailRun/node_modules/vite/dist/node/chunks/dep-f5552faa.js:75089:31)
    at async resolveConfig (/....../Six/trailRun/node_modules/vite/dist/node/chunks/dep-f5552faa.js:74656:28)
    at async createServer (/....../Six/trailRun/node_modules/vite/dist/node/chunks/dep-f5552faa.js:60326:20)
    at async CAC.<anonymous> (/....../Six/trailRun/node_modules/vite/dist/node/cli.js:688:24)

What changes I need to make to correct this?

Answer 1

The module actually exports the plugin function in a default property:

// vite.config.js
import { defineConfig } from 'vite'
import { svelte } from '@sveltejs/vite-plugin-svelte'
import vitePluginString from 'vite-plugin-string'

export default defineConfig({
  plugins: [
    svelte(),
    vitePluginString.default(), 👈
  ],
})

demo