Inspect is not a function, Inspect.default is

[effulgentsia]

Describe the bug

The README says that

import Inspect from 'vite-plugin-inspect'

export default {
  plugins: [
    Inspect()
  ],
}

should work. When I do that, I get:

TypeError: (0 , import_vite_plugin_inspect.default) is not a function

The following works but doesn't match the README:

import Inspect from 'vite-plugin-inspect'

export default {
  plugins: [
    Inspect.default()
  ],
}

Reproduction

See the description

System Info

Node 18
Vite 5.0.4
Vite Plugin Inspect 0.8.0
Bun 1.0.14

Used Package Manager

bun

Validations

• Follow our Code of Conduct
• Read the Contributing Guide.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Check that this is a concrete bug. For Q&A, please open a GitHub Discussion instead.
• The provided reproduction is a minimal reproducible of the bug.

[sxzz]

Maybe caused by #99, /cc @userquin

[userquin]

Maybe caused by #99, /cc @userquin

I'll check it

[userquin]

vite + vanilla-ts in SB: https://stackblitz.com/edit/vitejs-vite-pyuf7x

[userquin]

ok, problems with CJS, we should patch cjs/d.cts: https://stackblitz.com/edit/vitejs-vite-9ncgh5?file=main.js

[userquin]

@effulgentsia you can fix it adding "type": "module" to your package.json file or renaming your vite.config.js to vite.config.mjs or vite.config.ts to vite.config.mts:

• https://stackblitz.com/edit/vitejs-vite-4jcrk7?file=main.js (patch1: type module)
• https://stackblitz.com/edit/vitejs-vite-lchcrs?file=main.js (patch2: .mjs)

I'll try to fix the problem here.

[userquin]

fixed: SB repo using vite-plugin-inspect v0.8.1 https://stackblitz.com/edit/vitejs-vite-xmxn4k

Vite 5 CJS warning there:

The CJS build of Vite's Node API is deprecated. See https://vitejs.dev/guide/troubleshooting.html#vite-cjs-node-api-deprecated for more details.

[spaceemotion]

I somehow am getting the same error in a Storybook 8 vite project. I have vite@5.1.6 installed, as well as vite-plugin-inspect@0.8.3.

info => Starting manager..
info => Starting preview..
=> Failed to build the preview
TypeError: (0 , import_vite_plugin_inspect.default) is not a function
    at Object.viteFinal (./.storybook/main.mjs:172:28)
    at ./node_modules/@storybook/core-common/dist/index.js:12:1162
    at async createViteServer (./node_modules/@storybook/builder-vite/dist/index.js:55:11517)
    at async Module.start (./node_modules/@storybook/builder-vite/dist/index.js:58:1102)
    at async storybookDevServer (./node_modules/@storybook/core-server/dist/index.js:28:7699)
    at async buildOrThrow (./node_modules/@storybook/core-server/dist/index.js:24:7665)
    at async buildDevStandalone (./node_modules/@storybook/core-server/dist/index.js:66:1322)
    at async withTelemetry (./node_modules/@storybook/core-server/dist/index.js:28:3579)
    at async dev (./node_modules/@storybook/cli/dist/generate.js:663:563)
    at async Command.<anonymous> (./node_modules/@storybook/cli/dist/generate.js:665:250)

WARN Broken build, fix the error above.
WARN You may need to refresh the browser.

I added the plugin like so:

import Inspect from 'vite-plugin-inspect';

const config = {
  // ...
  viteFinal(config) {
    config.plugins.unshift(Inspect());

    return config;
  },
};

[userquin]

Check if you can rename Storybook config file to mjs or just add .default suffix: Inspect.default()

[spaceemotion]

As you can see from the stacktrace, the file already is named main.mjs - and yes, i already tried Inspect.default() as well.

I just tried to delete the build cache and rebuild the whole thing again, and the .default() fix seems to work with that now? weird.
Interestingly enough, it runs on the storybook port (and not the one declared in the README of this package).

[userquin]

I just tried to delete the build cache and rebuild the whole thing again, and the .default() fix seems to work with that now? weird.

We've moved the package to ESM first, since the package is using default export for the plugin, CJS and ESM don't play well together, we need to update the readme file to include the .default suffix when using this plugin in CJS.

Interestingly enough, it runs on the storybook port (and not the one declared in the README of this package).

This plugin doesn't start a dev server, it just add a middleware to it (sirv iirc) to serve the client ui under <base>__inspect: https://github.com/antfu/vite-plugin-inspect/blob/67e702f998da6aed6474a0b29cd4b784b3ccf1ae/src/node/index.ts#L120-L123