Title: Modern Front-End Development for Rails, Second Edition:
Chapter 3, Stimulus: Enabling Debug (page 46)
It would be beneficial to note that once you change the value “application.debug = true”, you will need to restart the server to see the additional output
Chapter 4 (page 78)
Instead of:
We start with Array.from(Array(props.seatsPerRow)) , an obscure JavaScript idiom which turns the number 5 into the array [0, 1, 2, 3, 4] —it’s the closest we can get to a Ruby range object without writing some helper functions
Don’t you mean:
We start with Array.from(Array(props.seatsPerRow).keys()) , an obscure JavaScript idiom which turns the number 5 into the array [0, 1, 2, 3, 4] —it’s the closest we can get to a Ruby range object without writing some helper functions
I don’t know where in the book, but I started getting the following error messages when starting the server with bin/dev.
Error messages:
19:11:19 js.1 | node_modules/@types/react/index.d.ts(3127,14): error TS2300: Duplicate identifier ‘LibraryManagedAttributes’.
19:11:19 js.1 | node_modules/@types/styled-components/node_modules/@types/react/index.d.ts(3121,14): error TS2300: Duplicate identifier ‘LibraryManagedAttributes’.
19:11:19 js.1 | node_modules/@types/styled-components/node_modules/@types/react/index.d.ts(3160,13): error TS2717: Subsequent property declarations must have the same type. Property ‘dialog’ must be of type ‘DetailedHTMLProps<DialogHTMLAttributes, HTMLDialogElement>’, but here has type ‘DetailedHTMLProps<DialogHTMLAttributes, HTMLDialogElement>’.
19:11:19 js.1 | node_modules/@types/styled-components/node_modules/@types/react/index.d.ts(3192,13): error TS2717: Subsequent property declarations must have the same type. Property ‘link’ must be of type ‘DetailedHTMLProps<LinkHTMLAttributes, HTMLLinkElement>’, but here has type ‘DetailedHTMLProps<LinkHTMLAttributes, HTMLLinkElement>’.
Solution:
Both of those points are correct, and thanks, I can get them into the next beta.
I’m not sure what to do about the LibraryManagedAttributes error — I suspect something weird happened on one of the directory to directory changes. I’ll see if I can track something down. (In general, I’ve always found node to get into states where it needs to be reset for weird reasons).
Thanks very much for pointing these out.
Noel
Just downloaded the latest version of the sample code and unfortunately the application no longer works for me, even after I remove and re-install @types/react.
Admittedly, I haven’t spent any time to try and determine a root cause. I had (naively?) expected things to work “out of the box”.
The following is from chapter_05/07. I am running on a Ubuntu system, with the latest OS version.
16:05:45 web.1 | Rendered layout layouts/application.html.erb (Duration: 1247.0ms | Allocations: 1038559)
16:05:45 web.1 | Completed 500 Internal Server Error in 1346ms (ActiveRecord: 73.3ms | Allocations: 1079224)
16:05:45 web.1 |
16:05:45 web.1 |
16:05:45 web.1 |
16:05:45 web.1 | ActionView::Template::Error (The asset ‘application.js’ was not found in the load path.):
16:05:45 web.1 | 11: “tailwind”,
16:05:45 web.1 | 12: “data-turbo-track”:
16:05:45 web.1 | 13: “reload”) %>
16:05:45 web.1 | 14: <%= javascript_include_tag(
16:05:45 web.1 | 15: “application”,
16:05:45 web.1 | 16: “data-turbo-track”: “reload”,
16:05:45 web.1 | 17: defer: true) %>
16:05:45 web.1 |
16:05:45 web.1 | app/views/layouts/application.html.erb:14
16:05:46 js.1 | node_modules/@types/react/index.d.ts(3127,14): error TS2300: Duplicate identifier ‘LibraryManagedAttributes’.
16:05:46 js.1 | node_modules/@types/styled-components/node_modules/@types/react/index.d.ts(3121,14): error TS2300: Duplicate identifier ‘LibraryManagedAttributes’.
16:05:46 js.1 | node_modules/@types/styled-components/node_modules/@types/react/index.d.ts(3160,13): error TS2717: Subsequent property declarations must have the same type. Property ‘dialog’ must be of type ‘DetailedHTMLProps<DialogHTMLAttributes, HTMLDialogElement>’, but here has type ‘DetailedHTMLProps<DialogHTMLAttributes, HTMLDialogElement>’.
16:05:46 js.1 | node_modules/@types/styled-components/node_modules/@types/react/index.d.ts(3192,13): error TS2717: Subsequent property declarations must have the same type. Property ‘link’ must be of type ‘DetailedHTMLProps<LinkHTMLAttributes, HTMLLinkElement>’, but here has type ‘DetailedHTMLProps<LinkHTMLAttributes, HTMLLinkElement>’.
16:05:46 js.1 |
16:05:46 js.1 | 4:05:46 PM - Found 4 errors. Watching for file changes.
16:05:46 js.1 | $ rm ./app/assets/builds/application.js && rm ./app/assets/builds/application.js.map
16:05:46 js.1 | rm: cannot remove ‘./app/assets/builds/application.js’: No such file or directory
Because bin/devdoesn’t work out of the box, I have a little script that I run to set things up:
yarn add --dev typescript tsc-watch
yarn add --dev @typescript-eslint/parser
yarn add --dev @typescript-eslint/eslint-plugin
yarn add react react-dom @babel/preset-react @types/react @types/react-dom
yarn add --dev eslint-plugin-react
yarn add animate.css
yarn add styled-components
yarn add @types/styled-components
yarn remove @types/react-dom @types/react
yarn add -D @types/react-dom @types/react
This, however, doesn’t help.
I will try again when I have more time to dig out a potential root cause.
Best Regards,
Edward
Application.js isn’t being found in the load path because the compilation is failing – we remove the existing compiled files on failure.
At first glance, I think this all is related to the types being messed up – it’s got something to do with the way React stores the types – have you tried deleting the entire node_module directory and re-running yarn? (see reactjs - Duplicate identifier 'LibraryManagedAttributes' - Stack Overflow)
Thanks – I’m still trying to figure out if there’s a root cause here that I can steer away from in the codebase.
Hi Noel,
Tried deleting node_module directory and running yarn install. Still get the same problem.
Best Regards,
Edward
Hmm … I’ve confirmed that I can run bin/dev in both my repo’s chapter 5 / 7 and the downloaded source code. Is your yarn.lock file different from the one in the downloaded source code (can easily happen if you build it incrementally vs all at once)? If so what happens if you delete both that file and node_modules and try again.
If that still doesn’t work, than I think I need to see the actual directory you are working with…
Thanks,
Noel
Hello Noel,
Interesting. Deleting both yarn.lock and the node_modules directory fixed the issue. So I deleted the whole code directory, went to Chapter 5, 07 and tried again. bin/dev failed so I ran my little shell script. Then I got the error message regarding Duplicate identifier 'LibraryManagedAttributes'.
After this, I deleted node_modules and yarn.lock, ran yarn install and everything worked fine.
So, just out of curiosity, I went to Chapter 5, 06, deleted yarn.lock and ran yarn install and it worked fine.
Running a diff between the yarn.lock on 07 and 06 generated a file that is over 2,000 lines long, so quite a bit changed.
Then I deleted the code directory and loaded it again, went to Chapter 5, 07, deleted yarn.lock and ran yarn install. Everything ran fine and I didn’t even need to run my little script.
My system is Ubuntu 20.04.4 and yours is OS X, so perhaps there is something here that is relevant. In any case, I now know how to get things running.
Many thanks for your help and persistence!
Edward
Thanks! I’m reasonably sure that it’s not system related (I did have this problem at one point). I think it’s just that it’s possible to get the yarn.lock file into weird tangles because of the way that yarn and node packages work.
I’ll put a troubleshooting guide in the book somewhere.
Thanks for helping work this out.
Noel
