search

OpenNative / open-native

Open Native brings cross-platform communities together to help them collaborate and strengthen each other through development diversity.
https://open-native.org/
MIT License
449 stars 7 forks source link

.../Components/TextInput/TextInputState Types do not exist (likely other Base components too) #28

Open vpiskunov opened 5 months ago

vpiskunov commented 5 months ago

As per title, @open-native/core/Libraries/Components/TextInput/TextInputState do not seem to exist (likely other Base components too).

This is reproducible by installing @open-native as per the docs, and adding @stripe/stripe-react-native

Details / logs spoiler

``` ERROR in ./node_modules/@stripe/stripe-react-native/lib/module/helpers.js 1:344-413 Module not found: Error: Can't resolve 'react-native/Libraries/Components/TextInput/TextInputState' in '/Users/mac-user/code-temp/sample-app-vue3/node_modules/@stripe/stripe-react-native/lib/module' resolve 'react-native/Libraries/Components/TextInput/TextInputState' in '/Users/mac-user/code-temp/sample-app-vue3/node_modules/@stripe/stripe-react-native/lib/module' Parsed request is a module using description file: /Users/mac-user/code-temp/sample-app-vue3/node_modules/@stripe/stripe-react-native/package.json (relative path: ./lib/module) aliased with mapping 'react-native': '@open-native/core' to '@open-native/core/Libraries/Components/TextInput/TextInputState' Parsed request is a module using description file: /Users/mac-user/code-temp/sample-app-vue3/node_modules/@stripe/stripe-react-native/package.json (relative path: ./lib/module) resolve as module looking for modules in /Users/mac-user/code-temp/sample-app-vue3/node_modules existing directory /Users/mac-user/code-temp/sample-app-vue3/node_modules/@open-native/core using description file: /Users/mac-user/code-temp/sample-app-vue3/node_modules/@open-native/core/package.json (relative path: .) using description file: /Users/mac-user/code-temp/sample-app-vue3/node_modules/@open-native/core/package.json (relative path: ./Libraries/Components/TextInput/TextInputState) no extension /Users/mac-user/code-temp/sample-app-vue3/node_modules/@open-native/core/Libraries/Components/TextInput/TextInputState doesn't exist .ios.vue /Users/mac-user/code-temp/sample-app-vue3/node_modules/@open-native/core/Libraries/Components/TextInput/TextInputState.ios.vue doesn't exist .vue /Users/mac-user/code-temp/sample-app-vue3/node_modules/@open-native/core/Libraries/Components/TextInput/TextInputState.vue doesn't exist .ios.ts /Users/mac-user/code-temp/sample-app-vue3/node_modules/@open-native/core/Libraries/Components/TextInput/TextInputState.ios.ts doesn't exist .ts /Users/mac-user/code-temp/sample-app-vue3/node_modules/@open-native/core/Libraries/Components/TextInput/TextInputState.ts doesn't exist .ios.js /Users/mac-user/code-temp/sample-app-vue3/node_modules/@open-native/core/Libraries/Components/TextInput/TextInputState.ios.js doesn't exist .js /Users/mac-user/code-temp/sample-app-vue3/node_modules/@open-native/core/Libraries/Components/TextInput/TextInputState.js doesn't exist .ios.mjs /Users/mac-user/code-temp/sample-app-vue3/node_modules/@open-native/core/Libraries/Components/TextInput/TextInputState.ios.mjs doesn't exist .mjs /Users/mac-user/code-temp/sample-app-vue3/node_modules/@open-native/core/Libraries/Components/TextInput/TextInputState.mjs doesn't exist .ios.css /Users/mac-user/code-temp/sample-app-vue3/node_modules/@open-native/core/Libraries/Components/TextInput/TextInputState.ios.css doesn't exist .css /Users/mac-user/code-temp/sample-app-vue3/node_modules/@open-native/core/Libraries/Components/TextInput/TextInputState.css doesn't exist .ios.scss /Users/mac-user/code-temp/sample-app-vue3/node_modules/@open-native/core/Libraries/Components/TextInput/TextInputState.ios.scss doesn't exist .scss /Users/mac-user/code-temp/sample-app-vue3/node_modules/@open-native/core/Libraries/Components/TextInput/TextInputState.scss doesn't exist .ios.json /Users/mac-user/code-temp/sample-app-vue3/node_modules/@open-native/core/Libraries/Components/TextInput/TextInputState.ios.json doesn't exist .json /Users/mac-user/code-temp/sample-app-vue3/node_modules/@open-native/core/Libraries/Components/TextInput/TextInputState.json doesn't exist as directory /Users/mac-user/code-temp/sample-app-vue3/node_modules/@open-native/core/Libraries/Components/TextInput/TextInputState doesn't exist /Users/mac-user/code-temp/sample-app-vue3/node_modules/@stripe/stripe-react-native/lib/module/node_modules doesn't exist or is not a directory /Users/mac-user/code-temp/sample-app-vue3/node_modules/@stripe/stripe-react-native/lib/node_modules doesn't exist or is not a directory /Users/mac-user/code-temp/sample-app-vue3/node_modules/@stripe/stripe-react-native/node_modules doesn't exist or is not a directory /Users/mac-user/code-temp/sample-app-vue3/node_modules/@stripe/node_modules doesn't exist or is not a directory /Users/mac-user/code-temp/sample-app-vue3/node_modules/node_modules doesn't exist or is not a directory looking for modules in /Users/mac-user/code-temp/sample-app-vue3/node_modules existing directory /Users/mac-user/code-temp/sample-app-vue3/node_modules/@open-native/core using description file: /Users/mac-user/code-temp/sample-app-vue3/node_modules/@open-native/core/package.json (relative path: .) using description file: /Users/mac-user/code-temp/sample-app-vue3/node_modules/@open-native/core/package.json (relative path: ./Libraries/Components/TextInput/TextInputState) no extension /Users/mac-user/code-temp/sample-app-vue3/node_modules/@open-native/core/Libraries/Components/TextInput/TextInputState doesn't exist .ios.vue /Users/mac-user/code-temp/sample-app-vue3/node_modules/@open-native/core/Libraries/Components/TextInput/TextInputState.ios.vue doesn't exist .vue /Users/mac-user/code-temp/sample-app-vue3/node_modules/@open-native/core/Libraries/Components/TextInput/TextInputState.vue doesn't exist .ios.ts /Users/mac-user/code-temp/sample-app-vue3/node_modules/@open-native/core/Libraries/Components/TextInput/TextInputState.ios.ts doesn't exist .ts /Users/mac-user/code-temp/sample-app-vue3/node_modules/@open-native/core/Libraries/Components/TextInput/TextInputState.ts doesn't exist .ios.js /Users/mac-user/code-temp/sample-app-vue3/node_modules/@open-native/core/Libraries/Components/TextInput/TextInputState.ios.js doesn't exist .js /Users/mac-user/code-temp/sample-app-vue3/node_modules/@open-native/core/Libraries/Components/TextInput/TextInputState.js doesn't exist .ios.mjs /Users/mac-user/code-temp/sample-app-vue3/node_modules/@open-native/core/Libraries/Components/TextInput/TextInputState.ios.mjs doesn't exist .mjs /Users/mac-user/code-temp/sample-app-vue3/node_modules/@open-native/core/Libraries/Components/TextInput/TextInputState.mjs doesn't exist .ios.css /Users/mac-user/code-temp/sample-app-vue3/node_modules/@open-native/core/Libraries/Components/TextInput/TextInputState.ios.css doesn't exist .css /Users/mac-user/code-temp/sample-app-vue3/node_modules/@open-native/core/Libraries/Components/TextInput/TextInputState.css doesn't exist .ios.scss /Users/mac-user/code-temp/sample-app-vue3/node_modules/@open-native/core/Libraries/Components/TextInput/TextInputState.ios.scss doesn't exist .scss /Users/mac-user/code-temp/sample-app-vue3/node_modules/@open-native/core/Libraries/Components/TextInput/TextInputState.scss doesn't exist .ios.json /Users/mac-user/code-temp/sample-app-vue3/node_modules/@open-native/core/Libraries/Components/TextInput/TextInputState.ios.json doesn't exist .json /Users/mac-user/code-temp/sample-app-vue3/node_modules/@open-native/core/Libraries/Components/TextInput/TextInputState.json doesn't exist as directory /Users/mac-user/code-temp/sample-app-vue3/node_modules/@open-native/core/Libraries/Components/TextInput/TextInputState doesn't exist /Users/mac-user/code-temp/node_modules doesn't exist or is not a directory /Users/mac-user/node_modules doesn't exist or is not a directory /Users/node_modules doesn't exist or is not a directory /node_modules doesn't exist or is not a directory @ ./node_modules/@stripe/stripe-react-native/lib/module/functions.js 1:1202-1222 @ ./node_modules/@stripe/stripe-react-native/lib/module/index.js 1:3140-3162 @ ./node_modules/@nativescript/webpack/dist/loaders/nativescript-worker-loader/index.js!./node_modules/ts-loader/index.js??clonedRuleSet-3.use[0]!./node_modules/nativescript-vue/node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/components/CheckoutPage.vue?vue&type=script&setup=true&lang=ts 20:0-96 74:22-32 79:22-38 103:55-74 @ ./src/components/CheckoutPage.vue?vue&type=script&setup=true&lang=ts 1:0-327 1:0-327 1:328-644 1:328-644 @ ./src/components/CheckoutPage.vue 2:0-74 3:0-69 3:0-69 6:49-55 @ ./node_modules/@nativescript/webpack/dist/loaders/nativescript-worker-loader/index.js!./node_modules/ts-loader/index.js??clonedRuleSet-3.use[0]!./node_modules/nativescript-vue/node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/components/AddressPage.vue?vue&type=script&setup=true&lang=ts 15:0-46 58:32-44 95:28-40 @ ./src/components/AddressPage.vue?vue&type=script&setup=true&lang=ts 1:0-326 1:0-326 1:327-642 1:327-642 @ ./src/components/AddressPage.vue 2:0-73 3:0-68 3:0-68 8:49-55 @ ./node_modules/@nativescript/webpack/dist/loaders/nativescript-worker-loader/index.js!./node_modules/ts-loader/index.js??clonedRuleSet-3.use[0]!./node_modules/nativescript-vue/node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/pages/Home.vue?vue&type=script&lang=ts&setup=true 9:0-55 58:23-34 @ ./src/pages/Home.vue?vue&type=script&lang=ts&setup=true 1:0-319 1:0-319 1:320-628 1:320-628 @ ./src/pages/Home.vue 2:0-66 3:0-61 3:0-61 6:49-55 @ ./node_modules/@nativescript/webpack/dist/loaders/nativescript-worker-loader/index.js!./node_modules/ts-loader/index.js??clonedRuleSet-3.use[0]!./node_modules/nativescript-vue/node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/pages/Auth.vue?vue&type=script&lang=ts&setup=true 7:0-30 20:28-32 29:36-40 41:181-185 @ ./src/pages/Auth.vue?vue&type=script&lang=ts&setup=true 1:0-319 1:0-319 1:320-628 1:320-628 @ ./src/pages/Auth.vue 2:0-66 3:0-61 3:0-61 8:49-55 @ ./src/app.ts 5:0-36 10:22-26 webpack 5.89.0 compiled with 1 error in 3796 ms Webpack compilation complete. Executing webpack failed with exit code 1. ```

