Has anyone attempted to add reactivated to a pre-existing django 3.2 project? #194

devo-wm · 2022-07-19T13:05:56Z

devo-wm
Jul 19, 2022

Currently trying to do so now... :). Wondering if there's a reason it should be a non starter.

I've walked though all the preexisting project steps (made some slight adjustments so that I could use yarn 3 instead), which got me part ways there.

Then I ran ./manage.py generate_client_assets and fixed the urls in my app as mention in this previous discussion.

No I'm running into the ~~client side~~ sever error Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Normally very easy for me to debug on the client side but I'm not sure how to debug the js via the console.

Here's my file structure atm.
📦projectname
.......
┣ 📂.yarn
┃ ┣ 📂cache
┃ .........
┃ ┣ 📂releases
┃ ┃ ┗ 📜yarn-3.2.1.cjs
┃ ┣ 📂unplugged
┃ .........
┃ ┗ 📜install-state.gz
┣ appname
.......
┃ ┣ 📂forms
.................
............
┃ ┣ 📂templates
.........
┃ ┣ 📂views
.............
┃ ┃ ┣ 📜fixedpages.py // here's whey my custom view is
.........
...........
┃ ┣ 📜react_templates.py // named react_templates so as not to conflict with pre-existing templates folder
|
┣ 📂client
┃ ┣ 📂components
┃ ┃ ┗ 📜Layout.tsx
┃ ┣ 📂templates
┃ ┃ ┗ 📜MyTemplate.tsx
┃ ┗ 📜index.tsx
┣ 📜.babelrc.json
┣ 📜.editorconfig
┣ 📜.gitignore
┣ 📜.yarnrc.yml

┣ 📜manage.py
┣ 📜package.json

┗ 📜yarn.lock

Answered by devo-wm

Sep 14, 2022

@silviogutierrez Finally working on this again.

Decided to just use npm. Updated both packages in pip (0.27.1) and npm (0.27.2) respectively.

re-ran

./manage.py generate_client_assets                              
[14/Sep/2022 18:59:56,677] Generating interfaces and client side code
[14/Sep/2022 18:59:57,638] Finished generating.

When I hit my reactivated view I still see:

Starting development server at http://127.0.0.1:8000/
Quit the server with CONTROL-C.
node:internal/modules/cjs/loader:936
  throw err;
  ^

Error: Cannot find module '/Users/wml/Projects/trainingcamp-django/trainingcamp/node_modules/_reactivated/renderer.js'
    at Function.Module._resolveFilename (node:internal/modul…

View full answer

silviogutierrez · 2022-07-19T17:44:21Z

silviogutierrez
Jul 19, 2022
Maintainer

Hi there,

Thanks for the information. Is the view properly rendering server side, then failing to hydrate on the client?

It's hard to tell what's happening, but I feel like it could be related to Yarn 3 and its special module loading powers.

Note that based on #138, we'll actually be moving away from Yarn and back to NPM.

Let me know. I don't think Django 3.2 should make a difference though.

2 replies

devo-wm Jul 20, 2022
Author

Thanks for the response @silviogutierrez!

I may have misspoke above - the error described above is not a "client" side error. It's actually coming from the server but it's describing what looks like a typical react error - so it's actually failing to render on the server side.

There are a couple of configurations settings one can add to the .yarnrc.yml to ensure the modules load in a classic way namely

nmMode: "classic"
nodeLinker: "node-modules"

I'll fiddle w/ those settings and try again; if that fails I'll install again using npm and report back!

Thanks again! Wish we new about this project before we were a couple years into our project - those install scripts would be handy!

silviogutierrez Jul 20, 2022
Maintainer

So the requires/imports/rendering on the server is very complicated. I'm actually working on a refactor now that may help, but I'm not too sure.

One thing that you could try: set up a project using the nix install method, and slowly try to manipulate the layout/files into your setup. Checking in at what point it breaks, etc.

devo-wm · 2022-09-14T19:14:15Z

devo-wm
Sep 14, 2022
Author

@silviogutierrez Finally working on this again.

Decided to just use npm. Updated both packages in pip (0.27.1) and npm (0.27.2) respectively.

re-ran

./manage.py generate_client_assets                              
[14/Sep/2022 18:59:56,677] Generating interfaces and client side code
[14/Sep/2022 18:59:57,638] Finished generating.

When I hit my reactivated view I still see:

Starting development server at http://127.0.0.1:8000/
Quit the server with CONTROL-C.
node:internal/modules/cjs/loader:936
  throw err;
  ^

Error: Cannot find module '/Users/wml/Projects/trainingcamp-django/trainingcamp/node_modules/_reactivated/renderer.js'
    at Function.Module._resolveFilename (node:internal/modules/cjs/loader:933:15)
    at Function.Module._load (node:internal/modules/cjs/loader:778:27)
    at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:77:12)
    at node:internal/main/run_main_module:17:47 {
  code: 'MODULE_NOT_FOUND',
  requireStack: []
}

