Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Open
vpiskunov opened this issue Jan 8, 2024 · 3 comments
Open

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

vpiskunov opened this issue Jan 8, 2024 · 3 comments

Comments

@vpiskunov
Copy link

vpiskunov commented Jan 8, 2024 •
edited
Loading

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
Copy link
Collaborator

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
Copy link
Author

vpiskunov commented Jan 27, 2024 •
edited
Loading

@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
Copy link
Collaborator

ammarahm-ed commented Jan 27, 2024 •
edited
Loading

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@vpiskunov @ammarahm-ed