React/Vue drivers wrap component in extra div

[kriscarle]

Since this div isn't styled it breaks responsive dimensions and auto resize. This is present in the demo at http://krakenjs.com/xcomponent/demo/frameworks/react/index.htm The Angular 2 demo doesn't wrap the component this way.

I'm using React 16 and the demo is as well, so maybe React 16 introduced this? This is my first attempt at using xcomponent so I apologize if I'm just missing something.

You can see the div here

But it is not included in the code, so it seems to be injected by the React driver

[jimthedev]

Lines causing the issue:

https://github.com/krakenjs/xcomponent/blob/master/src/drivers/react.js#L44 https://github.com/krakenjs/xcomponent/blob/master/src/drivers/react.js#L70

Perhaps need a check so see if React.Fragment is available (only since 16.2) and if so then use that instead of creating a div?

[Olex93]

Hey, I can see that this issue has been closed with a fix, but the fix doesn't seem to have been included in later releases. I'm using "zoid": "^9.0.69", and the code in the fix isn't totally relevant to the file I find in src/drivers/react... Has anyone got a working fix for the latest version?

[mrudult]

Same issue. Doesn't work with zoid@9.0.82 and React@16.0.7. Adds an extra div wrapper that doesn't have any styling (width=0) and thus isn't displayed.

@Olex93 I used the render instance method of the Component to render it manually:

useEffect(() => {
    const component = GiftcardWidget(myprops);
    component.render('#container').then(() => {
      console.info('The component was successfully rendered')
    });
  },[])

[Olex93]

Thanks @mrudult - I ended up doing something similar. For anyone experiencing this issue that’s looking for a workaround, I just built the widget with create-react-app, changed the ID of the div that React builds the application inside of away from ‘root’ to the name of my widget. I then used Parcel to build the project into just one Js and one css file. Host the Js and Css file anywhere, I went with Vercel. All you then need to do for anyone to install the widget is provide them with a script to Js file, a link to the CSS file and a div with an I’d of your widget name. This article was really useful: https://javascriptpros.com/creating-react-widgets-embedded-anywhere/