Upgrade to @observable/runtime 5 leads to compile errors

Community Help
1

First things first: I am not very familiar with node.js setups and the build tools. This might be a very trivial issue but google couldn’t help me here:

I am using cells of an observable notebook in a react application which is powered by the create-react-app (setup is already a couple of years old).
With version 4 of the observable runtime this all worked fine.
But since I upgraded the runtime version to 5 I get these compiler warnings (literally dozens, all looking the same but for the various libraries):

WARNING in ./node_modules/@observablehq/stdlib/src/ lazy ^.*.*$ strict namespace object @observablehq/stdlib/src/arquero.js Module not found: Error: Package path ./src/arquero.js is not exported from package /Users/markus/testproject/node_modules/@observablehq/stdlib (see exports field in /Users/markus/testproject/node_modules/@observablehq/stdlib/package.json)

Anyone any idea how this can be fixed?

1 Like
2

Can you share your package.json?

3

Sure

{
  "name": "ui-tab",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@fluentui/react-northstar": "^0.64.0",
    "@xxx/insights": "https://api.observablehq.com/@xxx/insights@693.tgz?v=3",
    "@microsoft/mgt": "^2.6.2",
    "@microsoft/mgt-react": "^2.6.2",
    "@microsoft/teams-js": "^2.4.1",
    "@observablehq/plot": "^0.6.0",
    "@observablehq/runtime": "5",
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^14.4.3",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "^5.0.1",
    "web-vitals": "^3.0.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "GENERATE_SOURCEMAP=false react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}
4

The regular expression in the error suggests to me that it might be some problem with webpack, and arquero.js is likely just the first file it encountered in the package.

Since you mentioned that the project is several years old, I would recommend to bootstrap a new project skeleton with a recent version of create-react-app (be sure to read the disclaimer about previous installations) and migrate your project files over.

5

Thanks. The “ultimate” solution. I wanted to give nx a go anywway. Looks like the perfect oppertunity.