cleeng / mediastore-sdk Goto Github PK

After adding the Provider component in index.jsx above my App component using store provided by cleeng sdk, MyAccount component is still not working.
Is there any other step I am missing? Thanks

index.jsx

Error displayed

We're testing the new gifting functionality using the component library in a bare-bones react site. After I complete the form and hit Pay, I get this trace from Adyen.js:

Adyen.js:329 Uncaught (in promise) TypeError: Cannot read properties of null (reading 'type')
    at _callee3$ (Adyen.js:329:68)
    at tryCatch (regeneratorRuntime.js:45:16)
    at Generator.<anonymous> (regeneratorRuntime.js:133:17)
    at Generator.next (regeneratorRuntime.js:74:21)
    at asyncGeneratorStep (asyncToGenerator.js:3:23)
    at _next (asyncToGenerator.js:22:9)
    at asyncToGenerator.js:27:7
    at new Promise (<anonymous>)
    at Object.<anonymous> (asyncToGenerator.js:19:12)
    at Object.onSubmit (Adyen.js:361:37)

This only happens when trying to purchase with a credit card; PayPal is unaffected. The issue manifests with both the Purchase and Checkout Component. I am happy to provide any information you may need.

This issue occures when SDK is fully bundled in one file for web.

Steps to reproduce :

• Set theme with Config.setTheme at app startup
• Open a MS SDK component, newly set theme is not applied (but theme is well stored in local storage)
• Reload app and open a MS SDK component, theme is well applied

It seems it comes from below lines :

In fully bundled SDK, all theme consts are initialized at bundle js file load when page is loaded, then it's to late doing it with Config.setTheme as we have to first load the whole library.

We were able to work around this problem, by first storing theme on our own by calling directly localstorage with the right key and then loading the whole SDK bundled js file.

I am trying to add and use library i am getting errors

The object notation for createReducer is deprecated, and will be removed in RTK 2.0. Please use the 'builder callback' notation instead: https://redux-toolkit.js.org/api/createReducer
The object notation for createSlice.extraReducers is deprecated, and will be removed in RTK 2.0. Please use the 'builder callback' notation instead: https://redux-toolkit.js.org/api/createSlice
Jul 19 14:54:05 slingshot[68639] FATAL: Uncaught exception, aborting Node
err: TypeError: Object(...) is not a function
at Module.../node_modules/@cleeng/mediastore-sdk-react-16/node_modules/@adyen/adyen-web/dist/es/index.js (./bin/app/server/index.dev.js:29444:45916)
at webpack_require (./bin/app/server/index.dev.js:26:30)
at Object.../node_modules/@cleeng/mediastore-sdk-react-16/dist/components/Adyen/Adyen.js (./bin/app/server/index.dev.js:5987:40)
at webpack_require (./bin/app/server/index.dev.js:26:30)
at Object.../node_modules/@cleeng/mediastore-sdk-react-16/dist/components/Adyen/index.js (./bin/app/server/index.dev.js:6490:37)
at webpack_require (./bin/app/server/index.dev.js:26:30)
at Object.../node_modules/@cleeng/mediastore-sdk-react-16/dist/components/Payment/Payment.js (./bin/app/server/index.dev.js:15841:37)
at webpack_require (./bin/app/server/index.dev.js:26:30)
at Object.../node_modules/@cleeng/mediastore-sdk-react-16/dist/components/Payment/index.js (./bin/app/server/index.dev.js:16266:39)
at webpack_require (./bin/app/server/index.dev.js:26:30)
at Object.../node_modules/@cleeng/mediastore-sdk-react-16/dist/components/Offer/Offer.js (./bin/app/server/index.dev.js:13474:39)
at webpack_require (./bin/app/server/index.dev.js:26:30)
at Object.../node_modules/@cleeng/mediastore-sdk-react-16/dist/components/Offer/index.js (./bin/app/server/index.dev.js:13627:37)
at webpack_require (./bin/app/server/index.dev.js:26:30)
at Object.../node_modules/@cleeng/mediastore-sdk-react-16/dist/containers/OfferContainer/OfferContainer.js (./bin/app/server/index.dev.js:23591:37)
at webpack_require (./bin/app/server/index.dev.js:26:30)
1: 0x1005d68bc node::Abort() [/Users/kunal/.nvm/versions/node/v14.21.2/bin/node]
2: 0x1006386d8 node::CauseSegfault(v8::FunctionCallbackInfov8::Value const&) [/Users/kunal/.nvm/versions/node/v14.21.2/bin/node]
3: 0x10076cdb8 v8::internal::FunctionCallbackArguments::Call(v8::internal::CallHandlerInfo) [/Users/kunal/.nvm/versions/node/v14.21.2/bin/node]
4: 0x10076c3a8 v8::internal::MaybeHandlev8::internal::Object v8::internal::(anonymous namespace)::HandleApiCallHelper(v8::internal::Isolate*, v8::internal::Handlev8::internal::HeapObject, v8::internal::Handlev8::internal::HeapObject, v8::internal::Handlev8::internal::FunctionTemplateInfo, v8::internal::Handlev8::internal::Object, v8::internal::BuiltinArguments) [/Users/kunal/.nvm/versions/node/v14.21.2/bin/node]
5: 0x10076bc44 v8::internal::Builtin_Impl_HandleApiCall(v8::internal::BuiltinArguments, v8::internal::Isolate*) [/Users/kunal/.nvm/versions/node/v14.21.2/bin/node]
6: 0x100eba78c Builtins_CEntry_Return1_DontSaveFPRegs_ArgvOnStack_BuiltinExit [/Users/kunal/.nvm/versions/node/v14.21.2/bin/node]
7: 0x100e50f94 Builtins_InterpreterEntryTrampoline [/Users/kunal/.nvm/versions/node/v14.21.2/bin/node]
8: 0x100e4e844 Builtins_JSEntryTrampoline [/Users/kunal/.nvm/versions/node/v14.21.2/bin/node]
9: 0x100e4e4e8 Builtins_JSEntry [/Users/kunal/.nvm/versions/node/v14.21.2/bin/node]