Also, once @stripe/stripe-react-native had been manually added to the list of entries in webpack's babel config, the following additional issue has been found:

Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: /Users/mac-user/code-temp/sample-app-vue3/node_modules/@stripe/stripe-react-native/package.json: Missing semicolon. (2:8)
Full details/log for 2nd issue spoiler

``` ERROR in ./node_modules/@stripe/stripe-react-native/package.json Module build failed (from ./node_modules/babel-loader/lib/index.js): SyntaxError: /Users/mac-user/code-temp/sample-app-vue3/node_modules/@stripe/stripe-react-native/package.json: Missing semicolon. (2:8) 1 | { > 2 | "name": "@stripe/stripe-react-native", | ^ 3 | "version": "0.35.0", 4 | "author": "Stripe", 5 | "description": "Stripe SDK for React Native", at constructor (/Users/mac-user/code-temp/sample-app-vue3/node_modules/@babel/parser/lib/index.js:356:19) at FlowParserMixin.raise (/Users/mac-user/code-temp/sample-app-vue3/node_modules/@babel/parser/lib/index.js:3223:19) at FlowParserMixin.semicolon (/Users/mac-user/code-temp/sample-app-vue3/node_modules/@babel/parser/lib/index.js:3580:10) at FlowParserMixin.parseExpressionStatement (/Users/mac-user/code-temp/sample-app-vue3/node_modules/@babel/parser/lib/index.js:13158:10) at FlowParserMixin.parseExpressionStatement (/Users/mac-user/code-temp/sample-app-vue3/node_modules/@babel/parser/lib/index.js:5110:18) at FlowParserMixin.parseStatementContent (/Users/mac-user/code-temp/sample-app-vue3/node_modules/@babel/parser/lib/index.js:12741:19) at FlowParserMixin.parseStatementLike (/Users/mac-user/code-temp/sample-app-vue3/node_modules/@babel/parser/lib/index.js:12588:17) at FlowParserMixin.parseStatementLike (/Users/mac-user/code-temp/sample-app-vue3/node_modules/@babel/parser/lib/index.js:5088:24) at FlowParserMixin.parseStatementListItem (/Users/mac-user/code-temp/sample-app-vue3/node_modules/@babel/parser/lib/index.js:12568:17) at FlowParserMixin.parseBlockOrModuleBlockBody (/Users/mac-user/code-temp/sample-app-vue3/node_modules/@babel/parser/lib/index.js:13189:61) at FlowParserMixin.parseBlockBody (/Users/mac-user/code-temp/sample-app-vue3/node_modules/@babel/parser/lib/index.js:13182:10) at FlowParserMixin.parseBlock (/Users/mac-user/code-temp/sample-app-vue3/node_modules/@babel/parser/lib/index.js:13170:10) at FlowParserMixin.parseStatementContent (/Users/mac-user/code-temp/sample-app-vue3/node_modules/@babel/parser/lib/index.js:12690:21) at FlowParserMixin.parseStatementLike (/Users/mac-user/code-temp/sample-app-vue3/node_modules/@babel/parser/lib/index.js:12588:17) at FlowParserMixin.parseStatementLike (/Users/mac-user/code-temp/sample-app-vue3/node_modules/@babel/parser/lib/index.js:5088:24) at FlowParserMixin.parseModuleItem (/Users/mac-user/code-temp/sample-app-vue3/node_modules/@babel/parser/lib/index.js:12565:17) at FlowParserMixin.parseBlockOrModuleBlockBody (/Users/mac-user/code-temp/sample-app-vue3/node_modules/@babel/parser/lib/index.js:13189:36) at FlowParserMixin.parseBlockBody (/Users/mac-user/code-temp/sample-app-vue3/node_modules/@babel/parser/lib/index.js:13182:10) at FlowParserMixin.parseProgram (/Users/mac-user/code-temp/sample-app-vue3/node_modules/@babel/parser/lib/index.js:12464:10) at FlowParserMixin.parseTopLevel (/Users/mac-user/code-temp/sample-app-vue3/node_modules/@babel/parser/lib/index.js:12454:25) at FlowParserMixin.parseTopLevel (/Users/mac-user/code-temp/sample-app-vue3/node_modules/@babel/parser/lib/index.js:5893:28) at FlowParserMixin.parse (/Users/mac-user/code-temp/sample-app-vue3/node_modules/@babel/parser/lib/index.js:14376:10) at parse (/Users/mac-user/code-temp/sample-app-vue3/node_modules/@babel/parser/lib/index.js:14417:38) at parser (/Users/mac-user/code-temp/sample-app-vue3/node_modules/@babel/core/lib/parser/index.js:41:34) at parser.next () at normalizeFile (/Users/mac-user/code-temp/sample-app-vue3/node_modules/@babel/core/lib/transformation/normalize-file.js:64:37) at normalizeFile.next () at run (/Users/mac-user/code-temp/sample-app-vue3/node_modules/@babel/core/lib/transformation/index.js:21:50) at run.next () at transform (/Users/mac-user/code-temp/sample-app-vue3/node_modules/@babel/core/lib/transform.js:22:33) at transform.next () at step (/Users/mac-user/code-temp/sample-app-vue3/node_modules/gensync/index.js:261:32) at /Users/mac-user/code-temp/sample-app-vue3/node_modules/gensync/index.js:273:13 at async.call.result.err.err (/Users/mac-user/code-temp/sample-app-vue3/node_modules/gensync/index.js:223:11) at process.processTicksAndRejections (node:internal/process/task_queues:95:5) @ ./node_modules/@stripe/stripe-react-native/lib/module/components/StripeProvider.js 1:501-533 @ ./node_modules/@stripe/stripe-react-native/lib/module/index.js 1:2683-2721 @ ./node_modules/@nativescript/webpack/dist/loaders/nativescript-worker-loader/index.js!./node_modules/ts-loader/index.js??clonedRuleSet-3.use[0]!./node_modules/nativescript-vue/node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/components/CheckoutPage.vue?vue&type=script&setup=true&lang=ts 20:0-96 74:22-32 79:22-38 103:55-74 @ ./src/components/CheckoutPage.vue?vue&type=script&setup=true&lang=ts 1:0-327 1:0-327 1:328-644 1:328-644 @ ./src/components/CheckoutPage.vue 2:0-74 3:0-69 3:0-69 6:49-55 @ ./node_modules/@nativescript/webpack/dist/loaders/nativescript-worker-loader/index.js!./node_modules/ts-loader/index.js??clonedRuleSet-3.use[0]!./node_modules/nativescript-vue/node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/components/AddressPage.vue?vue&type=script&setup=true&lang=ts 15:0-46 58:32-44 95:28-40 @ ./src/components/AddressPage.vue?vue&type=script&setup=true&lang=ts 1:0-326 1:0-326 1:327-642 1:327-642 @ ./src/components/AddressPage.vue 2:0-73 3:0-68 3:0-68 8:49-55 @ ./node_modules/@nativescript/webpack/dist/loaders/nativescript-worker-loader/index.js!./node_modules/ts-loader/index.js??clonedRuleSet-3.use[0]!./node_modules/nativescript-vue/node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/pages/Home.vue?vue&type=script&lang=ts&setup=true 9:0-55 58:23-34 @ ./src/pages/Home.vue?vue&type=script&lang=ts&setup=true 1:0-319 1:0-319 1:320-628 1:320-628 @ ./src/pages/Home.vue 2:0-66 3:0-61 3:0-61 6:49-55 @ ./node_modules/@nativescript/webpack/dist/loaders/nativescript-worker-loader/index.js!./node_modules/ts-loader/index.js??clonedRuleSet-3.use[0]!./node_modules/nativescript-vue/node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/pages/Auth.vue?vue&type=script&lang=ts&setup=true 7:0-30 20:28-32 29:36-40 41:181-185 @ ./src/pages/Auth.vue?vue&type=script&lang=ts&setup=true 1:0-319 1:0-319 1:320-628 1:320-628 @ ./src/pages/Auth.vue 2:0-66 3:0-61 3:0-61 8:49-55 @ ./src/app.ts 5:0-36 10:22-26 webpack 5.89.0 compiled with 2 errors in 4358 ms Webpack compilation complete. Executing webpack failed with exit code 1. ```

