Errors in vite 5.0.0 - Githubissues

I'm trying to use twin in a new project in vite 5.0.0, I followed the example setup here but I'm getting some errors on console :

StyledComponent.ts:162 styled-components: it looks like an unknown prop "isActiveLink" 
is being sent through to the DOM, which will likely trigger a React console error. 
If you would like automatic filtering of unknown props, you can opt-into that behavior via 
`<StyleSheetManager shouldForwardProp={...}>` (connect an API like `@emotion/is-prop-valid`) or consider using transient props (`$` prefix for automatic filtering.)

Warning: React does not recognize the `isActiveLink` prop on a DOM element.
 If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `isactivelink` instead.
 If you accidentally passed it from a parent component, remove it from the DOM element.

this is the component related to the error :

const StyledListItem = styled.li<{ isActiveLink: boolean }>(
    ({ isActiveLink }: { isActiveLink: boolean }) => [
        tw`
        max-w-[360px]
        w-full
        lg:w-fit
        flex gap-x-4 
        lg:hover:underline`,
        isActiveLink
            ? tw`lg:text-neutral-800 lg:bg-transparent bg-amber-100 rounded lg:rounded-none`
            : tw`text-neutral-600`,
    ]
);

The funny thing is that this is being rendered properly and no custom attributes are being passed to the DOM, however other components are being rendered with custom attributes for example this button :

const StyledButton = styled.button<ButtonLabelProps>(
    ({ btnSize, btnStyle }: ButtonLabelProps) => [
        tw`relative flex items-center justify-center text-base-black rounded-lg
         max-w-[360px]`,
        btnSizeStyles[btnSize],
        btnStyleStyles[btnStyle],
        hoverStyles,
        activeStyles,
    ]
);

is being rendered with custom btnsize and btnstyle attributes :

<button btnsize="small" btnstyle="solid" class="ButtonLabel__StyledButton-sc-1wu4uv6-0 frsBxQ Label-Medium regular"><h6 class="flex items-center gap-x-2">Log In</h6>
</button>

In some instances the button has the correct styles applied, sometimes not. I'm wondering how can I fix this?

my package.json :

{
    "name": "admin-project",
    "private": true,
    "version": "0.0.0",
    "main": "build/src/index.js",
    "types": "build/src/index.d.ts",
    "files": [
        "build/src"
    ],
    "scripts": {
        "dev": "vite",
        "build": "tsc && vite build",
        "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
        "preview": "vite preview",
        "compile": "tsc",
        "prepare": "npm run compile && husky install"
    },
    "dependencies": {
        "lottie-react": "^2.4.0",
        "react": "^18.2.0",
        "react-dom": "^18.2.0",
        "react-hook-form": "^7.48.2",
        "react-router-dom": "^6.20.0",
        "styled-components": "^6.1.1"
    },
    "devDependencies": {
        "@types/react": "^18.2.39",
        "@types/react-dom": "^18.2.15",
        "@typescript-eslint/eslint-plugin": "^6.12.0",
        "@typescript-eslint/parser": "^6.12.0",
        "@vitejs/plugin-react": "^4.2.0",
        "autoprefixer": "^10.4.16",
        "babel-plugin-macros": "^3.1.0",
        "babel-plugin-styled-components": "^2.1.4",
        "eslint": "^8.53.0",
        "eslint-config-prettier": "^9.0.0",
        "eslint-plugin-prettier": "^5.0.1",
        "eslint-plugin-react": "^7.33.2",
        "eslint-plugin-react-hooks": "^4.6.0",
        "eslint-plugin-react-refresh": "^0.4.4",
        "husky": "^8.0.3",
        "lint-staged": "^15.1.0",
        "postcss": "^8.4.31",
        "prettier": "3.1.0",
        "sass": "^1.69.5",
        "tailwindcss": "^3.3.5",
        "twin.macro": "^3.4.0",
        "typescript": "^5.2.2",
        "vite": "^5.0.0",
        "vite-plugin-svgr": "^4.2.0",
        "vite-tsconfig-paths": "^4.2.1"
    },
    "lint-staged": {
        "src/**/*.{js,jsx,ts,tsx}": [
            "prettier --write --ignore-unknown"
        ],
        "*.{ts,tsx}": "eslint --cache --fix"
    },
    "babelMacros": {
        "twin": {
            "preset": "styled-components"
        }
    }
}

vite.config.js :

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

// https://vitejs.dev/config/
export default defineConfig({
    optimizeDeps: {
        esbuildOptions: {
            target: 'es2020',
        },
    },
    esbuild: {
        // https://github.com/vitejs/vite/issues/8644#issuecomment-1159308803
        logOverride: { 'this-is-undefined-in-esm': 'silent' },
    },
    plugins: [
        react({
            babel: {
                plugins: [
                    'babel-plugin-macros',
                    'babel-plugin-styled-components',
                ],
            },
        }),
        svgr({
            // Set it to `true` to export React component as default.
            // Notice that it will overrides the default behavior of Vite

            // svgr options: https://react-svgr.com/docs/options/
            svgrOptions: {
                icon: true,
                dimensions: false,
            },

            // esbuild options, to transform jsx to js
            esbuildOptions: {
                // ...
            },

            // A minimatch pattern, or array of patterns,
            // which specifies the files in the build the plugin should include.
            // By default all svg files will be included
            include: '**/*.svg?react',

            // A minimatch pattern, or array of patterns, which specifies the files
            // in the build the plugin should ignore
            // By default no files are ignored
            exclude: '',
        }),
        tsconfigPaths(),
    ],
});

ben-rogerson / twin.macro

Errors in vite 5.0.0 #843