Uncaught TypeError: (0 , r.createSignal) is not a function

[geohuz]

I'm trying to use a solid component in my create-react-app application, the code:

import { Motion } from "@motionone/solid"; // the solid component
import {convertToReactComponent} from 'react-solid-bridge'
import {ReactToSolidBridgeProvider} from 'react-solid-bridge'

const Mot = convertToReactComponent(Motion)

export function Dot(props) {
  return (
    <ReactToSolidBridgeProvider>
      <Mot
        animate={{
          x: props.x,
          y: props.y
        }}
      >
        <span>RID:{props.id}</span>
      </Mot>
    </ReactToSolidBridgeProvider>
  )
}

Then I use the Dot in my App:

import { Dot }  from './Dot1'

function App() {
  return (
      <Dot id={1} x={10} y={5} />
  )
}

Then I get the error:

Uncaught runtime errors:
×
ERROR
(0 , r.createSignal) is not a function
TypeError: (0 , r.createSignal) is not a function
    at e (http://localhost:3000/static/js/bundle.js:35556:124)

Am I doing right? I can't see what's wrong with my approch.

[paulbse]

@geohuz did you find a solution ? https://codesandbox.io/p/sandbox/react-solid-bridge-solid-app-router-7wowh I am not able to reproduce this sandbox

`Uncaught TypeError: (0 , r.createRoot) is not a function at main.js:2:1 at main.js:2:1 at invokePassiveEffectCreate (react-dom.development.js:23487:1) at HTMLUnknownElement.callCallback (react-dom.development.js:3945:1) at Object.invokeGuardedCallbackDev (react-dom.development.js:3994:1) at invokeGuardedCallback (react-dom.development.js:4056:1) at flushPassiveEffectsImpl (react-dom.development.js:23574:1) at unstable_runWithPriority (scheduler.development.js:468:1) at runWithPriority$1 (react-dom.development.js:11276:1) at flushPassiveEffects (react-dom.development.js:23447:1) react-dom.development.js:20085

The above error occurred in the component: at T (http://localhost:3003/static/js/bundle.js:30152:21) at App Consider adding an error boundary to your tree to customize error handling behavior. Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.`

[paulbse]

@geohuz i might have found a solution, for me it's working with

"react": "^16.0.0 || ^17.0.0",
"react-dom": "^16.0.0 || ^17.0.0",

and with vite

[paulbse]

@Sawtaytoes is your library working with react 18 ? Thanks for your work, it's so great

[geohuz]

@paulbse For whatever reason this lib doesn't work as expected, I recentlly review the problem and found there is a dissussion which is very helpful: https://github.com/solidjs/solid/discussions/1615, the demo code works without any issue. So I just follow the setup and tested with several solidjs ui frameworks and they work very well, the vite.config.js should be adjusted according to your solidjs lib usage, as below:

import solid from 'vite-plugin-solid'
import suidPlugin from "@suid/vite-plugin";

const solidP = solid();
const transform = solidP.transform;
solidP.transform = function (ast, id) {
  return id.includes('/src/solid') || id.includes('@suid') || id.includes('solid-motionone')
  ? transform(...arguments) : null;
};

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [suidPlugin(),solidP, react()],
....

you can see I'm using solid-motion and solid suid package so I put them into the configuration to make the transform work.

Happy hacking!