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

[vpiskunov]

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 (<anonymous>)
    at normalizeFile (/Users/mac-user/code-temp/sample-app-vue3/node_modules/@babel/core/lib/transformation/normalize-file.js:64:37)
    at normalizeFile.next (<anonymous>)
    at run (/Users/mac-user/code-temp/sample-app-vue3/node_modules/@babel/core/lib/transformation/index.js:21:50)
    at run.next (<anonymous>)
    at transform (/Users/mac-user/code-temp/sample-app-vue3/node_modules/@babel/core/lib/transform.js:22:33)
    at transform.next (<anonymous>)
    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]

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]

@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?

[ammarahm-ed]

@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.