Import error leading to build error in processColor export.

[juliencurro-aptar]

Is there an existing issue for this?

• I have searched the existing issues

Describe the issue

I am trying to build a design system package using vite, but I get the following error, is it a known issue ?

x Build failed in 1.15s
error during build:
../../node_modules/react-native-web/dist/exports/processColor/index.js (11:7): "default" is not exported by "../../node_modules/@react-native/normalize-colors/index.js", imported by "../../node_modules/react-native-web/dist/exports/processColor/index.js".
file: /Users/.../my_monorepo/node_modules/react-native-web/dist/exports/processColor/index.js:11:7

 9:  */
10: 
11: import normalizeColor from '@react-native/normalize-colors';
           ^
12: var processColor = color => {
13:   if (color === undefined || color === null) {

    at getRollupError (file:///Users/.../my_monorepo/node_modules/rollup/dist/es/shared/parseAst.js:396:41)
    ...

Here's my vite.config.ts :

import tsconfigPaths from 'vite-tsconfig-paths';
import svgr from 'vite-plugin-svgr';
import react from '@vitejs/plugin-react';
import dts from 'vite-plugin-dts';
import path from 'path';
import { Plugin, defineConfig } from 'vite';

const extensions = ['.web.js', '.web.ts', '.web.tsx', '.web.jsx', '.js', '.jsx', '.json', '.ts', '.tsx', '.mjs'];

export function reactNativeWeb(options: { babelPlugins: any[]; babelPresets: any[] }): Plugin {
	const plugin: Plugin = {
		name: 'vite:react-native-web',
		enforce: 'pre',
		config(_userConfig, env) {
			return {
				plugins: [
					react({
						jsxRuntime: 'automatic',
						jsxImportSource: 'nativewind',
						babel: {
							plugins: options.babelPlugins,
							presets: options.babelPresets,
						},
					}),
				],
				define: {
					// reanimated support
					'global.__x': {},
					_frameTimestamp: undefined,
					_WORKLET: false,
					__DEV__: `${env.mode === 'development'}`,
					'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || env.mode),
				},
				optimizeDeps: {
					include: [/* 'react-native-reanimated',  */ 'nativewind', 'react-native-css-interop'],
					esbuildOptions: {
						jsx: 'transform',
						resolveExtensions: extensions,
						loader: {
							'.js': 'jsx',
						},
					},
				},
				resolve: {
					extensions: extensions,
					alias: {
						'react-native': 'react-native-web',
						'react-native-linear-gradient': 'react-native-web-linear-gradient',
					},
				},
			};
		},
	};

	return plugin;
}

export default defineConfig({
	build: {
		lib: {
			entry: path.resolve(__dirname, 'src/index.ts'),
			name: 'lib-DesignSystem',
			formats: ['es', 'umd'],
			fileName: format => `lib-designsystem.${format}.js`,
		},
		rollupOptions: {
			external: ['react', 'react-dom'],
			output: {
				globals: {
					react: 'React',
					'react-dom': 'ReactDOM',
				},
			},
		},
		commonjsOptions: {
			include: ['nativewind', 'react-native-css-interop'],
		},
	},
	plugins: [
		react(),
		tsconfigPaths(),
		svgr({ svgrOptions: { exportType: 'default', ref: true, svgo: false, titleProp: true }, include: '**/*.svg' }),
		reactNativeWeb({
			babelPlugins: [],
			babelPresets: [],
		}),
		dts(),
	],
});

And my package.json :

{
	"name": "lib",
	"packageManager": "[email protected]",
	"type": "module",
	"version": "1.0.0",
	"main": "src/index.ts",
	"types": "src/index.ts",
	"exports": {
		".": {
			"import": "./src/index.ts",
			"require": "./src/index.ts"
		}
	},
	"devDependencies": {
		"@babel/core": "^7.25.2",
		"@babel/preset-react": "^7.24.7",
		"@chromatic-com/storybook": "^1.9.0",
		"@react-native/babel-preset": "^0.75.3",
		"@storybook/addon-essentials": "^8.3.3",
		"@storybook/addon-interactions": "^8.3.3",
		"@storybook/addon-links": "^8.3.3",
		"@storybook/addon-onboarding": "^8.3.3",
		"@storybook/addon-react-native-web": "^0.0.25",
		"@storybook/blocks": "^8.3.3",
		"@storybook/builder-vite": "^8.3.3",
		"@storybook/react": "^8.3.3",
		"@storybook/react-vite": "^8.3.3",
		"@storybook/test": "^8.3.3",
		"@types/babel__core": "^7",
		"@types/react-dom": "^18.3.0",
		"@types/tailwindcss": "^3.1.0",
		"@vitejs/plugin-react": "^4.3.1",
		"autoprefixer": "^10.4.20",
		"babel-plugin-react-native-web": "^0.19.12",
		"enginetypes": "workspace:^1.0.0",
		"eslint": "8.57.0",
		"eslint-plugin-storybook": "^0.9.0",
		"postcss": "^8.4.47",
		"prop-types": "^15.8.1",
		"react-dom": "^18.3.1",
		"react-native-web": "^0.19.12",
		"storybook": "^8.3.3",
		"tailwindcss": "^3.4.14",
		"ts-node": "^10.9.2",
		"typescript": "^5.6.2",
		"vite-plugin-dts": "^4.2.2",
		"vite-plugin-svgr": "^4.2.0"
	},
	"scripts": {
		"build": "vite build",
		"storybook": "storybook dev -p 6006",
		"build-storybook": "storybook build",
		"tailwind": "tsc tailwind.config.ts"
	},
	"peerDependencies": {
		"nativewind": "4.1.23"
	},
	"dependencies": {
		"@babel/runtime": "^7.26.0",
		"i18next": "^23.11.3",
		"nativewind": "4.1.23",
		"react": "^18.3.1",
		"react-i18next": "14.1.1",
		"react-native-gesture-handler": "^2.19.0",
		"react-native-safe-area-context": "^4.11.0",
		"vite": "^5.4.7",
		"webpack": "^5.94.0"
	}
}

Expected behavior

No error :)

Steps to reproduce

Can't find what are the steps leading to that issue.

Test case

http://

Additional comments

No response