hapijs / joi

The most powerful data validation library for JS
Other
20.96k stars 1.51k forks source link

Is JOI usable in browser? #2901

Open DaveStein opened 1 year ago

DaveStein commented 1 year ago

Support plan

Context

How can we help?

I have used JOI previously on my Node apps. I am now doing something client side, although I will hit server endpoints. I want to share the validation across both. I do import Joi from 'joi'; after turning on esModuleInterop in TS config, as it told me. In the browser I get this error:

The requested module './../../../node_modules/joi/lib/index.js' does not provide an export named 'default'

I saw elsewhere that this is supposed to work in React create app, but that uses Webpack. Is that a requirement of using this package in browser??

aladdin-add commented 1 year ago

yes, it's supported(if your bundler was set correctly). see https://github.com/hapijs/joi/blob/b23659d9f57ad420a5c9a2cf399bd5e01d1f6501/package.json#L8

another workaround is to import the browser version manually:

import joi from 'joi/dist/joi-browser.min.js';
DaveStein commented 1 year ago

@aladdin-add I am not using a bundler for dev. I am using Open WC https://open-wc.org/docs/development/generator/, which uses Rollup for build, but not for dev. For dev it simply does tsc && concurrently -k -r \"tsc --watch --preserveWatchOutput\" \"wds\"

I tried doing the min workaround directly a little before you reply and got this issue. I know when I tried adding types earlier, the installation said I shouldn't need to do that since the package comes with types.

image

Nargonath commented 1 year ago

Have you tried to import joi as below?

import { joi } from "joi";

In a past project I was able to use it in a frontend project but there was a bundler involved though.

DaveStein commented 1 year ago

@Nargonath nope... it errors saying i must use default so kind of a catch-22.