Environment

node: v18.13.0
next (Next.js): v13.2.4
react: v18.2.0
@cleeng/mediastore-sdk: v3.1.2

Steps to Reproduce

At cmd/terminal run:

1. npx create-next-app with default settings.
2. Inside the new project run npm i @cleeng/mediastore-sdk
3. navigate to ./pages directory and add the following lines under the initial imports:

import { Config } from '@cleeng/mediastore-sdk';
Config.setEnvironment('sandbox');

This happens when using either of Next.js' SWC or Babel built-in compilers.

Errors

On npm run dev (next dev) or npm start (next start)

error - ./node_modules/@adyen/adyen-web/dist/adyen.css
Global CSS cannot be imported from within node_modules.
Read more: https://nextjs.org/docs/messages/css-npm
Location: node_modules\@cleeng\mediastore-sdk\dist\components\Adyen\Adyen.js

and

error - ./node_modules/react-loading-skeleton/dist/skeleton.css
Global CSS cannot be imported from within node_modules.
Read more: https://nextjs.org/docs/messages/css-npm
Location: node_modules\@cleeng\mediastore-sdk\dist\components\SkeletonWrapper\SkeletonWrapper.js

Cause

The mediastore-sdk is importing CSS from within the node module.

Potential Solutions

Remove require For CSS Files

Obviously a breaking change. Remove the require call that imports CSS into mediastore-sdk and provide a way for projects to import the styles themselves without having to manually install @adyen/adyen-web or react-loading-skeleton.

Transpile the Styles Into The Module

Possibly a breaking change for those who already have a workaround in place. As proposed here: https://nextjs.org/docs/messages/css-npm.

Workarounds

Use Next.js Experimental App directory

For those who find this issue, the App directory now supports CSS imports inside the node_modules directory. Not an option for me.

Modify Webpack Config

https://www.npmjs.com/package/next-remove-imports
https://www.npmjs.com/package/babel-plugin-transform-remove-imports
https://www.npmjs.com/package/swc-plugin-transform-remove-imports

I wasn't able to get them working with my project, but maybe you can.

Local NPM Package

1. Make a directory called @cleeng within your project and enter it.
2. Clone the latest release of mediastore-sdk.
3. Go back to the root of your project and install it as a local module. npm install ./@cleeng/mediastore-sdk
4. npm i @adyen/adyen-web@{version in mediastore package} react-loading-skeleton@{version in mediastore package} because we'll be manually importing their CSS files.
5. Cut CSS require calls from .\@cleeng\mediastore-sdk\dist\components\Adyen\Adyen.js and \@cleeng\mediastore-sdk\dist\components\SkeletonWrapper\SkeletonWrapper.js files in the mediastore-sdk clone.
6. Enter back into ./@cleeng/mediastore-sdk and run npm run compile
7. Add the following to your ./pages/_app.(ts|js):

import '@adyen/adyen-web/dist/adyen.css';
import 'react-loading-skeleton/dist/skeleton.css';

8. Go back to your project's root directory and run your next.js app.

Your _app file should look something like this:

import { Config } from '@cleeng/mediastore-sdk';
import '@adyen/adyen-web/dist/adyen.css';
import 'react-loading-skeleton/dist/skeleton.css';
Config.setEnvironment('sandbox');

Don't know how well this will work, but it's as far as I've gotten.

To update: Clear out node modules and follow all the steps above again (except for 1 and 7). Could probably automate it.