Joi: TextEncoder is undefined on React Native

[KarlosQ]

Context

• node version: 8.11.4
• joi version: 16.1.3 - 16.1.4
• environment (node, browser): React Native 0.59.10 - 0.60.5
• used with (hapi, standalone, ...): hapi
• any other relevant information: 16.1.2 works fine

What are you trying to achieve or the steps to reproduce ?

React native app crash at start because joi-brower.min.js generate this line s.TextEncoder||TextEncoder and TextEncoder is undefined in React Native

What did you expect ?

That app works well like in 16.1.2

[hueniverse]

What's version of JS is React Native running that it doesn't have TextEncoder?

[KarlosQ]

I tested in 0.59.10 and 0.60.5

[hueniverse]

I don't know much about React Native but it sounds like you will need your own webpack config that includes the shim for TextEncoder. It is widely supported in modern browsers, hence why our build doesn't include a shim.

I switched Buffer which was a big node shim with TextEncoder in email address validation. Looks like I just swapped Buffer with TextEncoder, but unlike Buffer which always require a shim, TextEncoder should be available.

[hueniverse]

How exactly are you using joi with hapi and getting this error?

[KarlosQ]

Only an import make a crash.

[hueniverse]

I have no experience with React Native. I don't know what JS engine it uses and what kind of shims it will require. There is a limit to how many platforms we can support with the built-in browser file.

I suggest you use: https://github.com/anonyco/FastestSmallestTextEncoderDecoder to polyfill the missing functionality.

[ArturGr]

Just got it working on React Native. @KarlosQ You have to install this package: https://github.com/anonyco/FastestSmallestTextEncoderDecoder

after that put these two scripts in your package.json file under the "scripts" object:

"preinstall": "rm -r node_modules/@hapi",
"postinstall": "cat node_modules/@hapi/joi/dist/joi-browser.min.js | pbcopy && echo 'const {TextEncoder} = require(\"fastestsmallesttextencoderdecoder\");' > node_modules/@hapi/joi/dist/joi-browser.min.js && pbpaste >> node_modules/@hapi/joi/dist/joi-browser.min.js",

It simply removes the @hapi folder bevor you install to make sure that the file is not edited twice.
After install it adds the const {TextEncoder} = require("fastestsmallesttextencoderdecoder"); line to the joi.browsers.min.js and everything works fine on React Native.

Surely not a good solution. Would be nice to finde a better way to support joi on React Native.

[engineforce]

Following works for me:

npm install text-encoding-polyfill

// index.js
import 'text-encoding-polyfill'
import Joi from '@hapi/joi'

[Billydubb]

Following works for me:

npm install text-encoding-polyfill

// index.js
import 'text-encoding'
import Joi from '@hapi/joi'

I think it should be
import 'text-encoding-polyfill
on the first line