Import error leading to build error in processColor export.

[juliencurro-aptar]

Is there an existing issue for this?

• [X] 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": "yarn@4.2.2",
    "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