reactjs - Bundled React application doesn't render in WebKit despite support for modern JavaScript features? - Stack Ove

Problem

I've been developing a React application that works fine in Chrome and Firefox, but fails to render in WebKit-based browsers. The WebKit instance is running in C++ as an overlay atop a Gstreamer video stream using GTK for window handling. The strange part is that WebKit supports all the modern JavaScript features React requires from what I can tell.

What Doesn't Work

• Bundled React application (created with npm build) doesn't render in WebKit
• No console errors are displayed, the app simply doesn't render anything.
• I can verify webkit is running, it is even hosting a HTML overlay / page. Normal HTML and javascript will run. It is the react elements that will not load.
• This is despite the fact that WebKit supports all modern JavaScript features React needs

Key Findings

1. WebKit environment (WebKit/605.1.15) supports all modern JavaScript features
2. The issue is specific to how bundled React applications are loaded in WebKit
3. Loading React directly from CDN works perfectly in the same browser
4. Using React.createElement() instead of JSX syntax avoids compatibility issues

Current Workaround

I'm currently using a CDN-based approach that:

• Loads React directly from unpkg
• Uses vanilla JavaScript with React.createElement() instead of JSX
• Implements the functionality without a build step
• Works reliably in WebKit

Environment Details React: v18.3.1 React DOM: v18.3.1 Webpack: v5.98.0 Babel: v7.26.x with @babel/core v7.26.9 React Scripts: v5.0.1 Using babel-loader (v10.0.0)

Question

While my workaround is functional, I'd prefer to use my build system for consistency across environments. What could be causing bundled React to fail in WebKit despite the browser supporting all necessary JavaScript features? How can I modify my build process to be WebKit-compatible?

Any insights would be greatly appreciated!

Problem

I've been developing a React application that works fine in Chrome and Firefox, but fails to render in WebKit-based browsers. The WebKit instance is running in C++ as an overlay atop a Gstreamer video stream using GTK for window handling. The strange part is that WebKit supports all the modern JavaScript features React requires from what I can tell.

What Doesn't Work

• Bundled React application (created with npm build) doesn't render in WebKit
• No console errors are displayed, the app simply doesn't render anything.
• I can verify webkit is running, it is even hosting a HTML overlay / page. Normal HTML and javascript will run. It is the react elements that will not load.
• This is despite the fact that WebKit supports all modern JavaScript features React needs

Key Findings

1. WebKit environment (WebKit/605.1.15) supports all modern JavaScript features
2. The issue is specific to how bundled React applications are loaded in WebKit
3. Loading React directly from CDN works perfectly in the same browser
4. Using React.createElement() instead of JSX syntax avoids compatibility issues

Current Workaround

I'm currently using a CDN-based approach that:

• Loads React directly from unpkg
• Uses vanilla JavaScript with React.createElement() instead of JSX
• Implements the functionality without a build step
• Works reliably in WebKit

Environment Details React: v18.3.1 React DOM: v18.3.1 Webpack: v5.98.0 Babel: v7.26.x with @babel/core v7.26.9 React Scripts: v5.0.1 Using babel-loader (v10.0.0)

Question

While my workaround is functional, I'd prefer to use my build system for consistency across environments. What could be causing bundled React to fail in WebKit despite the browser supporting all necessary JavaScript features? How can I modify my build process to be WebKit-compatible?

Any insights would be greatly appreciated!

• javascript
• reactjs
• react-native
• webkit

Share Follow asked Mar 5 at 18:42 aris-taris-t 1611010 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

Someone please just end me. It would be the merciful thing. Ive been at this for 8 hours! I found it... I f$^#@ found it.

What it was: <index.html>

 <script defer="defer" src="/static/js/main.3362c51c.js"></script>

What it needs to be: <index.html>

Mind the missing leading slash, it was using root as the path instead of a local path.

 <script defer="defer" src="static/js/main.3362c51c.js"></script>