search

streamlit / component-template

Templates and example code for creating Streamlit Components
https://streamlit.io
Apache License 2.0
462 stars 227 forks source link

Bumped react-script, seems to fix install and run issues #32

Closed blackary closed 1 year ago

blackary commented 1 year ago

Fixes #29 #30 #21, I believe

Before:

npm install
npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR!
npm ERR! While resolving: react-scripts@3.4.1
npm ERR! Found: typescript@4.9.5
npm ERR! node_modules/typescript
npm ERR!   typescript@"^4.2.0" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peerOptional typescript@"^3.2.1" from react-scripts@3.4.1
npm ERR! node_modules/react-scripts
npm ERR!   react-scripts@"3.4.1" from the root project
npm ERR!
npm ERR! Conflicting peer dependency: typescript@3.9.10
npm ERR! node_modules/typescript
npm ERR!   peerOptional typescript@"^3.2.1" from react-scripts@3.4.1
npm ERR!   node_modules/react-scripts
npm ERR!     react-scripts@"3.4.1" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR!
npm ERR! For a full report see:
npm ERR! /Users/zblackwood/.npm/_logs/2023-04-11T14_40_28_942Z-eresolve-report.txt

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/zblackwood/.npm/_logs/2023-04-11T14_40_28_942Z-debug-0.log

After this change, npm install and npm run start run without errors

npm --version 
9.3.1

node --version
v19.5.0
sfc-gh-kbregula commented 1 year ago

I checked and it seems to me that this is not a complete solution, but a step in the right direction.

When I used node v18.15.0 (npm v9.5.0) I was able to install all packages from template directory.

But npm run start command fails with the error below

Starting the development server...

Error: error:0308010C:digital envelope routines::unsupported
    at new Hash (node:internal/crypto/hash:71:19)
    at Object.createHash (node:crypto:133:10)
    at module.exports (/Users/kbregula/Snowflake/streamlit/component-template/template/my_component/frontend/node_modules/webpack/lib/util/createHash.js:135:53)
    at NormalModule._initBuildHash (/Users/kbregula/Snowflake/streamlit/component-template/template/my_component/frontend/node_modules/webpack/lib/NormalModule.js:417:16)
    at handleParseError (/Users/kbregula/Snowflake/streamlit/component-template/template/my_component/frontend/node_modules/webpack/lib/NormalModule.js:471:10)
    at /Users/kbregula/Snowflake/streamlit/component-template/template/my_component/frontend/node_modules/webpack/lib/NormalModule.js:503:5
    at /Users/kbregula/Snowflake/streamlit/component-template/template/my_component/frontend/node_modules/webpack/lib/NormalModule.js:358:12
    at /Users/kbregula/Snowflake/streamlit/component-template/template/my_component/frontend/node_modules/loader-runner/lib/LoaderRunner.js:373:3
    at iterateNormalLoaders (/Users/kbregula/Snowflake/streamlit/component-template/template/my_component/frontend/node_modules/loader-runner/lib/LoaderRunner.js:214:10)
    at iterateNormalLoaders (/Users/kbregula/Snowflake/streamlit/component-template/template/my_component/frontend/node_modules/loader-runner/lib/LoaderRunner.js:221:10)
/Users/kbregula/Snowflake/streamlit/component-template/template/my_component/frontend/node_modules/react-scripts/scripts/start.js:19
  throw err;
  ^

Error: error:0308010C:digital envelope routines::unsupported
    at new Hash (node:internal/crypto/hash:71:19)
    at Object.createHash (node:crypto:133:10)
    at module.exports (/Users/kbregula/Snowflake/streamlit/component-template/template/my_component/frontend/node_modules/webpack/lib/util/createHash.js:135:53)
    at NormalModule._initBuildHash (/Users/kbregula/Snowflake/streamlit/component-template/template/my_component/frontend/node_modules/webpack/lib/NormalModule.js:417:16)
    at /Users/kbregula/Snowflake/streamlit/component-template/template/my_component/frontend/node_modules/webpack/lib/NormalModule.js:452:10
    at /Users/kbregula/Snowflake/streamlit/component-template/template/my_component/frontend/node_modules/webpack/lib/NormalModule.js:323:13
    at /Users/kbregula/Snowflake/streamlit/component-template/template/my_component/frontend/node_modules/loader-runner/lib/LoaderRunner.js:367:11
    at /Users/kbregula/Snowflake/streamlit/component-template/template/my_component/frontend/node_modules/loader-runner/lib/LoaderRunner.js:233:18
    at context.callback (/Users/kbregula/Snowflake/streamlit/component-template/template/my_component/frontend/node_modules/loader-runner/lib/LoaderRunner.js:111:13)
    at /Users/kbregula/Snowflake/streamlit/component-template/template/my_component/frontend/node_modules/babel-loader/lib/index.js:59:103 {
  opensslErrorStack: [ 'error:03000086:digital envelope routines::initialization error' ],
  library: 'digital envelope routines',
  reason: 'unsupported',
  code: 'ERR_OSSL_EVP_UNSUPPORTED'
}

