Custom Component Debugging

Is there anyway to debug a custom component? I’m trying to learn more and build my own. The component compiles but the development tab doesn’t show. If I remove my changes, the development tab shows. I presume I’m importing or doing something that breaking it, but have no way to debug it since it compiles properly.

Can you share your screens to understand the issue better please?

Hi, I actually fixed my initial issue. I was using the wrong package. I have ran into a new issue.

What I’m trying to do is to embed getStream.io react native feed component, inside an adalo component so i can use it with Adalo.
See this github link for getstream.io docs: https://github.com/GetStream/react-native-activity-feed

Reason I want to use stream.io is it already has pre-built tons of feed and chat functionality. They have their own components you can use that integrate directly with the API’s.

The component compiles no problem, but it does not render on the page. Below are the console logs and attached a screenshot. As the code I’m using

import React, { Component } from 'react'
import { StreamApp } from 'react-native-activity-feed'

class Streamio extends Component {
	render() {
		const { color, text } = this.props

		return (
			<StreamApp
            	apiKey=""
            	appId=""
            	token=""
        	/>
		)
	}
}

export default Streamio

Console Logs:

> adalo dev

{
  logo: './example-logo.png',
  displayName: 'cd my-component',
  components: [
    {
      name: 'Streamio',
      manifest: './src/components/Streamio/manifest.json'
    }
  ],
  name: 'cd-my-component',
  version: 'dev'
}
MANIFESTS: {"./src/components/Streamio/manifest.json":{"displayName":"streamio","defaultWidth":160,"defaultHeight":24,"components":"./index.js","icon":"./example-thumbnail.png","props":[{"name":"text","displayName":"Text","type":"text","default":"Happy Hacking"},{"name":"color","displayName":"Color","type":"color","default":"#00A898"}],"name":"Streamio"}}
Starting the dev web server...
⚠ 「wds」: transportMode is an experimental option, meaning its usage could potentially change without warning
ℹ 「wds」: Project is running at http://localhost:8000/webpack-dev-server/
ℹ 「wds」: webpack output is served from /dist/
ℹ 「wds」: Content not from webpack is served from /dist
ℹ 「wds」: Project is running at http://localhost:8001/webpack-dev-server/
ℹ 「wds」: webpack output is served from /dist/
ℹ 「wds」: Content not from webpack is served from /dist
STARTED LOCAL SERVERS: 8000, 8001
(node:6596) ExperimentalWarning: Package name self resolution is an experimental feature. This feature could change at any time
[Tue Dec 08 2020 21:59:03 GMT-0600 (Central Standard Time)] Connected to server.
[BABEL] Note: The code generator has deoptimised the styling of /Users/hannahdoyle/Desktop/adalo/components/my-component/node_modules/lodash/lodash.js as it exceeds the max of 500KB.
[BABEL] Note: The code generator has deoptimised the styling of /Users/hannahdoyle/Desktop/adalo/components/my-component/node_modules/lodash/lodash.js as it exceeds the max of 500KB.
ℹ 「wdm」: Hash: 60c6253140aa3ecb4fdd
Version: webpack 4.44.2
Time: 14898ms
Built at: 12/08/2020 9:59:15 PM
     Asset      Size  Chunks             Chunk Names
runtime.js  1.95 MiB    main  [emitted]  main
Entrypoint main = runtime.js
[./dist/input/runtime.js] 42 bytes {main} [built]
[./index.js] 122 bytes {main} [built]
[./node_modules/@babel/runtime/helpers/interopRequireDefault.js] 147 bytes {main} [built]
[./node_modules/react-native-activity-feed-core/lib/Context/index.js] 769 bytes {main} [built]
[./node_modules/react-native-activity-feed-core/lib/components/Activity.js] 10.2 KiB {main} [built]
[./node_modules/react-native-activity-feed-core/lib/components/Avatar.js] 4.27 KiB {main} [built]
[./node_modules/react-native-activity-feed-core/lib/components/BackButton.js] 2.69 KiB {main} [built]
[./node_modules/react-native-activity-feed-core/lib/components/Card.js] 1.52 KiB {main} [built]
[./node_modules/react-native-activity-feed-core/lib/components/CommentBox.js] 5.19 KiB {main} [built]
[./node_modules/react-native-activity-feed-core/lib/index.js] 8.04 KiB {main} [built]
[./node_modules/react-native-activity-feed/lib/index.js] 717 bytes {main} [built]
[./node_modules/react-native-image-picker/index.js] 1.99 KiB {main} [built]
[./src/components/Streamio/index.js] 3.7 KiB {main} [built]
[react] external "React" 42 bytes {main} [built]
[react-native] external "ReactNative" 42 bytes {main} [built]
    + 274 hidden modules
ℹ 「wdm」: Compiled successfully.
ℹ 「wdm」: Hash: 130b8dac44b4061fa0d8
Version: webpack 4.44.2
Time: 15020ms
Built at: 12/08/2020 9:59:15 PM
    Asset      Size  Chunks             Chunk Names
