search

livekit / livekit-react

React component and library for LiveKit
https://docs.livekit.io
Apache License 2.0
172 stars 63 forks source link

Example App appears blank #100

Closed cdeshapriya closed 2 years ago

cdeshapriya commented 2 years ago

I can build the sample app successfully. It loads but quickly end up with blank screen. Appreciate your response to rectify this issue.

lukasIO commented 2 years ago

Hi! Make sure that you run yarn install and yarn start from the root folder of the repo (not from the example folder).

If this doesn't resolve the issue, it would be helpful if you could provide more info about your system and node/browser console logs

cdeshapriya commented 2 years ago

Thanks for the prompt reply.

My system information as below:

node -v v16.17.1

yarn -V yarn install v1.22.19

ubuntu-distro-info --lts jammy

Dev server IP:port

128.199.179.102:3000

Deployment output:

$ yarn install yarn install v1.22.19 [1/4] Resolving packages... [2/4] Fetching packages... [3/4] Linking dependencies... warning " > @livekit/react-components@1.0.2" has unmet peer dependency "livekit-client@^1.3.2". warning " > @livekit/react-components@1.0.2" has unmet peer dependency "react@>=15". warning " > @livekit/react-components@1.0.2" has unmet peer dependency "react-dom@>=15". warning " > @livekit/react-core@1.0.2" has unmet peer dependency "livekit-client@^1.3.2". warning " > @livekit/react-core@1.0.2" has unmet peer dependency "react@>=15". warning " > @livekit/react-core@1.0.2" has unmet peer dependency "react-dom@>=15". warning "workspace-aggregator-d9289832-e8a5-40b3-abbd-8582d694908d > @livekit/react-components > react-tiny-popover@6.0.10" has incorrect peer dependency "react@^16.8.0 || ^17.0.0". warning "workspace-aggregator-d9289832-e8a5-40b3-abbd-8582d694908d > @livekit/react-components > react-tiny-popover@6.0.10" has incorrect peer dependency "react-dom@^16.8.0 || ^17.0.0". warning "workspace-aggregator-d9289832-e8a5-40b3-abbd-8582d694908d > @livekit/react-components > @testing-library/user-event@7.2.1" has unmet peer dependency "@testing-library/dom@>=5". warning "workspace-aggregator-d9289832-e8a5-40b3-abbd-8582d694908d > @livekit/react-components > eslint-config-standard-react@9.2.0" has unmet peer dependency "eslint-plugin-react@>=7.6.1". warning "workspace-aggregator-d9289832-e8a5-40b3-abbd-8582d694908d > @livekit/react-components > eslint-config-standard-react > eslint-config-standard-jsx@8.1.0" has unmet peer dependency "eslint-plugin-react@>=7.14.2". warning "workspace-aggregator-d9289832-e8a5-40b3-abbd-8582d694908d > @livekit/react-components > react-scripts > eslint-config-react-app > eslint-plugin-flowtype@8.0.3" has unmet peer dependency "@babel/plugin-syntax-flow@^7.14.5". warning "workspace-aggregator-d9289832-e8a5-40b3-abbd-8582d694908d > @livekit/react-components > react-scripts > eslint-config-react-app > eslint-plugin-flowtype@8.0.3" has unmet peer dependency "@babel/plugin-transform-react-jsx@^7.14.9". [4/4] Building fresh packages... Done in 51.50s.

yarn start yarn run v1.22.19 $ turbo run start • Packages in scope: @livekit/react-components, @livekit/react-core, livekit-react-example • Running start in 3 packages @livekit/react-core:build: cache miss, executing 0df9302f818e0c99 @livekit/react-core:start: cache bypass, force executing d30e236df37aec0f @livekit/react-core:build: $ microbundle-crl --no-compress --format modern,cjs @livekit/react-core:start: $ microbundle-crl watch --no-compress --format modern,cjs @livekit/react-core:start: Watching source, compiling to dist: @livekit/react-core:build: Build "reactCore" to dist: @livekit/react-core:build: 2.5 kB: index.js.gz @livekit/react-core:build: 2.19 kB: index.js.br @livekit/react-core:build: 2.41 kB: index.modern.js.gz @livekit/react-core:build: 2.12 kB: index.modern.js.br @livekit/react-components:start: cache bypass, force executing 7ce71d80eb9b4d2a @livekit/react-components:build: cache miss, executing 60c2bcfd2caac8ef @livekit/react-core:start: Wrote 2.02 kB: index.modern.js.gz @livekit/react-core:start: 1.78 kB: index.modern.js.br @livekit/react-core:start: Wrote 2.5 kB: index.js.gz @livekit/react-core:start: 2.19 kB: index.js.br @livekit/react-components:start: $ microbundle-crl watch --no-compress --format modern,cjs @livekit/react-components:build: $ microbundle-crl --no-compress --format modern,cjs @livekit/react-components:start: Watching source, compiling to dist: @livekit/react-components:build: Build "reactComponents" to dist: @livekit/react-components:build: 7.34 kB: index.js.gz @livekit/react-components:build: 6.46 kB: index.js.br @livekit/react-components:build: 7.19 kB: index.modern.js.gz @livekit/react-components:build: 6.3 kB: index.modern.js.br livekit-react-example:start: cache bypass, force executing a6d1d4df4a31a19e livekit-react-example:start: $ react-scripts start @livekit/react-components:start: Wrote 6.2 kB: index.modern.js.gz @livekit/react-components:start: 5.47 kB: index.modern.js.br @livekit/react-components:start: Wrote 7.49 kB: index.js.gz @livekit/react-components:start: 6.58 kB: index.js.br livekit-react-example:start: (node:10881) [DEP_WEBPACK_DEV_SERVER_ON_AFTER_SETUP_MIDDLEWARE] DeprecationWarning: 'onAfterSetupMiddleware' option is deprecated. Please use the 'setupMiddlewares' option. livekit-react-example:start: (Use node --trace-deprecation ... to show where the warning was created) livekit-react-example:start: (node:10881) [DEP_WEBPACK_DEV_SERVER_ON_BEFORE_SETUP_MIDDLEWARE] DeprecationWarning: 'onBeforeSetupMiddleware' option is deprecated. Please use the 'setupMiddlewares' option. livekit-react-example:start: Starting the development server... livekit-react-example:start: livekit-react-example:start: Compiled with warnings. livekit-react-example:start: livekit-react-example:start: Failed to parse source map: 'webpack:///dist/react-responsive.js' URL is not supported livekit-react-example:start: : livekit-react-example:start: Failed to parse source map: 'webpack:///dist/react-responsive.js' URL is not supported livekit-react-example:start: livekit-react-example:start: Search for the keywords to learn more about each warning. livekit-react-example:start: To ignore, add // eslint-disable-next-line to the line before. livekit-react-example:start: livekit-react-example:start: WARNING in ../node_modules/react-responsive/dist/react-responsive.js livekit-react-example:start: Module Warning (from ../node_modules/source-map-loader/dist/cjs.js): livekit-react-example:start: Failed to parse source map: 'webpack:///dist/react-responsive.js' URL is not supported livekit-react-example:start: livekit-react-example:start: webpack compiled with 1 warning livekit-react-example:start: No issues found.

lukasIO commented 2 years ago

thank you! to figure out what's going wrong:

  1. does it work when you run it locally and access it via localhost:3000 ?
  2. are there any additional logs either in the browser or from nodejs after you try to open localhost:3000?
cdeshapriya commented 2 years ago

As you have assumed, it is working at localhost. I even cloned it and deployed to gh-pages here: https://reactdemo.kit.cyber.lk/ working fine this too.

Great, Thanks a lot for the tip.