antfu-collective / vite-plugin-inspect

Inspect the intermediate state of Vite plugins
MIT License
1.29k stars 75 forks source link

Inspect is not a function, Inspect.default is #100

Closed effulgentsia closed 11 months ago

effulgentsia commented 11 months ago

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

sxzz commented 11 months ago

Maybe caused by #99, /cc @userquin

userquin commented 11 months ago

Maybe caused by #99, /cc @userquin

I'll check it

userquin commented 11 months ago

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

imagen

userquin commented 11 months ago

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

imagen

userquin commented 11 months ago

@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:

I'll try to fix the problem here.

userquin commented 11 months ago

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 commented 8 months ago

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 commented 8 months ago

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

spaceemotion commented 8 months ago

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 commented 8 months ago

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