When I look at the folder in node_modules I only see

5 replies

silviogutierrez Sep 14, 2022
Maintainer

Can you try running npm exec -- build.renderer.js in the root and see what the output is?

devo-wm Sep 15, 2022
Author

➜  git:(reactivated) ✗  npm exec -- build.renderer.js
 > client/templates/MyTemplate.tsx:2:23: error: Could not resolve "@client/components/Layout" (mark it as external to exclude it from the bundle)
    2 │ import { Layout } from "@client/components/Layout";
      ╵                        ~~~~~~~~~~~~~~~~~~~~~~~~~~~

devo-wm Sep 15, 2022
Author

Thanks for being so generous with you time and help!

update:

Made a few changes and have some new output!
Missed this note from your docs:

Make sure the versions of these packages always match. They are published at the same time.
So I reinstalled the npm package to 0.27.1.

Then changed @client/components/Layout to `../client/components/Layout/' to discover an obvious unexpected end of file error. Once I resolved that (what I get for ignoring my linter!).

Now when I run npm exec -- build.renderer.js

 > client/templates/MyTemplate.tsx:2:23: error: [plugin: linaria] Cannot find module 'reactivated/babel.config.js'
Require stack:
- /Users/wml/Projects/trainingcamp-django/trainingcamp/node_modules/@babel/core/lib/config/files/configuration.js
- /Users/wml/Projects/trainingcamp-django/trainingcamp/node_modules/@babel/core/lib/config/files/index.js
- /Users/wml/Projects/trainingcamp-django/trainingcamp/node_modules/@babel/core/lib/index.js
- /Users/wml/Projects/trainingcamp-django/trainingcamp/node_modules/@linaria/babel-preset/lib/evaluators/visitors/JSXElement.js
- /Users/wml/Projects/trainingcamp-django/trainingcamp/node_modules/@linaria/babel-preset/lib/index.js
- /Users/wml/Projects/trainingcamp-django/trainingcamp/node_modules/@linaria/esbuild/lib/index.js
- /Users/wml/Projects/trainingcamp-django/trainingcamp/node_modules/reactivated/dist/build.renderer.js
     2 │ import { Layout } from "../components/Layout";
       ╵                        ~~~~~~~~~~~~~~~~~~~~~~
   node_modules/@linaria/esbuild/lib/index.js:55:12: note: This error came from the "onLoad" callback registered here
    55 │       build.onLoad({
       ╵             ~~~~~~
    at setup (/Users/wml/Projects/trainingcamp-django/trainingcamp/node_modules/@linaria/esbuild/lib/index.js:55:13)
    at handlePlugins (/Users/wml/Projects/trainingcamp-django/trainingcamp/node_modules/esbuild/lib/main.js:738:23)
    at Object.buildOrServe (/Users/wml/Projects/trainingcamp-django/trainingcamp/node_modules/esbuild/lib/main.js:1026:7)
    at /Users/wml/Projects/trainingcamp-django/trainingcamp/node_modules/esbuild/lib/main.js:1801:17
    at new Promise (<anonymous>)
    at Object.build (/Users/wml/Projects/trainingcamp-django/trainingcamp/node_modules/esbuild/lib/main.js:1800:14)
    at Object.build (/Users/wml/Projects/trainingcamp-django/trainingcamp/node_modules/esbuild/lib/main.js:1655:51)
    at Object.<anonymous> (/Users/wml/Projects/trainingcamp-django/trainingcamp/node_modules/reactivated/dist/build.renderer.js:39:6)
    at Module._compile (node:internal/modules/cjs/loader:1105:14)

update ii.

changed the babelrc to {"extends": "reactivated/dist/babel.config.js"} and made more progress!

(venv) ➜  git:(reactivated) ✗ npm exec -- build.renderer.js
RENDERER:node_modules/_reactivated/reactivated.sock:LISTENINGRENDERER:node_modules/_reactivated/reactivated.sock:LISTENING

update iii.

working! (I think)

So it looks like so long as I have npm exec -- build.renderer.js running in one terminal and ./manage.py run server in another I can update and render my react templates at their designated urls. Belissimo!

After all this I will certainly look into convincing my team to use nix!

Few final questions and observations:

The docs say all I should need to do is run ./manage.py runserver. Is it absolutely necessary to run npm exec -- build.renderer.js at least during development?
Is it necessary to run ./manage generate_client_assets before doing 1 above? Or just during deployment?
I couldn't use @client but looking at the reactivated/dist/babel.config.js, it looks as if it has been aliased properly.
Any tips on setting up vs code linting properly here's what I'm seeing currently

silviogutierrez Sep 15, 2022
Maintainer

So I think this is mostly related to #211 . I need to clarify in the docs that tsconfig.json needs to be added. Take a look at the tsconfig in the development folder, as that is the one that would be copied for in the sample folder.

Same goes for the .babelrc.json. That is documented but needs to be updated to reflect the move from {"extends": "reactivated/babel.config.js"} to {"extends": "reactivated/dist/babel.config.js"}.

I think if you ad those two files, things should "work."

Answers to your questions:

No, you don't need to run this. It's to get manual output and debug. Runserver does it for you, but hides the output if there's a build issue. Which means renderer.js is never created, and why you got the initial error.
Same as above, done for you on every code reload and cached (poorly right now, will improve). Only needed during deployment.
Fixed with tsconfig.
Same as above.

If you're up for it, feel free to open a PR against https://github.com/silviogutierrez/reactivated/blob/main/website/server/docs/existing-projects.md and:

Add the tsconfig section
Fix the babelrc path

Hope that helps.

devo-wm Sep 16, 2022
Author

Life saver; brilliant!
Opened up a PR here for the docs: https://github.com/silviogutierrez/reactivated/pull/220/files

devo-wm · 2022-09-16T12:01:51Z

devo-wm
Sep 16, 2022
Author

@silviogutierrez

The last and final issue I'm seeing in the console (but definitely not blocking template rendering, for now). Happy to file an issue and help debug if ya need!

 ./manage.py runserver
[16/Sep/2022 11:59:15,517] Generating interfaces and client side code
[16/Sep/2022 11:59:15,518] Skipping generation as nothing has changed
[11:59:15 AM] Starting compilation in watch mode...

node_modules/_reactivated/index.tsx:9690:40 - error TS2339: Property 'models' does not exist on type '{ Widget: DjangoFormsWidgetsHiddenInput | DjangoFormsWidgetsTextInput | DjangoFormsWidgetsNumberInput | ... 11 more ... | DjangoFormsWidgetsSplitDateTimeWidget; }'.

9690 export type models = _Types["globals"]["models"];
                                            ~~~~~~~~

[11:59:16 AM] Found 1 error. Watching for file changes.

3 replies

silviogutierrez Oct 4, 2022
Maintainer

That's odd, is the Python reactivated matching the npm reactivated?

Models is a new attribute added to global, initialized in registry.py:

global_types: Dict[str, Any] = {
    "Widget": DefaultWidgetType,
    "models": DefaultModelsType,
}

Can you output python manage.py print_schema

devo-wm Dec 9, 2022
Author

Sorry for the delay!!

Only just circling back to this. Updated to the latest reactivated packages and voila - it all worked!

Excited to get back to implementing this for one of our features to give it a test run

silviogutierrez Dec 9, 2022
Maintainer

Great, keep me posted.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Has anyone attempted to add reactivated to a pre-existing django 3.2 project? #194

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Replies: 3 comments 10 replies

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

Select a reply

Has anyone attempted to add reactivated to a pre-existing django 3.2 project? #194

devo-wm Jul 19, 2022

Replies: 3 comments · 10 replies

silviogutierrez Jul 19, 2022 Maintainer

devo-wm Jul 20, 2022 Author

silviogutierrez Jul 20, 2022 Maintainer

devo-wm Sep 14, 2022 Author

silviogutierrez Sep 14, 2022 Maintainer

devo-wm Sep 15, 2022 Author

devo-wm Sep 15, 2022 Author

update:

update ii.

update iii.

silviogutierrez Sep 15, 2022 Maintainer

devo-wm Sep 16, 2022 Author

devo-wm Sep 16, 2022 Author

silviogutierrez Oct 4, 2022 Maintainer

devo-wm Dec 9, 2022 Author

silviogutierrez Dec 9, 2022 Maintainer

devo-wm
Jul 19, 2022

Replies: 3 comments 10 replies

silviogutierrez
Jul 19, 2022
Maintainer

devo-wm Jul 20, 2022
Author

silviogutierrez Jul 20, 2022
Maintainer

devo-wm
Sep 14, 2022
Author

silviogutierrez Sep 14, 2022
Maintainer

devo-wm Sep 15, 2022
Author

devo-wm Sep 15, 2022
Author

silviogutierrez Sep 15, 2022
Maintainer

devo-wm Sep 16, 2022
Author

devo-wm
Sep 16, 2022
Author

silviogutierrez Oct 4, 2022
Maintainer

devo-wm Dec 9, 2022
Author

silviogutierrez Dec 9, 2022
Maintainer