For understanding, this is in a NativeScript app running on Vue 3

Any suggestions will be highly appreciated!

ammarahm-ed commented 5 months ago

The library won't work directly and will need to be ported to work with open-native. Can you explain why you are using @stripe/stripe-react-native instead of nativescript-stripe library?

vpiskunov commented 5 months ago

@ammarahm-ed thanks for responding. I had attempted to use Stripe's official RN lib as:

What kind of porting do you expect would be needed?

The TextInputState etc - this I believe should be added to open-native as it would be beneficial to all libs/projects?

ammarahm-ed commented 5 months ago

@ammarahm-ed thanks for responding. I had attempted to use Stripe's official RN lib as:

  • nativescript-stripe had issues which broke it in several places (now resolved by our changes, which will soon be PRed to triniwiz's repo)
  • to get latest features - including CustomerSheet & Stripe Identity etc. Would be great to find a way to use this lib, as that means no need for anyone in NS community to keep their own adapter lib "up to date".

What kind of porting do you expect would be needed?

The TextInputState etc - this I believe should be added to open-native as it would be beneficial to all libs/projects?

Yup, it seems the lib can be ported. But will need to write the JS side, especially the components which are currently react ones. Porting them to NativeScript ones would make it work.

It will require something like what I have done in my nativescript-webview library. https://github.com/ammarahm-ed/nativescript-webview/blob/main/packages/nativescript-webview/index.ts. You have to replicate 1:1 what they do in a react component.

For example: https://github.com/stripe/stripe-react-native/blob/master/src/components/CardForm.tsx will need to be something like nativescript-webview has done.

Once ported, it will require some maintenance based on changes in stripe-react-native.