Node.js v18.15.0

I also see that Typescript is not happy and modifies its configurations.

The following changes are being made to your tsconfig.json file:
  - compilerOptions.noFallthroughCasesInSwitch to be suggested value: true (this can be changed)
  - compilerOptions.jsx must be react-jsx (to support the new JSX transform in React 17)
$ diff --git a/template/my_component/frontend/tsconfig.json b/template/my_component/frontend/tsconfig.json
index af10394..e18c413 100644
--- a/template/my_component/frontend/tsconfig.json
+++ b/template/my_component/frontend/tsconfig.json
@@ -1,7 +1,11 @@
 {
   "compilerOptions": {
     "target": "es5",
-    "lib": ["dom", "dom.iterable", "esnext"],
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
     "allowJs": true,
     "skipLibCheck": true,
     "esModuleInterop": true,
@@ -13,7 +17,10 @@
     "resolveJsonModule": true,
     "isolatedModules": true,
     "noEmit": true,
-    "jsx": "react"
+    "jsx": "react-jsx",
+    "noFallthroughCasesInSwitch": true
   },
-  "include": ["src"]
+  "include": [
+    "src"
+  ]
 }

This may not be related to the react-script update, but I'm not sure.

I also tried running our second template (template-reactless) and it still doesn't work. This looks like the same problem but in a different directory.

$ (nvm use v18.15.0; cd template-reactless/my_component/frontend; npm install)

Now using node v18.15.0 (npm v9.5.0)
npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR!
npm ERR! While resolving: react-scripts@3.4.1
npm ERR! Found: typescript@4.9.5
npm ERR! node_modules/typescript
npm ERR!   typescript@"^4.2.0" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peerOptional typescript@"^3.2.1" from react-scripts@3.4.1
npm ERR! node_modules/react-scripts
npm ERR!   react-scripts@"3.4.1" from the root project
npm ERR!
npm ERR! Conflicting peer dependency: typescript@3.9.10
npm ERR! node_modules/typescript
npm ERR!   peerOptional typescript@"^3.2.1" from react-scripts@3.4.1
npm ERR!   node_modules/react-scripts
npm ERR!     react-scripts@"3.4.1" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR!
npm ERR! For a full report see:
npm ERR! /Users/kbregula/.npm/_logs/2023-04-26T10_56_10_835Z-eresolve-report.txt

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/kbregula/.npm/_logs/2023-04-26T10_56_10_835Z-debug-0.log

I am also not sure if this PR solves all the tickets you mentioned in the description of the PR. For example, https://github.com/streamlit/component-template/issues/30 is a typescript configuration problem. I think, we should update apache-arrow library in streamlit-component-lib package, as the workaround we added(a declaration directory) to use apache-arrow 0.17.0 is not compatible with the new version of Typescript.

I too would like to let you know that the Warsaw team has it on the radar. I described these problems and proposed solutions in the document: 🐈‍⬛ Component development issues We wanted to tackle this at the beginning of the next quarter, and for now, focus on the goals of this quarter.

CC: @sfc-gh-mnowotka

sfc-gh-kbregula commented 1 year ago

I'm also wondering if we shouldn't also update the examples to use the newer version of react-scripts package. https://github.com/streamlit/component-template/blob/master/examples/CustomDataframe/frontend/package.json

tconkling commented 1 year ago

@sfc-gh-kbregula - thanks for looking about this more thoroughly. I'll let you guys handle the merging; feel free to close this PR if you'd rather wait to address all the issues!

sfc-gh-kbregula commented 1 year ago

@tconkling I updated the PR. Now we have CI setup and in addition to templates, examples also work. Can I ask for review?