Paperbits designer does not render when added as markup inside a react app / react component

[revdfdev]

After compiling the designer in the demo app , I added the compiled js and css and referenced it in the public/index.html in my sample react app and added reference in the react component, It does render the designer but does not load any UI components in the designer and gives a message "Something went wrong: We are unable to complete your operation at this time".

Steps to reproduce the behavior:

1. Compile the designer in the paperbits-demo repo.
2. reference the compile js and css files from the dist/designer folder in the public/index.html head tag in the app created by create-react-app.
3. Create a component and reference the root of ko.js in the component i.e.
4. Run the app and see the following behavior attached in the screenshot.

Actual behavior should be its should render the editor as it is in the paperbits-demo app.

localhost-1600270699235.log

Running the application in chrome browser and windows pc.

[azaslonov]

Hi Rehan, it looks like designer is trying to load configuration JSON file and cannot do it. Please look at the Network logs of your browser, there you'll probably find /config.json request that cannot be found. If that's the case, you'll need to ensure that this file is in a root of compiled designer folder (by default, in paperbits-demo project it is /dist/designer).

[revdfdev]

So as you said I made the required changes, But still, I am getting some errors but paperbits now have more controls. but I still get the same error saying can't complete operation.

DevTools failed to load SourceMap: Could not load content for chrome-extension://ljngjbnaijcbncmcnjfhigebomdlkcjo/content-script/browser-polyfill.min.js.map: HTTP error: status code 404, net::ERR_UNKNOWN_URL_SCHEME DevTools failed to load SourceMap: Could not load content for chrome-extension://nkbihfbeogaeaoehlefnkodbefgpgknn/sourcemaps/contentscript.js.map: HTTP error: status code 404, net::ERR_UNKNOWN_URL_SCHEME DevTools failed to load SourceMap: Could not load content for chrome-extension://nkbihfbeogaeaoehlefnkodbefgpgknn/sourcemaps/inpage.js.map: HTTP error: status code 404, net::ERR_UNKNOWN_URL_SCHEME log.js:24 [HMR] Waiting for update signal from WDS... DevTools failed to load SourceMap: Could not load content for http://localhost:3000/designer/editors/scripts/index.es.js.map: HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE DevTools failed to load SourceMap: Could not load content for http://localhost:3000/designer/scripts/native-shim.js.map: HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE index.js:1 Warning: The tag <app> is unrecognized in this browser. If you meant to render a React component, start its name with an uppercase letter. in app (at App.js:6) in App (at src/index.js:9) in StrictMode (at src/index.js:8) console.<computed> @ index.js:1 printWarning @ react-dom.development.js:88 error @ react-dom.development.js:60 createElement @ react-dom.development.js:5927 createInstance @ react-dom.development.js:7490 completeWork @ react-dom.development.js:18970 completeUnitOfWork @ react-dom.development.js:22192 performUnitOfWork @ react-dom.development.js:22165 workLoopSync @ react-dom.development.js:22130 performSyncWorkOnRoot @ react-dom.development.js:21756 scheduleUpdateOnFiber @ react-dom.development.js:21188 updateContainer @ react-dom.development.js:24373 (anonymous) @ react-dom.development.js:24758 unbatchedUpdates @ react-dom.development.js:21903 legacyRenderSubtreeIntoContainer @ react-dom.development.js:24757 render @ react-dom.development.js:24840 ./src/index.js @ index.js:7 __webpack_require__ @ bootstrap:784 fn @ bootstrap:150 1 @ serviceWorker.js:141 __webpack_require__ @ bootstrap:784 checkDeferredModules @ bootstrap:45 webpackJsonpCallback @ bootstrap:32 (anonymous) @ main.chunk.js:1 paperbits.js:116139 Startup {"message":"App started."} paperbits.js:6468 [Violation] 'message' handler took 192ms inpage.js:1 MetaMask: MetaMask will soon stop reloading pages on network change. For more information, see: https://docs.metamask.io/guide/ethereum-provider.html#ethereum-autorefreshonnetworkchange Set 'ethereum.autoRefreshOnNetworkChange' to 'false' to silence this warning. (anonymous) @ inpage.js:1 setTimeout (async) t.exports @ inpage.js:1 initProvider @ inpage.js:1 (anonymous) @ inpage.js:1 1../lib/setupWeb3.js @ inpage.js:1 i @ inpage.js:1 e @ inpage.js:1 (anonymous) @ inpage.js:1 (anonymous) @ contentscript.js:1 1.@babel/runtime/helpers/interopRequireDefault @ contentscript.js:1 i @ contentscript.js:1 e @ contentscript.js:1 (anonymous) @ contentscript.js:1 DevTools failed to load SourceMap: Could not load content for chrome-extension://nkbihfbeogaeaoehlefnkodbefgpgknn/sourcemaps/contentscript.js.map: HTTP error: status code 404, net::ERR_UNKNOWN_URL_SCHEME DevTools failed to load SourceMap: Could not load content for chrome-extension://nkbihfbeogaeaoehlefnkodbefgpgknn/sourcemaps/inpage.js.map: HTTP error: status code 404, net::ERR_UNKNOWN_URL_SCHEME theme.js:1 Uncaught SyntaxError: Unexpected token '<' index.js:1 Unhandled Promise rejection: SyntaxError: Unexpected token < in JSON at position 0 ; Zone: <root> ; Task: Promise.then ; Value: Error: SyntaxError: Unexpected token < in JSON at position 0 at HttpResponse.toObject (paperbits.js:18605) at StaticObjectStorage.<anonymous> (paperbits.js:116456) at Generator.next (<anonymous>) at fulfilled (paperbits.js:116429) at ZoneDelegate.invoke (paperbits.js:6713) at Zone.run (paperbits.js:6475) at paperbits.js:7614 at ZoneDelegate.invokeTask (paperbits.js:6747) at Zone.runTask (paperbits.js:6519) at drainMicroTaskQueue (paperbits.js:6923) at ZoneTask.invokeTask [as invoke] (paperbits.js:6832) at invokeTask (paperbits.js:7938) at XMLHttpRequest.globalZoneAwareCallback (paperbits.js:7964) Error: SyntaxError: Unexpected token < in JSON at position 0 at HttpResponse.toObject (http://localhost:3000/designer/editors/scripts/paperbits.js:18605:19) at StaticObjectStorage.<anonymous> (http://localhost:3000/designer/editors/scripts/paperbits.js:116456:51) at Generator.next (<anonymous>) at fulfilled (http://localhost:3000/designer/editors/scripts/paperbits.js:116429:58) at ZoneDelegate.invoke (http://localhost:3000/designer/editors/scripts/paperbits.js:6713:30) at Zone.run (http://localhost:3000/designer/editors/scripts/paperbits.js:6475:47) at http://localhost:3000/designer/editors/scripts/paperbits.js:7614:40 at ZoneDelegate.invokeTask (http://localhost:3000/designer/editors/scripts/paperbits.js:6747:35) at Zone.runTask (http://localhost:3000/designer/editors/scripts/paperbits.js:6519:51) at drainMicroTaskQueue (http://localhost:3000/designer/editors/scripts/paperbits.js:6923:39) at ZoneTask.invokeTask [as invoke] (http://localhost:3000/designer/editors/scripts/paperbits.js:6832:25) at invokeTask (http://localhost:3000/designer/editors/scripts/paperbits.js:7938:18) at XMLHttpRequest.globalZoneAwareCallback (http://localhost:3000/designer/editors/scripts/paperbits.js:7964:21) console.<computed> @ index.js:1 overrideMethod @ react_devtools_backend.js:2273 api.onUnhandledError @ paperbits.js:7404 handleUnhandledRejection @ paperbits.js:7426 api.microtaskDrainDone @ paperbits.js:7420 drainMicroTaskQueue @ paperbits.js:6930 invokeTask @ paperbits.js:6832 invokeTask @ paperbits.js:7938 globalZoneAwareCallback @ paperbits.js:7964 XMLHttpRequest.send (async) scheduleTask @ paperbits.js:9183 scheduleTask @ paperbits.js:6734 scheduleTask @ paperbits.js:6562 scheduleMacroTask @ paperbits.js:6585 scheduleMacroTaskWithCurrentZone @ paperbits.js:7020 (anonymous) @ paperbits.js:9216 proto.<computed> @ paperbits.js:7316 (anonymous) @ paperbits.js:18774 ZoneAwarePromise @ paperbits.js:7725 send @ paperbits.js:18738 (anonymous) @ paperbits.js:116452 (anonymous) @ paperbits.js:116432 ZoneAwarePromise @ paperbits.js:7725 __awaiter @ paperbits.js:116428 (anonymous) @ paperbits.js:116451 ZoneAwarePromise @ paperbits.js:7725 (anonymous) @ paperbits.js:116451 (anonymous) @ paperbits.js:116432 ZoneAwarePromise @ paperbits.js:7725 __awaiter @ paperbits.js:116428 getData @ paperbits.js:116447 (anonymous) @ paperbits.js:116497 (anonymous) @ paperbits.js:116432 ZoneAwarePromise @ paperbits.js:7725 __awaiter @ paperbits.js:116428 getObject @ paperbits.js:116496 (anonymous) @ paperbits.js:17379 fulfilled @ paperbits.js:17252 invoke @ paperbits.js:6713 run @ paperbits.js:6475 (anonymous) @ paperbits.js:7614 invokeTask @ paperbits.js:6747 runTask @ paperbits.js:6519 drainMicroTaskQueue @ paperbits.js:6923 invokeTask @ paperbits.js:6832 invokeTask @ paperbits.js:7938 globalZoneAwareCallback @ paperbits.js:7964 load (async) customScheduleGlobal @ paperbits.js:8090 scheduleTask @ paperbits.js:6734 scheduleTask @ paperbits.js:6562 scheduleEventTask @ paperbits.js:6588 (anonymous) @ paperbits.js:8245 createIFrame @ paperbits.js:65793 init @ paperbits.js:65726 (anonymous) @ paperbits.js:9367 G @ paperbits.js:9329 (anonymous) @ paperbits.js:9367 D @ paperbits.js:9299 p @ paperbits.js:9366 k @ paperbits.js:9364 m @ paperbits.js:9364 a.Oa @ paperbits.js:9372 a.o.l @ paperbits.js:9392 yd @ paperbits.js:9343 zd @ paperbits.js:9343 ha @ paperbits.js:9342 a.o.a.$ @ paperbits.js:9340 init @ paperbits.js:9392 (anonymous) @ paperbits.js:9367 G @ paperbits.js:9329 (anonymous) @ paperbits.js:9367 D @ paperbits.js:9299 p @ paperbits.js:9366 k @ paperbits.js:9364 m @ paperbits.js:9364 a.Oa @ paperbits.js:9372 (anonymous) @ paperbits.js:49530 notifySubscribers @ paperbits.js:9326 (anonymous) @ paperbits.js:9374 b @ paperbits.js:9322 c @ paperbits.js:9322 invoke @ paperbits.js:6713 runGuarded @ paperbits.js:6485 (anonymous) @ paperbits.js:6469 attributes (async) (anonymous) @ paperbits.js:9322 zb @ paperbits.js:9323 (anonymous) @ paperbits.js:9374 (anonymous) @ paperbits.js:9374 (anonymous) @ paperbits.js:9375 callbackWrapper @ paperbits.js:49373 g @ paperbits.js:9376 (anonymous) @ paperbits.js:9376 (anonymous) @ paperbits.js:9375 c @ paperbits.js:9376 loadViewModel @ paperbits.js:9380 loadViewModel @ paperbits.js:49341 e @ paperbits.js:9375 (anonymous) @ paperbits.js:9376 f @ paperbits.js:9378 b @ paperbits.js:9376 (anonymous) @ paperbits.js:9379 f @ paperbits.js:9378 loadComponent @ paperbits.js:9379 loadComponent @ paperbits.js:49375 e @ paperbits.js:9375 (anonymous) @ paperbits.js:9374 (anonymous) @ paperbits.js:9375 getConfig @ paperbits.js:9379 e @ paperbits.js:9375 e @ paperbits.js:9375 d @ paperbits.js:9374 c @ paperbits.js:9374 get @ paperbits.js:9376 ko.computed.disposeWhenNodeIsRemoved @ paperbits.js:49516 yd @ paperbits.js:9343 zd @ paperbits.js:9343 ha @ paperbits.js:9342 a.o.a.$ @ paperbits.js:9340 init @ paperbits.js:49500 (anonymous) @ paperbits.js:9367 G @ paperbits.js:9329 (anonymous) @ paperbits.js:9367 D @ paperbits.js:9299 p @ paperbits.js:9366 k @ paperbits.js:9364 m @ paperbits.js:9364 k @ paperbits.js:9364 m @ paperbits.js:9364 k @ paperbits.js:9364 a.vc @ paperbits.js:9373 ko.applyBindings @ paperbits.js:70414 (anonymous) @ paperbits.js:121 run @ paperbits.js:265 runIfPresent @ paperbits.js:294 onGlobalMessage @ paperbits.js:334 postMessage (async) registerImmediate @ paperbits.js:345 setImmediate @ paperbits.js:252 (anonymous) @ paperbits.js:121 invokeTask @ paperbits.js:6747 runTask @ paperbits.js:6519 invokeTask @ paperbits.js:6828 invokeTask @ paperbits.js:7938 globalZoneAwareCallback @ paperbits.js:7975 Show 104 more frames index.js:1 Unhandled rejection: Error: SyntaxError: Unexpected token < in JSON at position 0 at HttpResponse.toObject (http://localhost:3000/designer/editors/scripts/paperbits.js:18605:19) at StaticObjectStorage.<anonymous> (http://localhost:3000/designer/editors/scripts/paperbits.js:116456:51) at Generator.next (<anonymous>) at fulfilled (http://localhost:3000/designer/editors/scripts/paperbits.js:116429:58) at ZoneDelegate.invoke (http://localhost:3000/designer/editors/scripts/paperbits.js:6713:30) at Zone.run (http://localhost:3000/designer/editors/scripts/paperbits.js:6475:47) at http://localhost:3000/designer/editors/scripts/paperbits.js:7614:40 at ZoneDelegate.invokeTask (http://localhost:3000/designer/editors/scripts/paperbits.js:6747:35) at Zone.runTask (http://localhost:3000/designer/editors/scripts/paperbits.js:6519:51) at drainMicroTaskQueue (http://localhost:3000/designer/editors/scripts/paperbits.js:6923:39) at ZoneTask.invokeTask [as invoke] (http://localhost:3000/designer/editors/scripts/paperbits.js:6832:25) at invokeTask (http://localhost:3000/designer/editors/scripts/paperbits.js:7938:18) at XMLHttpRequest.globalZoneAwareCallback (http://localhost:3000/designer/editors/scripts/paperbits.js:7964:21) console.<computed> @ index.js:1 overrideMethod @ react_devtools_backend.js:2273 (anonymous) @ paperbits.js:116144 (anonymous) @ paperbits.js:116126 ZoneAwarePromise @ paperbits.js:7725 __awaiter @ paperbits.js:116122 trackError @ paperbits.js:116143 handlerPromiseRejection @ paperbits.js:68198 (anonymous) @ paperbits.js:18297 dispatchEvent @ paperbits.js:18297 onUnhandledRejection @ paperbits.js:18475 invokeTask @ paperbits.js:6747 runTask @ paperbits.js:6519 invokeTask @ paperbits.js:6828 invokeTask @ paperbits.js:7938 globalZoneAwareCaptureCallback @ paperbits.js:7996 paperbits.js:18605 Uncaught (in promise) Error: SyntaxError: Unexpected token < in JSON at position 0 at HttpResponse.toObject (paperbits.js:18605) at StaticObjectStorage.<anonymous> (paperbits.js:116456) at Generator.next (<anonymous>) at fulfilled (paperbits.js:116429) at ZoneDelegate.invoke (paperbits.js:6713) at Zone.run (paperbits.js:6475) at paperbits.js:7614 at ZoneDelegate.invokeTask (paperbits.js:6747) at Zone.runTask (paperbits.js:6519) at drainMicroTaskQueue (paperbits.js:6923) at ZoneTask.invokeTask [as invoke] (paperbits.js:6832) at invokeTask (paperbits.js:7938) at XMLHttpRequest.globalZoneAwareCallback (paperbits.js:7964) toObject @ paperbits.js:18605 (anonymous) @ paperbits.js:116456 fulfilled @ paperbits.js:116429 invoke @ paperbits.js:6713 run @ paperbits.js:6475 (anonymous) @ paperbits.js:7614 invokeTask @ paperbits.js:6747 runTask @ paperbits.js:6519 drainMicroTaskQueue @ paperbits.js:6923 invokeTask @ paperbits.js:6832 invokeTask @ paperbits.js:7938 globalZoneAwareCallback @ paperbits.js:7964 Promise.then (async) scheduleMicroTask @ paperbits.js:6906 scheduleTask @ paperbits.js:6737 scheduleTask @ paperbits.js:6562 scheduleMicroTask @ paperbits.js:6582 scheduleResolveOrReject @ paperbits.js:7604 then @ paperbits.js:7748 XMLHttpRequest.send (async) scheduleTask @ paperbits.js:9183 scheduleTask @ paperbits.js:6734 scheduleTask @ paperbits.js:6562 scheduleMacroTask @ paperbits.js:6585 scheduleMacroTaskWithCurrentZone @ paperbits.js:7020 (anonymous) @ paperbits.js:9216 proto.<computed> @ paperbits.js:7316 (anonymous) @ paperbits.js:18774 ZoneAwarePromise @ paperbits.js:7725 send @ paperbits.js:18738 (anonymous) @ paperbits.js:116452 (anonymous) @ paperbits.js:116432 ZoneAwarePromise @ paperbits.js:7725 __awaiter @ paperbits.js:116428 (anonymous) @ paperbits.js:116451 ZoneAwarePromise @ paperbits.js:7725 (anonymous) @ paperbits.js:116451 (anonymous) @ paperbits.js:116432 ZoneAwarePromise @ paperbits.js:7725 __awaiter @ paperbits.js:116428 getData @ paperbits.js:116447 (anonymous) @ paperbits.js:116497 (anonymous) @ paperbits.js:116432 ZoneAwarePromise @ paperbits.js:7725 __awaiter @ paperbits.js:116428 getObject @ paperbits.js:116496 (anonymous) @ paperbits.js:17379 fulfilled @ paperbits.js:17252 invoke @ paperbits.js:6713 run @ paperbits.js:6475 (anonymous) @ paperbits.js:7614 invokeTask @ paperbits.js:6747 runTask @ paperbits.js:6519 drainMicroTaskQueue @ paperbits.js:6923 invokeTask @ paperbits.js:6832 invokeTask @ paperbits.js:7938 globalZoneAwareCallback @ paperbits.js:7964 load (async) customScheduleGlobal @ paperbits.js:8090 scheduleTask @ paperbits.js:6734 scheduleTask @ paperbits.js:6562 scheduleEventTask @ paperbits.js:6588 (anonymous) @ paperbits.js:8245 createIFrame @ paperbits.js:65793 init @ paperbits.js:65726 (anonymous) @ paperbits.js:9367 G @ paperbits.js:9329 (anonymous) @ paperbits.js:9367 D @ paperbits.js:9299 p @ paperbits.js:9366 k @ paperbits.js:9364 m @ paperbits.js:9364 a.Oa @ paperbits.js:9372 a.o.l @ paperbits.js:9392 yd @ paperbits.js:9343 zd @ paperbits.js:9343 ha @ paperbits.js:9342 a.o.a.$ @ paperbits.js:9340 init @ paperbits.js:9392 (anonymous) @ paperbits.js:9367 G @ paperbits.js:9329 (anonymous) @ paperbits.js:9367 D @ paperbits.js:9299 p @ paperbits.js:9366 k @ paperbits.js:9364 m @ paperbits.js:9364 a.Oa @ paperbits.js:9372 (anonymous) @ paperbits.js:49530 notifySubscribers @ paperbits.js:9326 (anonymous) @ paperbits.js:9374 b @ paperbits.js:9322 c @ paperbits.js:9322 invoke @ paperbits.js:6713 runGuarded @ paperbits.js:6485 (anonymous) @ paperbits.js:6469 attributes (async) (anonymous) @ paperbits.js:9322 zb @ paperbits.js:9323 (anonymous) @ paperbits.js:9374 (anonymous) @ paperbits.js:9374 (anonymous) @ paperbits.js:9375 callbackWrapper @ paperbits.js:49373 g @ paperbits.js:9376 (anonymous) @ paperbits.js:9376 (anonymous) @ paperbits.js:9375 c @ paperbits.js:9376 loadViewModel @ paperbits.js:9380 loadViewModel @ paperbits.js:49341 e @ paperbits.js:9375 (anonymous) @ paperbits.js:9376 f @ paperbits.js:9378 b @ paperbits.js:9376 (anonymous) @ paperbits.js:9379 f @ paperbits.js:9378 loadComponent @ paperbits.js:9379 loadComponent @ paperbits.js:49375 e @ paperbits.js:9375 (anonymous) @ paperbits.js:9374 (anonymous) @ paperbits.js:9375 getConfig @ paperbits.js:9379 e @ paperbits.js:9375 e @ paperbits.js:9375 d @ paperbits.js:9374 c @ paperbits.js:9374 get @ paperbits.js:9376 ko.computed.disposeWhenNodeIsRemoved @ paperbits.js:49516 yd @ paperbits.js:9343 zd @ paperbits.js:9343 ha @ paperbits.js:9342 a.o.a.$ @ paperbits.js:9340 init @ paperbits.js:49500 (anonymous) @ paperbits.js:9367 G @ paperbits.js:9329 (anonymous) @ paperbits.js:9367 D @ paperbits.js:9299 p @ paperbits.js:9366 k @ paperbits.js:9364 m @ paperbits.js:9364 k @ paperbits.js:9364 m @ paperbits.js:9364 k @ paperbits.js:9364 a.vc @ paperbits.js:9373 ko.applyBindings @ paperbits.js:70414 (anonymous) @ paperbits.js:121 run @ paperbits.js:265 runIfPresent @ paperbits.js:294 onGlobalMessage @ paperbits.js:334 postMessage (async) registerImmediate @ paperbits.js:345 setImmediate @ paperbits.js:252 (anonymous) @ paperbits.js:121 invokeTask @ paperbits.js:6747 runTask @ paperbits.js:6519 invokeTask @ paperbits.js:6828 invokeTask @ paperbits.js:7938 globalZoneAwareCallback @ paperbits.js:7975 Show 113 more frames inpage.js:1 MetaMask: MetaMask will soon stop reloading pages on network change. For more information, see: https://docs.metamask.io/guide/ethereum-provider.html#ethereum-autorefreshonnetworkchange Set 'ethereum.autoRefreshOnNetworkChange' to 'false' to silence this warning. (anonymous) @ inpage.js:1 setTimeout (async) t.exports @ inpage.js:1 initProvider @ inpage.js:1 (anonymous) @ inpage.js:1 1../lib/setupWeb3.js @ inpage.js:1 i @ inpage.js:1 e @ inpage.js:1 (anonymous) @ inpage.js:1 (anonymous) @ contentscript.js:1 1.@babel/runtime/helpers/interopRequireDefault @ contentscript.js:1 i @ contentscript.js:1 e @ contentscript.js:1 (anonymous) @ contentscript.js:1

[starostin]

Hi @revdfdev. Thanks for sharing you approach. I have also implemented it and have the same errors. Were you able to solve them?

[starostin]

Hey @revdfdev I have fixed some issues. And now I have just one error

[revdfdev]

The example is written is knockout.js it's a bit difficult to run the app inside a react application. The plugin is designed to run the other way around, I have discarded the use of it. It's worth to wait if the developer develops a react based example.

I am also stuck on the same error as well.

[starostin]

Thanks for the answer

[azaslonov]

Hi folks, just in case, there is an example of react application and designer component in it: https://github.com/paperbits/examples/tree/master/ui-frameworks/react

Hope that helps.

[starostin]

Hi @azaslonov , thanks a lot for examples. They are very helpful! Is there any way to pass data from designer to react or angular app? I mean json of the created website

[azaslonov]

Yes, there are just two interfaces responsible for data: IObjectStorage and IBlobStorage. There are also implementation examples, for instance: StaticObjectStorage (in paperbits-demo) and FirebaseObjectStorage (in paperbits-firebase).

So you can take one of them and repurpose to your storage or API.

[azaslonov]

Closing due to inactivity. Please feel free to re-open shall you need further assistance.