cleeng / mediastore-sdk Goto Github PK
View Code? Open in Web Editor NEWReact.js component library for building a seamless checkout and account management process
License: BSD 3-Clause "New" or "Revised" License
React.js component library for building a seamless checkout and account management process
License: BSD 3-Clause "New" or "Revised" License
This issue occures when SDK is fully bundled in one file for web.
Steps to reproduce :
Config.setTheme
at app startupIt 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.
node: v18.13.0
next (Next.js): v13.2.4
react: v18.2.0
@cleeng/mediastore-sdk: v3.1.2
At cmd/terminal run:
npx create-next-app
with default settings.npm i @cleeng/mediastore-sdk
./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.
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
The mediastore-sdk is importing CSS from within the node module.
require
For CSS FilesObviously 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
.
Possibly a breaking change for those who already have a workaround in place. As proposed here: https://nextjs.org/docs/messages/css-npm.
For those who find this issue, the App directory now supports CSS imports inside the node_modules
directory. Not an option for me.
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.
@cleeng
within your project and enter it.npm install ./@cleeng/mediastore-sdk
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.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../@cleeng/mediastore-sdk
and run npm run compile
./pages/_app.(ts|js)
:import '@adyen/adyen-web/dist/adyen.css';
import 'react-loading-skeleton/dist/skeleton.css';
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.
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]
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.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.