🐞 Tutorial glitches - Githubissues

MattStammers commented 1 year ago

Is there an existing issue for this?

[X] I have searched the existing issues

Current Behavior

After learning about this from the NHS Python track at the R conference I thought I would try it out. I have followed the tutorial to the letter on atri first app tutorial and I cannot get it to work aside from minor issues like the publish button changing to build&run.

I have tried it with Python 3.9 and 3.11 using both condas and pipenv. The closest I can get it to work is with minicondas python 3.9 running atri==0.0.83 (latest non-prerelease) but I get the following error on localhost:4005 when I add the chart and try to publish:

TypeError: Cannot read properties of undefined (reading 'fontFamily') at eval (webpack://getAppText/./node_modules/@atrilabs/react-component-manifests/src/manifests/charts/BarChart/BarChart.tsx?:90:34) at renderWithHooks (webpack://getAppText/./node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js?:5461:16) at renderForwardRef (webpack://getAppText/./node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js?:5645:18) at renderElement (webpack://getAppText/./node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js?:5808:11) at renderNodeDestructive (webpack://getAppText/./node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js?:5888:11) at renderNode (webpack://getAppText/./node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js?:6022:12) at renderChildrenArray (webpack://getAppText/./node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js?:5978:7) at renderNodeDestructive (webpack://getAppText/./node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js?:5910:7) at renderElement (webpack://getAppText/./node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js?:5774:9) at renderNodeDestructive (webpack://getAppText/./node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js?:5888:11)

Error message

In the debug console I get:

`Connecting to ipc server... App is running... [file-server] listening on http://0.0.0.0:4002 [manifest_server] listening on http://:::4003 [ipc_server] listening on http://:::4006 [websocket_server] projectId 42da75f4-d770-4240-96ac-c8ae6df630e1 [publish_app_server] listening on http://:::4004 [websocket_server] listening on http://:::4001 [publish_app_server] connected to ipc server [ipc_server] client registered: publish-server [publish_app_server] registered to ipc server

Success! Visit http://localhost:4002 to access the editor. Connection to ipc server failed! Connected to ipc server! [ipc_server] client registered: atri-cli Registered as atri-cli with ipc server. [PUBLISH_SERVER] Socket connected YqxBf4Z2ocG1p6DkAAAB [websocket_server] auth projectId 42da75f4-d770-4240-96ac-c8ae6df630e1 [ipc_server] client registered: browser [PUBLISH_SERVER]runTasks received [publish_app_server] generate app called 0.0.83 Error: Cannot find module '@atrilabs/app-scripts/package.json' Require stack:

C:\snapshot\webapp-builder\node_modules\@atrilabs\app-generator\lib\utils.js
C:\snapshot\webapp-builder\node_modules\@atrilabs\app-generator\lib\react-app-template-manager\index.js
C:\snapshot\webapp-builder\node_modules\@atrilabs\app-generator\lib\getReactTemplateManager.js
C:\snapshot\webapp-builder\node_modules\@atrilabs\app-generator\lib\build-scripts\react-app\index.js
C:\snapshot\webapp-builder\node_modules\@atrilabs\app-generator\lib\index.js
C:\snapshot\webapp-builder\node_modules\@atrilabs\scripts\build\shared\runTargetTask.js
C:\snapshot\webapp-builder\node_modules\@atrilabs\scripts\build\tasks\run-target\index.js at Function.Module._resolveFilename (node:internal/modules/cjs/loader:933:15) at Function._resolveFilename (pkg/prelude/bootstrap.js:1955:46) at Function.resolve (node:internal/modules/cjs/helpers:108:19) at getPackageVersion (C:\snapshot\webapp-builder\node_modules\@atrilabs\app-generator\lib\utils.js:131:31) at C:\snapshot\webapp-builder\node_modules\@atrilabs\app-generator\lib\gen-script\index.js:308:69 at Array.forEach () at Object. (C:\snapshot\webapp-builder\node_modules\@atrilabs\app-generator\lib\gen-script\index.js:307:30) at step (C:\snapshot\webapp-builder\node_modules\@atrilabs\app-generator\lib\gen-script\index.js:67:23) at Object.next (C:\snapshot\webapp-builder\node_modules\@atrilabs\app-generator\lib\gen-script\index.js:48:53) at fulfilled (C:\snapshot\webapp-builder\node_modules\@atrilabs\app-generator\lib\gen-script\index.js:39:58) { code: 'MODULE_NOT_FOUND', requireStack: [ 'C:\snapshot\webapp-builder\node_modules\@atrilabs\app-generator\lib\utils.js', 'C:\snapshot\webapp-builder\node_modules\@atrilabs\app-generator\lib\react-app-template-manager\index.js', 'C:\snapshot\webapp-builder\node_modules\@atrilabs\app-generator\lib\getReactTemplateManager.js', 'C:\snapshot\webapp-builder\node_modules\@atrilabs\app-generator\lib\build-scripts\react-app\index.js', 'C:\snapshot\webapp-builder\node_modules\@atrilabs\app-generator\lib\index.js', 'C:\snapshot\webapp-builder\node_modules\@atrilabs\scripts\build\shared\runTargetTask.js', 'C:\snapshot\webapp-builder\node_modules\@atrilabs\scripts\build\tasks\run-target\index.js' ] } [server-utils] generateApp received code 0 task queue callback called for task generate success [publish_app_server] emitting buildPython doBuildPython called python build success doComputeInitialState called

CommandNotFoundError: No command 'conda run'.

[publish_app_server]failed to parse response from computeInitialState found no props for pageId home using app info task queue callback called for task build success task queue callback called for task deploy success doStartPythonServer called

CommandNotFoundError: No command 'conda run'.

failed to start python server [devServer] [HPM] Proxy created: / -> http://0.0.0.0:4007

[devServer] [ATRI_SERVER] listening on http://:::4005

[devServer] request received / /

[devServer] Error Warning: useLayoutEffect does nothing on the server, because its effect cannot be encoded into the server renderer's output format. This will lead to a mismatch between the initial, non-hydrated UI and the intended UI. To avoid this, useLayoutEffect should only be used in components that render exclusively on the client. See https://reactjs.org/link/uselayouteffect-ssr for common fixes. at Home (webpack://getAppText/./app/src/pages/Home.jsx?:34:80) at RenderedRoute (webpack://getAppText/./node_modules/react-router/dist/index.js?:709:5) at Routes (webpack://getAppText/./node_modules/react-router/dist/index.js?:1156:5) at App at Router (webpack://getAppText/./node_modules/react-router/dist/index.js?:1088:15) at StaticRouter (webpack://getAppText/./node_modules/react-router-dom/server.mjs?:19:3)

[devServer] Error TypeError: Cannot read properties of undefined (reading 'fontFamily') at eval (webpack://getAppText/./node_modules/@atrilabs/react-component-manifests/src/manifests/charts/BarChart/BarChart.tsx?:90:34)
at renderWithHooks (webpack://getAppText/./node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js?:5461:16) at renderForwardRef (webpack://getAppText/./node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js?:5645:18) at renderElement (webpack://getAppText/./node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js?:5808:11) at renderNodeDestructive (webpack://getAppText/./node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js?:5888:11) at renderElement (webpack://getAppText/./node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js?:5774:9) at renderNodeDestructive (webpack://getAppText/./node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js?:5888:11) at renderIndeterminateComponent (webpack://getAppText/./node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js?:5588:7)
at renderElement (webpack://getAppText/./node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js?:5749:7) at renderNodeDestructive (webpack://getAppText/./node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js?:5888:11)

[dev] build-app-watch-run called

[dev] build-server-watch-run called

[dev] build-server-done called

[dev] assets by status 4.63 KiB [cached] 2 assets assets by status 4.37 MiB [compared for emit] asset static/js/app.bundle.js 4.25 MiB [compared for emit] (name: app) asset static/js/serverSide.bundle.js 119 KiB [compared for emit] (name: serverSide) Entrypoint app 4.26 MiB (630 bytes) = static/css/app.c7973dfa.css 4.02 KiB static/js/app.bundle.js 4.25 MiB 1 auxiliary asset Entrypoint serverSide 119 KiB = static/js/serverSide.bundle.js orphan modules 434 KiB (javascript) 937 bytes (runtime) [orphan] 180 modules runtime modules 5.5 KiB 26 modules modules by path ./node_modules/ 3.49 MiB (javascript) 671 bytes (css/mini-extract) javascript modules 3.49 MiB 518 modules css modules 671 bytes css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[0].oneOf[3].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[0].oneOf[3].use[2]!./node_modules/@atrilabs/react-component-manifests/src/manifests/styles.css 0 bytes [built] [code generated]

2 modules modules by path ./app/src/ 14.3 KiB (javascript) 52 bytes (css/mini-extract) javascript modules 14.3 KiB 13 modules css modules 52 bytes css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[0].oneOf[3].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[0].oneOf[3].use[2]!./app/src/styles.css 33 bytes [built] [code generated] css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[0].oneOf[3].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[0].oneOf[3].use[2]!./app/src/page-css/Home.css 19 bytes [built] [code generated] ./app-node/src/getAppText.tsx 1.4 KiB [built] [code generated] external "stream" 42 bytes [built] [code generated] ./atri-app-info.json 26 bytes [built] [code generated] webpack 5.75.0 compiled successfully in 14450 ms

[dev] build-app-done called

[dev] assets by status 4.63 KiB [cached] 2 assets assets by status 4.3 MiB [compared for emit] asset static/js/app.bundle.js 4.3 MiB [compared for emit] (name: app) asset static/js/wsclient.bundle.js 1.88 KiB [compared for emit] (name: wsclient) asset index.html 498 bytes [compared for emit] Entrypoint app 4.3 MiB (630 bytes) = static/css/app.c7973dfa.css 4.02 KiB static/js/app.bundle.js 4.3 MiB 1 auxiliary asset Entrypoint wsclient 1.88 KiB = static/js/wsclient.bundle.js orphan modules 404 KiB (javascript) 937 bytes (runtime) [orphan] 179 modules runtime modules 4.94 KiB 23 modules modules by path ./node_modules/ 3.52 MiB (javascript) 671 bytes (css/mini-extract) javascript modules 3.52 MiB 520 modules css modules 671 bytes css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[0].oneOf[3].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[0].oneOf[3].use[2]!./node_modules/@atrilabs/react-component-manifests/src/manifests/styles.css 0 bytes [built] [code generated] css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[0].oneOf[4].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[0].oneOf[4].use[2]!./node_modules/@atrilabs/design-system/lib/stylesheets/form-field.module.css 196 bytes [built] [code generated] css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[0].oneOf[4].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[0].oneOf[4].use[2]!./node_modules/@atrilabs/design-system/lib/stylesheets/button.module.css 475 bytes [built] [code generated] modules by path ./app/src/ 15.3 KiB (javascript) 52 bytes (css/mini-extract) javascript modules 15.3 KiB 14 modules css modules 52 bytes css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[0].oneOf[3].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[0].oneOf[3].use[2]!./app/src/styles.css 33 bytes [built] [code generated] css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[0].oneOf[3].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[0].oneOf[3].use[2]!./app/src/page-css/Home.css 19 bytes [built] [code generated] ./atri-app-info.json 26 bytes [built] [code generated] webpack 5.75.0 compiled successfully in 15105 ms

[devServer] request received /reload-all-dev-sockets /reload-all-dev-sockets

[devServer] received request to reload all sockets `

Screenshots

No response

Expected Behavior

I expected at least the tutorial to work. You need to fix this because it will really put people off using the framework.

System configuration

1. OS: Windows
2. Bits: 64
3. Browser: chrome and edge
4. Atri framework version: 0.0.83 (84 definitely doesn't work)
5. Virtual environment: Minicondas - Python 3.9

Steps To Reproduce

call conda create -y -n my_env python Python = 3.9
call conda activate myenv
call pip install atri==0.0.83
call atri start

Anything else?

I really want you guys to succeed because I think you are doing something genuinely useful. That is why I am reporting this.

welcome[bot] commented 1 year ago

Hello there! Welcome to the project! 💖

Thank you for opening your very first issue here. Hope you have a great time here!😄

Besides, don’t forget to ⭐ the repository, if you haven’t already!

cruxcode commented 1 year ago

Hi @MattStammers, thank you for taking the time to report this issue. We have noticed that a few components like tables and some charts are breaking in version >=0.0.81 because of a major upgrade we did. A better version for your use case would be 0.0.78. Please change the version:

pipenv install atri==0.0.78

Once you have installed the new version, please start the atri server again from inside your project directory:

pipenv shell
atri start

Once started, please click on Build & Run again. You might get the old error for a few seconds, please refresh the page.

Python 3.11 has some problem in the asyncio package, so please use >=3.7 and <=3.10.

We are sorry for the inconvenience but we will soon improve and meet our user's expectations. Thanks for showing support and it means a lot to us.

cruxcode commented 1 year ago

@jonathanalvares9009 I guess you forgot to remove props.styles.fontFamily from BarChart. Since fontFamily is automatically inherited from a parent, we don't need to assign it explicitly for XAxis, Legend etc. Can you please fix this issue? Also, make sure we don't have this same issue in any other chart.

jonathanalvares9009 commented 1 year ago

@cruxcode sure will make sure this is fixed

Atri-Labs / atrilabs-engine

🐞 Tutorial glitches #557