[Bug] Can't build storybook, TypeError: The 'compilation' argument must be an instance of Compilation

What version of vite are you using?

3.0.0

System info and storybook versions

System: OS: macOS 12.4 CPU: (10) arm64 Apple M1 Pro Binaries: Node: 16.16.0 - ~/.nvm/versions/node/v16.16.0/bin/node Yarn: 1.22.19 - /opt/homebrew/bin/yarn npm: 8.11.0 - ~/.nvm/versions/node/v16.16.0/bin/npm Browsers: Chrome: 103.0.5060.134 Safari: 15.5 npmPackages: @storybook/addon-actions: ^6.5.9 => 6.5.9 @storybook/addon-essentials: ^6.5.9 => 6.5.9 @storybook/addon-interactions: ^6.5.9 => 6.5.9 @storybook/addon-links: ^6.5.9 => 6.5.9 @storybook/addon-postcss: ^2.0.0 => 2.0.0 @storybook/addon-viewport: ^6.5.9 => 6.5.9 @storybook/builder-vite: ^0.2.2 => 0.2.2 @storybook/preset-scss: ^1.0.3 => 1.0.3 @storybook/react: ^6.5.9 => 6.5.9

Describe the Bug

I’ve started my project with

• npm create vite@latest my-vue-app – --template react-ts
• npx sb init --builder @storybook/builder-vite

I can run storybook locally without any problems, but once i want to build it, it says:

/Users/dariorega/Desktop/coding/hackventures/styleguide/node_modules/webpack/lib/javascript/JavascriptModulesPlugin.js:143
throw new TypeError(
^

TypeError: The 'compilation' argument must be an instance of Compilation
at Function.getCompilationHooks (/Users/dariorega/Desktop/coding/hackventures/styleguide/node_modules/webpack/lib/javascript/JavascriptModulesPlugin.js:143:10)
at /Users/dariorega/Desktop/coding/hackventures/styleguide/node_modules/terser-webpack-plugin/dist/index.js:566:67
at SyncHook.eval [as call] (eval at create (/Users/dariorega/Desktop/coding/hackventures/styleguide/node_modules/tapable/lib/HookCodeFactory.js:19:10), <anonymous>:85:1)
at SyncHook.lazyCompileHook (/Users/dariorega/Desktop/coding/hackventures/styleguide/node_modules/tapable/lib/Hook.js:154:20)
at Compiler.newCompilation (/Users/dariorega/Desktop/coding/hackventures/styleguide/node_modules/@storybook/manager-webpack4/node_modules/webpack/lib/Compiler.js:631:26)
at /Users/dariorega/Desktop/coding/hackventures/styleguide/node_modules/@storybook/manager-webpack4/node_modules/webpack/lib/Compiler.js:667:29
at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/dariorega/Desktop/coding/hackventures/styleguide/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1)
at AsyncSeriesHook.lazyCompileHook (/Users/dariorega/Desktop/coding/hackventures/styleguide/node_modules/tapable/lib/Hook.js:154:20)
at Compiler.compile (/Users/dariorega/Desktop/coding/hackventures/styleguide/node_modules/@storybook/manager-webpack4/node_modules/webpack/lib/Compiler.js:662:28)
at /Users/dariorega/Desktop/coding/hackventures/styleguide/node_modules/@storybook/manager-webpack4/node_modules/webpack/lib/Compiler.js:321:11

Im using this project to create a component library, i have a config part in package json and vite config to actually build the package library and another one is to work on the component with storybook. I use storybook as well to publish the styleguide to a webpage.

This is my package.json content