editor.js  1.95 MiB    main  [emitted]  main
Entrypoint main = editor.js
[./dist/input/editor.js] 643 bytes {main} [built]
[./index.js] 122 bytes {main} [built]
[./node_modules/@babel/runtime/helpers/interopRequireDefault.js] 147 bytes {main} [built]
[./node_modules/react-native-activity-feed-core/lib/Context/index.js] 769 bytes {main} [built]
[./node_modules/react-native-activity-feed-core/lib/components/Activity.js] 10.2 KiB {main} [built]
[./node_modules/react-native-activity-feed-core/lib/components/Avatar.js] 4.27 KiB {main} [built]
[./node_modules/react-native-activity-feed-core/lib/components/BackButton.js] 2.69 KiB {main} [built]
[./node_modules/react-native-activity-feed-core/lib/components/Card.js] 1.52 KiB {main} [built]
[./node_modules/react-native-activity-feed-core/lib/components/CommentBox.js] 5.19 KiB {main} [built]
[./node_modules/react-native-activity-feed-core/lib/index.js] 8.04 KiB {main} [built]
[./node_modules/react-native-activity-feed/lib/index.js] 717 bytes {main} [built]
[./node_modules/react-native-image-picker/index.js] 1.99 KiB {main} [built]
[./src/components/Streamio/index.js] 3.7 KiB {main} [built]
[react] external "React" 42 bytes {main} [built]
[react-native] external "ReactNative" 42 bytes {main} [built]
    + 274 hidden modules
ℹ 「wdm」: Compiled successfully.
ℹ 「wdm」: Compiling...
ℹ 「wdm」: Compiling...
TYPE: editor
GETTING LOCAL BUILD: http://localhost:8000/dist/editor.js
TYPE: editor
GETTING LOCAL BUILD: http://localhost:8000/dist/editor.js
TYPE: editor
GETTING LOCAL BUILD: http://localhost:8000/dist/editor.js
ℹ 「wdm」: wait until bundle finished: /dist/editor.js
ℹ 「wdm」: wait until bundle finished: /dist/editor.js
ℹ 「wdm」: wait until bundle finished: /dist/editor.js
ℹ 「wdm」: Hash: 130b8dac44b4061fa0d8
Version: webpack 4.44.2
Time: 277ms
Built at: 12/08/2020 9:59:15 PM
    Asset      Size  Chunks  Chunk Names
editor.js  1.95 MiB    main  main
Entrypoint main = editor.js
[./dist/input/editor.js] 643 bytes {main} [built]
[./index.js] 122 bytes {main}
[./node_modules/@babel/runtime/helpers/interopRequireDefault.js] 147 bytes {main}
[./node_modules/react-native-activity-feed-core/lib/Context/index.js] 769 bytes {main}
[./node_modules/react-native-activity-feed-core/lib/components/Activity.js] 10.2 KiB {main}
[./node_modules/react-native-activity-feed-core/lib/components/Avatar.js] 4.27 KiB {main}
[./node_modules/react-native-activity-feed-core/lib/components/BackButton.js] 2.69 KiB {main}
[./node_modules/react-native-activity-feed-core/lib/components/Card.js] 1.52 KiB {main}
[./node_modules/react-native-activity-feed-core/lib/components/CommentBox.js] 5.19 KiB {main}
[./node_modules/react-native-activity-feed-core/lib/index.js] 8.04 KiB {main}
[./node_modules/react-native-activity-feed/lib/index.js] 717 bytes {main}
[./node_modules/react-native-image-picker/index.js] 1.99 KiB {main}
[./src/components/Streamio/index.js] 3.7 KiB {main}
[react] external "React" 42 bytes {main}
[react-native] external "ReactNative" 42 bytes {main}
    + 274 hidden modules
ℹ 「wdm」: Compiled successfully.
ℹ 「wdm」: Hash: 60c6253140aa3ecb4fdd
Version: webpack 4.44.2
Time: 504ms
Built at: 12/08/2020 9:59:16 PM
     Asset      Size  Chunks  Chunk Names
runtime.js  1.95 MiB    main  main
Entrypoint main = runtime.js
[./dist/input/runtime.js] 42 bytes {main} [built]
[./index.js] 122 bytes {main}
[./node_modules/@babel/runtime/helpers/interopRequireDefault.js] 147 bytes {main}
[./node_modules/react-native-activity-feed-core/lib/Context/index.js] 769 bytes {main}
[./node_modules/react-native-activity-feed-core/lib/components/Activity.js] 10.2 KiB {main}
[./node_modules/react-native-activity-feed-core/lib/components/Avatar.js] 4.27 KiB {main}
[./node_modules/react-native-activity-feed-core/lib/components/BackButton.js] 2.69 KiB {main}
[./node_modules/react-native-activity-feed-core/lib/components/Card.js] 1.52 KiB {main}
[./node_modules/react-native-activity-feed-core/lib/components/CommentBox.js] 5.19 KiB {main}
[./node_modules/react-native-activity-feed-core/lib/index.js] 8.04 KiB {main}
[./node_modules/react-native-activity-feed/lib/index.js] 717 bytes {main}
[./node_modules/react-native-image-picker/index.js] 1.99 KiB {main}
[./src/components/Streamio/index.js] 3.7 KiB {main}
[react] external "React" 42 bytes {main}
[react-native] external "ReactNative" 42 bytes {main}
    + 274 hidden modules
ℹ 「wdm」: Compiled successfully.

I got it, it was actually a user issue for the stream library, I needed to included another component. Thank you for your attention. This is solved

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.