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

blackary · 2023-04-11T14:43:06Z

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 · 2023-04-26T11:25:07Z

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, #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 · 2023-04-26T11:27:07Z

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

This works for me as well. Huzzah - thanks @blackary!

tconkling · 2023-04-26T18:01:02Z

@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 · 2023-05-09T17:02:38Z

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

tconkling

Looks great, thanks for taking this on!

tconkling · 2023-05-09T17:44:18Z

dev.py

+from pathlib import Path
+import json
+import sys
+


Can you add a short docstring explaining the purpose of this script? Is it something we expect users to use, or is it just for Streamlit devs? (Should we include info about it in the repo's README?)

Thanks. Added.

tconkling

Looks great, thanks for taking this on!

sfc-gh-zblackwood · 2023-05-15T18:18:44Z

dev.py

+
+To list the available commands, run ./dev.py --help.
+"""
+import argparse


FYI, if you're looking for other make alternatives, I really like https://taskfile.dev/

Bumped react-script, seems to fix arrow issues

51eacac

blackary requested review from tconkling and AnOctopus April 11, 2023 14:43

blackary changed the title ~~Bumped react-script, seems to fix arrow issues~~ Bumped react-script, seems to fix install and run issues Apr 11, 2023

sfc-gh-kbregula self-requested a review April 26, 2023 08:47

tconkling approved these changes Apr 26, 2023

View reviewed changes

Fix template-reactless project

f71ef51

sfc-gh-kbregula force-pushed the bump-react-scripts branch from 76d6be0 to d4e50f3 Compare April 26, 2023 18:56

sfc-gh-kbregula force-pushed the bump-react-scripts branch 5 times, most recently from 96b718f to 51661f5 Compare May 9, 2023 15:43

sfc-gh-kbregula added 7 commits May 9, 2023 17:47

Add basic CI setup for templates

0c00db1

Add basic CI setup for examples

8f14b13

Check depedencies of examples

fa788c4

Fix custom dataframe example

cf1d428

Fix material login example

aa72e7f

Fix radio button example

23140d1

Fix selectable data table example

a7820f1

sfc-gh-kbregula force-pushed the bump-react-scripts branch from 51661f5 to a7820f1 Compare May 9, 2023 15:48

sfc-gh-kbregula requested a review from tconkling May 9, 2023 17:18

tconkling approved these changes May 9, 2023

View reviewed changes

sfc-gh-kbregula added 2 commits May 9, 2023 20:43

fixup! Fix selectable data table example

d77f28d

Add docstring in dev.py script + update README.md

1d1586c

sfc-gh-kbregula added 3 commits May 9, 2023 21:36

Python 2.7 is not longed needed

c3d30d6

fixup! fixup! Fix selectable data table example

4bd8bca

fixup! Fix custom dataframe example

590d6ed

sfc-gh-kbregula merged commit 2a81337 into master May 10, 2023
6 checks passed

sfc-gh-zblackwood reviewed May 15, 2023

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

blackary commented Apr 11, 2023

sfc-gh-kbregula commented Apr 26, 2023

sfc-gh-kbregula commented Apr 26, 2023

tconkling left a comment

tconkling commented Apr 26, 2023 •

edited

Loading

sfc-gh-kbregula commented May 9, 2023 •

edited

Loading

tconkling left a comment

tconkling May 9, 2023

sfc-gh-kbregula May 9, 2023

tconkling left a comment

sfc-gh-zblackwood May 15, 2023

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

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

Conversation

blackary commented Apr 11, 2023

sfc-gh-kbregula commented Apr 26, 2023

sfc-gh-kbregula commented Apr 26, 2023

tconkling left a comment

Choose a reason for hiding this comment

tconkling commented Apr 26, 2023 • edited Loading

sfc-gh-kbregula commented May 9, 2023 • edited Loading

tconkling left a comment

Choose a reason for hiding this comment

tconkling May 9, 2023

Choose a reason for hiding this comment

sfc-gh-kbregula May 9, 2023

Choose a reason for hiding this comment

tconkling left a comment

Choose a reason for hiding this comment

sfc-gh-zblackwood May 15, 2023

Choose a reason for hiding this comment

tconkling commented Apr 26, 2023 •

edited

Loading

sfc-gh-kbregula commented May 9, 2023 •

edited

Loading