Custom Component Build Issues "hasn't received its "streamlit " message" in production

🧩 Custom Components
1

Tested everything in local, running both the local streamlit session and the local node session. But once I change to build, I’m getting issues running the custom component.

image
image1756×439 63.4 KB

image

when I serve it it seems to be running fine:

image
image1463×544 34.2 KB

image
image1916×785 100 KB

Below is my package.json I don’t think there’s anything out of the ordinary here

{
  "name": "SpeckleStreamlitViewer",
  "version": "0.0.1",
  "description": "Speckle Viewer",
  "dependencies": {
    "@speckle/viewer": "^2.16.0",
    "@types/jest": "^24.0.0",
    "@types/node": "^12.0.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "^5.0.1",
    "streamlit-component-lib": "^2.0.0",
    "three": "^0.158.0",
    "typescript": "^4.2.0"
  },
  "main": "webpack.config.js",
  "scripts": {
    "test": "react-scripts test",
    "start": "export PORT=3001 && react-scripts start",
    "build": "react-scripts build",
    "eject": "react-scripts eject"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@types/react": "^18.2.32",
    "@types/react-dom": "^18.2.14",
    "@types/three": "^0.158.3",
    "sass": "^1.69.5",
    "ts-loader": "^9.5.0"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

my init.py:

import os
import streamlit.components.v1 as components

_RELEASE = True

if not _RELEASE:
    _component_func = components.declare_component(
        "speckle_viewer",
        url="http://localhost:3001",
    )
else:
    parent_dir = os.path.dirname(os.path.abspath(__file__))
    build_dir = os.path.join(parent_dir, "frontend", "build")
    _component_func = components.declare_component(
        name="speckle_viewer",
        path=build_dir
    )

def speckle_viewer()
2

Hi @shuzmm

From the third screenshot, it seems that the speckle token is missing. Thus, could you check to see that it’s added and if that solves the issue.

There’s a tutorial for using speckle and streamlit here:

3

hi @dataprofessor I can confirm that this is not the case as the streams I have there are publicly available ones and do not need token access