When attempting to use Expo (SDK 43) in managed mode on an iPad Air 4th Gen (OS 15.0.2) with expo-three, expo-gl and a <GLView> with a model containing a SkinnedMesh and transparent textures, I receive the following warning:
Warning: THREE.WebGLRenderer: EXT_color_buffer_float extension not supported.
This is further confirmed with requesting the list of available extensions:
const ext = glContext.getExtension("EXT_color_buffer_float");
const availableExtensions = glContext.getSupportedExtensions();
...
Supported render extensions: APPLE_clip_distance,APPLE_color_buffer_packed_float,APPLE_copy_texture_levels,
APPLE_rgb_422,APPLE_texture_format_BGRA8888,EXT_color_buffer_half_float,EXT_debug_label,EXT_debug_marker,
EXT_pvrtc_sRGB,EXT_read_format_bgra,EXT_separate_shader_objects,EXT_shader_framebuffer_fetch,
EXT_shader_texture_lod,EXT_shadow_samplers,EXT_texture_filter_anisotropic,IMG_read_format,
IMG_texture_compression_pvrtc,KHR_texture_compression_astc_ldr,OES_standard_derivatives,
OES_texture_float_linear,OES_texture_half_float_linear,WEBGL_compressed_texture_astc,
WEBGL_compressed_texture_etc,WEBGL_compressed_texture_pvrtc
Required extension EXT_color_buffer_float: NOT AVAILABLE!
...
But what is confusing is that the render capabilities indicate the WebGL2 is available:
console.log(`Render Capabilities: ${JSON.stringify(renderer.capabilities)}`);
...
Render Capabilities: {"isWebGL2":true,"drawBuffers":true,"precision":"highp","logarithmicDepthBuffer":false,
"maxTextures":16,"maxVertexTextures":16,"maxTextureSize":16384,"maxCubemapSize":16384,
"maxAttributes":16,"maxVertexUniforms":512,"maxVaryings":15,"maxFragmentUniforms":224,
"vertexTextures":true,"floatFragmentTextures":true,"floatVertexTextures":true,"maxSamples":4}
and webglreport.com in Safari indicates that WebGL2 is supported and that the EXT_color_buffer_float is available. In fact, the extension list differs from the webglreport.
Versions
expo sdk: 43
expo-gl: 11.0.3
expo-gl-cpp: 11.0.1
expo-three: 6.0.1
react: 17.0.1
react-native: 0.64.2
three: 0.133.1
Question
How can I enable actual/complete WebGL2 support with the complete extension set as reported by webglreport with react-native on ios15?
Related
After upgrade to React 17, the app fails to load on certain platforms. It still works well in modern Chrome for example, but fails in older browsers. It fails in the ReactDOM.render function in the entry file of the app, with the following error:
Error: Minified React error #31; visit
https://reactjs.org/docs/error-decoder.html?invariant=31&args[]=object%20wi…ys%20%7B%24%24typeof%2C%20type%2C%20key%2C%20ref%2C%20props%2C%20_owner%7D
for the full message or use the non-minified dev environment for full
errors and additional helpful warnings.
Going there gives this additional information:
The full text of the error you just encountered is:
Objects are not valid as a React child (found: object with keys
{$$typeof, type, key, ref, props, _owner}). If you meant to render a
collection of children, use an array instead.
It turns out that loading fails on those platforms that depend on core-js for polyfills. The script load order is messed up, so that core-js is not loaded first, even though it is imported first in the entry file. Possibly due to the new way React can be automatically imported, a feature now used in the app:
presets: [
'#prefix/babel-preset-libx',
[
'#babel/preset-react',
{
runtime: 'automatic'
}
]
],
Inspecting the JS object that causes the error shows:
Chrome:
$$typeof: Symbol(react.element)
key: null
props: {children: "TEST"}
ref: null
type: "div"
_owner: null
Failing platform:
$$typeof: 60103
key: null
props: Object
ref: null
type: "div"
_owner: null
It seems related to this issue: https://github.com/facebook/react/issues/8379, and this SO question: Objects are not valid as a react child (In Internet explorer 11 for React 15.4.1).
Just as in those, the solution is to specify script load order in webpack.config.js:
entry: [
'core-js', // Should be loaded first
// If applicable: 'react-hot-loader', // This package requires/loads react (but not react-dom).
'react', // Include this to enforce order
'react-dom', // Include this to enforce order
'./client.js' // Path to your app's entry file
]
Credits to solution by https://stackoverflow.com/users/4757672/fran%c3%a7ois-maturel in https://stackoverflow.com/a/40928047/1158376
I am testing Jimp.js for image manipulation (using React with react-scripts, npm: 6.14.4, node: v12.16.3)
Everything is going well except writing text on a loaded image
import Jimp from 'jimp'
Jimp.read(image)
.then(image => {
console.log('image loaded', image)
Jimp.loadFont(Jimp.FONT_SANS_32_WHITE).then(font => {
console.log('font loaded', font)
image.print(font, 10, 10, 'Hello world that wraps!', 12)
// write image
})
})
This throws an error "error parsing font malformed file -- no element" in browser.js of load-bmfont module line 71 and dont execute the log 'font loaded'.
Googling not help i found only 2,3 items about this, associate with using custom fonts - but i use standard font from Jimp. (Using BMFont files instead of Jimp standard fonts doesnt help)
My first thought was the error ocured in a React App in the browser, so i write a Jest test to see if its work without browser context but it fail just like that.
Got any ideas?
Solved...
I'm using the React App within a Java Web Framework in a JSP File.
Jimp.loadFont(Jimp.FONT_SANS_32_WHITE)
search the font in a path that doesn`t exist for the webapp.
Moving the font files to a reachable path with context root
Jimp.loadFont(`${CONTEXT_ROOT}/foo/bar/font.font`) works.
I am using createStackNavigator. I have three screens: A, B, and C
Screen B is used twice during my transition. I use this notation:
B(1): The first time we transit to screen B with some parameters
B(2): The second time we transit to screen B with different parameters
Consider this transition:
A --> B(1) --> C --> B(2)
Current behavior:
When I transit from screen A to B(1), B(1) to C, each time the new screen appears with an animation from right to left. But when I transit from C to B(2), the new screen appears from left to right. (issue 1)
When I am on B(2) and use navigation.goBack(), I see A (but I want to see C of course)
(issue 2)
Expected Behaviour:
when I transit from C to B(2), the new screen must appear from right to left (Like previous transitions)
When I am on B(2) and use navigation.goBack(), I must see C
System:
OS: macOS 10.15.3
CPU: (4) x64 Intel(R) Core(TM) i5-5257U CPU # 2.70GHz
Memory: 246.99 MB / 8.00 GB
Shell: 5.7.1 - /bin/zsh
Binaries:
Node: 12.13.1 - ~/.nvm/versions/node/v12.13.1/bin/node
npm: 6.12.1 - ~/.nvm/versions/node/v12.13.1/bin/npm
Watchman: 4.9.0 - /usr/local/bin/watchman
SDKs:
iOS SDK:
Platforms: iOS 13.2, DriverKit 19.0, macOS 10.15, tvOS 13.2, watchOS 6.1
Android SDK:
API Levels: 28, 29
Build Tools: 28.0.3, 29.0.2
System Images: android-28 | Google APIs Intel x86 Atom, android-29 | Google APIs Intel x86 Atom
IDEs:
Android Studio: 3.5 AI-191.8026.42.35.5977832
Xcode: 11.3.1/11C504 - /usr/bin/xcodebuild
npmPackages:
react: 16.9.0 => 16.9.0
react-native: https://github.com/expo/react-native/archive/sdk-36.0.1.tar.gz => 0.61.4
"react-navigation": "^4.3.7",
"react-navigation-stack": "^1.10.3",
To fix "when I transit from C to B(2), the new screen must appear from right to left (Like previous transitions)" in screen C use this code to navigate :
// this pushes B into the stack insted of navigating to B
() => navigation.push('B')
This "When I am on B(2) and use navigation.goBack(), I must see C" will be already fixed because the stack order is correct using push insted of navigate.
So your stack preview screen will be C.
When compiling a React and Redux application with Webpack and Babel I get:
Uncaught TypeError: Cannot assign to read only property '__esModule' of #<Object>
In some older browsers (<= Chrome 1, Android 4, Safari 5).
This issue seems to stem from redux and react-redux outputting the line exports.__esModule = true; in the lib build but my application using Object.defineProperty instead (because they build loosely and I do not).
Two solutions are:
Building my application in loose mode also.
Importing react-redux/src and redux/src and building it with the same .babelrc as the application (everything is not loose).
As long as they are consistent and both:
Object.defineProperty(exports, "__esModule", {
value: true
});
and exports.__esModule = true; do not co-exist in my output, everything works.
My question is, what is the right solution? Why does this only affect older browsers? And why do they conflict?
Here is a similar question.
Object.defineProperty is broken on some Android 4 stock browser versions and probably other browsers that made use of a buggy implementation in Webkit.
Check this bug report
and and this other one reported to the chromium project.
The good news is you can apply this polyfill to fix the problem.
To make thing easy, you can simply copy and paste that polyfill on a <script> tag before your bundle.
This will fix your issues.
My guess is, you need to install babel-plugin-add-module-exports and in your .babelrc register this plugin:
"plugins": [
"babel-plugin-add-module-exports"
]
For more information visit this website.
In my case, I solved to add babel-register library in entry points.
In webpack.config.js (Webpack 1.x version of configuration)
// As is
entry: {
main: 'index.js'
},
// To be
entry: {
main: ['babel-register', 'index.js']
},
We met this problem on Android 4.0 and currently we cannot cut the support for Android 4.0.
For webpack 1.0, just set loose: true when you are using babel-preset-env.
However for Webpack 2, loose mode can't resolve this problem.
Finally, we found this trick, a little ugly.
// client_patch.js, For Android 4.0
var defineProperty = Object.defineProperty;
Object.defineProperty = function (exports, name) {
if (name === '__esModule') {
exports[name] = true;
return;
}
return defineProperty.apply(this, arguments);
};
And in your webpack config file.
// webpack.config.js
entry: {
main: [
path.resolve(__dirname, 'client_patch.js'),
'index.js'
]
}
I have an AngularDart application that is working fine on Chromium and Chrome with Javascript. But in Firefox and IE, I get the following error:
[14:36:14.648] "NullError: receiver.webkitCreateShadowRoot is undefined
STACKTRACE:
.Element.createShadowRoot$0#http://127.0.0.1:3030/foobarUI/web/foobarui.dart.js:84445
J.createShadowRoot$0$x#http://127.0.0.1:3030/foobarUI/web/foobarui.dart.js:153659
._ComponentFactory.call$6#http://127.0.0.1:3030/foobarUI/web/foobarui.dart.js:11337
.BlockFactory__instantiateDirectives__closure2.call$1#http://127.0.0.1:3030/foobarUI/web/foobarui.dart.js:11097
.Primitives_applyFunction#http://127.0.0.1:3030/foobarUI/web/foobarui.dart.js:5148
._FactoryProvider.get$2#http://127.0.0.1:3030/foobarUI/web/foobarui.dart.js:125034
J.get$2$x#http://127.0.0.1:3030/foobarUI/web/foobarui.dart.js:153716
.DynamicInjector__getInstanceBySymbol_closure.call$0#http://127.0.0.1:3030/foobarUI/web/foobarui.dart.js:124806
._defaultCreationStrategy#http://127.0.0.1:3030/foobarUI/web/foobarui.dart.js:125162
.Binding.creationStrategy$3#http://127.0.0.1:3030/foobarUI/web/foobarui.dart.js:125271
.DynamicInjector._getInstanceBySymbol$2#http://127.0.0.1:3030/foobarUI/web/foobarui.dart.js:124652
.DynamicInjector.get$1#http://127.0.0.1:3030/foobarUI/web/foobarui.dart.js:124694
J.get$1$x#http://127.0.0.1:3030/foobarUI/web/foobarui.dart.js:153713
.BlockFactory__instantiateDirectives_closure3.call$1#http://127.0.0.1:3030/foobarUI/web/foobarui.dart.js:11183
.IterableMixinWorkaround_forEach#http://127.0.0.1:3030/foobarUI/web/foobarui.dart.js:22126
.JSArray.forEach$1#http://127.0.0.1:3030/foobarUI/web/foobarui.dart.js:1995
J.forEach$1$ax#http://127.0.0.1:3030/foobarUI/web/foobarui.dart.js:153707
.BlockFactory._instantiateDirectives$5#http://127.0.0.1:3030/foobarUI/web/foobarui.dart.js:10887
.BlockFactory._dom$_link$4#http://127.0.0.1:3030/foobarUI/web/foobarui.dart.js:10816
.BlockFactory._dom$_link$4#http://127.0.0.1:3030/foobarUI/web/foobarui.dart.js:10818
.BlockFactory._dom$_link$4#http://127.0.0.1:3030/foobarUI/web/foobarui.dart.js:10818
.BlockFactory._dom$_link$4#http://127.0.0.1:3030/foobarUI/web/foobarui.dart.js:10818
.BlockFactory.call$2#http://127.0.0.1:3030/foobarUI/web/foobarui.dart.js:10776
.ngBootstrap_closure0.call$0#http://127.0.0.1:3030/foobarUI/web/foobarui.dart.js:7661
._rootRun#http://127.0.0.1:3030/foobarUI/web/foobarui.dart.js:27183
._ZoneDelegate.run$2#http://127.0.0.1:3030/foobarUI/web/foobarui.dart.js:34652
.NgZone__onRun_closure.call$0#http://127.0.0.1:3030/foobarUI/web/foobarui.dart.js:10306
.NgZone._onRunBase$4#http://127.0.0.1:3030/foobarUI/web/foobarui.dart.js:10162
.NgZone._onRun$4#http://127.0.0.1:3030/foobarUI/web/foobarui.dart.js:10181
$$.BoundClosure$4<.call$4#http://127.0.0.1:3030/foobarUI/web/foobarui.dart.js:424
._ZoneDelegate.run$2#http://127.0.0.1:3030/foobarUI/web/foobarui.dart.js:34652
._CustomizedZone.run$1#http://127.0.0.1:3030/foobarUI/web/foobarui.dart.js:35046
.ngBootstrap#http://127.0.0.1:3030/foobarUI/web/foobarui.dart.js:7485
.main#http://127.0.0.1:3030/foobarUI/web/foobarui.dart.js:130170
._IsolateContext.eval$1#http://127.0.0.1:3030/foobarUI/web/foobarui.dart.js:3635
.startRootIsolate#http://127.0.0.1:3030/foobarUI/web/foobarui.dart.js:3301
#http://127.0.0.1:3030/foobarUI/web/foobarui.dart.js:161315
#http://127.0.0.1:3030/foobarUI/web/foobarui.dart.js:161295
#http://127.0.0.1:3030/foobarUI/web/foobarui.dart.js:161309
#http://127.0.0.1:3030/foobarUI/web/foobarui.dart.js:9
"
Here is my foobarUI/pubspec.yaml:
name: foobarUI
description: A sample web application
dependencies:
angular: 0.9.3
browser: any
json_object: any
petitparser: any
unittest: any
foobar:
path: ../foobarLib
I tried to add the js, shadow_dom and web_ui modules but it made no difference.
I tried to add "useShadowDom = true;" (and false) to the main dart file, no difference.
From the error, it seems obvious that the webkit support for DOM shadow root is missing but why is this module not handling this ?
The same error occurs with angular.dart.tutorial chapter_03 sample. This is clearly an issue with Angular.Dart. Bug filed as: https://code.google.com/p/dart/issues/detail?id=15752
The Dart bug for issue is at: https://code.google.com/p/dart/issues/detail?id=15144
It has been fixed in Dart bug has not been pushed to AngularDart yet. That work is blocked by https://github.com/angular/angular.dart/issues/366.