{
	"name": "@dariorega/styleguide",
	"private": true,
	"version": "0.0.0",
	"author": "DarioRega",
	"license": "ISC",
	"publishConfig": {
		"registry": "https://npm.pkg.github.com/component-library"
	},
	"scripts": {
		"build": "run-p build:*",
		"build:scripts": "vite build",
		"build:types": "tsc --emitDeclarationOnly && tsc-alias",
		"lint:validate": "eslint ./src --ext .jsx,.js,.ts,.tsx --quiet --ignore-path ./.gitignore",
		"lint:check-format": "prettier --loglevel warn \"./**/*.{js,jsx,ts,tsx,css,md,json}\" ",
		"lint": "npm run lint:check-format && npm run lint:validate",
		"lint:fix": "npm run lint:validate --fix && npm run lint:check-format --write",
		"type-check": "tsc",
		"test": "exit 0",
		"prepare": "husky install",
		"storybook": "start-storybook -p 6006",
		"build:storybook": "build-storybook -- -o styleguide-dist --no-manager-cache"
	},
	"peerDependencies": {
		"react": "^18.2.0",
		"react-dom": "^18.2.0",
		"styled-components": "^5.3.5"
	},
	"devDependencies": {
		"@babel/core": "^7.18.9",
		"@storybook/addon-actions": "^6.5.9",
		"@storybook/addon-essentials": "^6.5.9",
		"@storybook/addon-interactions": "^6.5.9",
		"@storybook/addon-links": "^6.5.9",
		"@storybook/addon-postcss": "^2.0.0",
		"@storybook/addon-viewport": "^6.5.9",
		"@storybook/builder-vite": "^0.2.2",
		"@storybook/preset-scss": "^1.0.3",
		"@storybook/react": "^6.5.9",
		"@types/node": "^18.6.2",
		"@types/react": "^18.0.15",
		"@types/react-dom": "^18.0.6",
		"@types/styled-components": "^5.1.25",
		"@typescript-eslint/eslint-plugin": "^5.31.0",
		"@typescript-eslint/parser": "^5.31.0",
		"@vitejs/plugin-react": "^2.0.0",
		"autoprefixer": "^10.4.7",
		"babel-loader": "^8.2.5",
		"eslint": "^8.20.0",
		"eslint-config-prettier": "^8.5.0",
		"eslint-plugin-import": "^2.26.0",
		"eslint-plugin-jsx-a11y": "^6.6.1",
		"eslint-plugin-prettier": "^4.2.1",
		"eslint-plugin-react": "^7.30.1",
		"eslint-plugin-simple-import-sort": "^7.0.0",
		"eslint-plugin-storybook": "^0.6.1",
		"eslint-plugin-unused-imports": "^2.0.0",
		"husky": "^8.0.1",
		"npm-run-all": "^4.1.5",
		"postcss": "^8.4.14",
		"prettier": "^2.7.1",
		"react": "^18.2.0",
		"react-dom": "^18.2.0",
		"sass": "^1.54.0",
		"styled-components": "^5.3.5",
		"tailwindcss": "^3.1.6",
		"tsc-alias": "^1.7.0",
		"typescript": "^4.6.4",
		"vite": "^3.0.0",
		"vite-plugin-dts": "^1.4.0"
	},
	"main": "dist/index.cjs.js",
	"module": "dist/index.es.js",
	"types": "dist/index.d.ts",
	"exports": {
		".": {
			"require": "./dist/index.cjs.js",
			"import": "./dist/index.es.js"
		},
		"./dist/style.css": "./dist/style.css"
	},
	"sideEffects": false,
	"files": [
		"dist"
	]
}

Strange thing is, i do not have any obvious dependecy to webpack, it seems its storybook that is using them and bring conflict.

Here is my repo (branch vite) where you can see my viteconfig and my .storybook folder with some configs https://github.com/DarioRega/component-lib-test/tree/vite

Thanks in advance and let me know if need more informations

Link to Minimal Reproducible Example

https://github.com/DarioRega/component-lib-test/tree/vite

Participation

• I am willing to submit a pull request for this issue.

[IanVS]

Starting in storybook 7 there will be no more webpack installed.

[DarioRega]

@IanVS i wasn’t able to reproduce, seems like a hell of nested dependencies with that webpack… Can’t wait for storybook 7 ! Thanks for your support, i will close that issue in the meantime