[v4] `package.json` in `@tailwindcss/vite` is not standard.

[blackcater]

When I use @tailwindcss/vite@4 with storybook. It reported an error as bellow:

SB_CORE-SERVER_0007 (MainFileEvaluationError): Storybook couldn't evaluate your .storybook/main.ts file.

Error [ERR_PACKAGE_PATH_NOT_EXPORTED]: No "exports" main defined in /.../node_modules/@tailwindcss/vite/package.json
    at exportsNotFound (node:internal/modules/esm/resolve:303:10)
    at packageExportsResolve (node:internal/modules/esm/resolve:593:13)
    at resolveExports (node:internal/modules/cjs/loader:591:36)
    at Module._findPath (node:internal/modules/cjs/loader:668:31)
    at Module._resolveFilename (node:internal/modules/cjs/loader:1130:27)
    at Module._resolveFilename (/Users/blackcater/Workspace/Codes/proj/staple/node_modules/esbuild-register/dist/node.js:4799:36)
    at Module._load (node:internal/modules/cjs/loader:985:27)
    at Module.require (node:internal/modules/cjs/loader:1235:19)
    at require (node:internal/modules/helpers:176:18)
    at Object.<anonymous> (/.storybook/main.ts:6:25)

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

error: script "dev" exited with code 1

It seems like esbuild can't find main field in package.json from @tailwindcss/vite package.

[blackcater]

const config: StorybookConfig = {
  stories: [/** stories */],
  addons: [/** addons */],
  framework: {
    name: '@storybook/react-vite',
    options: {},
  },
  viteFinal: async (config) => {
    config.plugins = config.plugins || []
    config.plugins.push((await import('@tailwindcss/vite')).default())

    return config
  },
}

export default config

Everything works fine.

Maybe @tailwindcss/vite's package.json should more standard.

{
  "main": "./dist/index.js", // CommonJS
  "module": "./dist/index.mjs", // ESM
  "types": "./dist/index.d.ts",
  "exports": {
    ".": {
      "types": "./dist/index.d.mts",
      "import": "./dist/index.mjs",
      "default": "./dist/index.js",
    },
    "./package.json": "./package.json"
  },
}

[thecrypticace]

What version of Node are you using? main and module are not required in Node as long as you have exports defined.

[blackcater]

What version of Node are you using? main and module are not required in Node as long as you have exports defined.

node --version
v20.11.0

And the version of storybook is v8.0.0.

[KrisBraun]

@blackcater Could you share a repo with a reproduction?

[rostero1]

I got the same error when using this package with bun and vite. I thought it was a bun thing, but Jarred replied back:

The error is correct, “vite” is not there in exports. So I think it’s a tailwind thing.

Error:

ERR_PACKAGE_PATH_NOT_EXPORTED No "exports" main defined in @tailwindcss/vite/package.json

[tounsoo]

~I think this is the only post I found that mentions Storybook for v4, I am not able to get it working, can you share your setup?~

nvm got it working without much hassle

[ekwoka]

The error is correct, “vite” is not there in exports. So I think it’s a tailwind thing.

@rostero1 Unfortunately this seems like an incorrectly articulated statement, as if he was expecting vite to be an export of tailwindcss as opposed to @tailwindcss/vite

Don't know if he checked the right thing but said the wrong thing, or actually checked the wrong thing.