Fix vite config

[27medkamal]

This wasn't obvious to me at first as the new vite installation guide works on the examples provided here.

However, there is an issue where if you use React.forwardRef in your components, you get the error: Uncaught TypeError: React.forwardRef is not a function

It seems that live_vue has the same config as well https://github.com/Valian/live_vue/blob/main/assets/copy/vite.config.js#L22

As for why it works otherwise without having this line, I'm not entirely sure, but going by live_vue which this vite implementation models, it seems to fix the issue.

Contributor checklist

• [x] My commit messages follow the Conventional Commit Message Format For example: fix: Multiply by appropriate coefficient, or feat(Calculator): Correctly preserve history Any explanation or long form information in your commit message should be in a separate paragraph, separated by a blank line from the primary message

[27medkamal]

Actually, this seems to break SSR. Will have to investigate more

[mrdotb]

Hello, I was going to say that I try this but it break SSR. Could you add an example with forward ref ? I will take a look

[mrdotb]

I try a simple forwardRef, useRef but I don't see any issue :thinking:

import React, { forwardRef, useRef } from 'react';

// Child component using forwardRef
const Input = forwardRef((props, ref) => {
  return <input ref={ref} {...props} />;
});

export function Simple() {
  const inputRef = useRef(null);

  const focusInput = () => {
    // This will focus the input in the child component
    inputRef.current.focus();
  };

  return (
    <div>
      <Input ref={inputRef} placeholder="Type something here..." />
      <button onClick={focusInput}>Focus Input</button>
    </div>
  );
}

[27medkamal]

I also tried adding it to your examples project, but it worked fine.

I'll need to debug this a bit more

[27medkamal]

This ended up working just fine on my end after cleaning up deps and node_modules. Not sure what happened there, so closing this for now. Sorry for the false alarm.

[timadevelop]

For anyone having the same issue: try to rename react folder to something like react-components & update imports and vite/ts configs to use the new folder.

@mrdotb I had the same issue in one of the projects and I believe it's because of the "react" folder in this particular case. I did not investigate further & I'm not sure what is the exact reason, maybe Vite has some issues with aliases, but in my case renaming the folder worked.

btw, it might be worth changing the react folder to something else, not only because of this problem, but also because of semantics.

[mrdotb]

Thanks for pinpointing this issue I will do a PR next week end.

[mrdotb]

19 fixed