[v0.4.1] [v0.5.0 coming soon] [NEVER! Porting to NextJS (too hard)] MyScratchPage

MagicCrayon9342

The React port will basically be v0.5 with how many features and UI changes there are going to be.

MagicCrayon9342

The react version now has 100% parity with the vanilla version. Still needs polish though.

MagicCrayon9342

What features should be added, MyScratchPage can now utilize React, NPM Libraries, etc.

MagicCrayon9342

MyScratchPage React has now been launched as a stable release. here
The React variation will replace the vanilla one, and the vanilla one will no longer be online.

kccuber

MagicCrayon9342 wrote:
MyScratchPage React has now been launched as a stable release. here
The React variation will replace the vanilla one, and the vanilla one will no longer be online.

I can't seem to access it, it just leads me to an empty page.

Made using Nord Theme & Inkscape

MagicCrayon9342

kccuber wrote:
MagicCrayon9342 wrote:
MyScratchPage React has now been launched as a stable release. here
The React variation will replace the vanilla one, and the vanilla one will no longer be online.
I can't seem to access it, it just leads me to an empty page.

That's because of a critical mistake in the software I didn't change the homepage value in the package.json I'm uploading a few bug fixes right now actually.

MagicCrayon9342

The software is back online and working again. I fixed every error that appeared in the console in previous revisions.

kccuber

Why did you put signature in a p tag

use a div tag

Made using Nord Theme & Inkscape

MagicCrayon9342

kccuber wrote:
Why did you put signature in a p tag

use a div tag

switching tags made no difference. The CSS on the div might be affecting the signature? I don't know. The HTML of the signature retrieved from ScratchDB is then directly put into the div.

Maximouse

MagicCrayon9342 wrote:
switching tags made no difference. The CSS on the div might be affecting the signature? I don't know. The HTML of the signature retrieved from ScratchDB is then directly put into the div.

P is not the right element semantically because a signature can contain multiple paragraphs. Those can even be s which will result in invalid HTML.

This is Maximouse's signature. Learn more about signatures.

MagicCrayon9342

Maximouse wrote:
MagicCrayon9342 wrote:
switching tags made no difference. The CSS on the div might be affecting the signature? I don't know. The HTML of the signature retrieved from ScratchDB is then directly put into the div.
P is not the right element semantically because a signature can contain multiple paragraphs. Those can even be s which will result in invalid HTML.

So what's the solution to the bug?

NFlex23

MagicCrayon9342 wrote:
(#171)
Maximouse wrote:
MagicCrayon9342 wrote:
switching tags made no difference. The CSS on the div might be affecting the signature? I don't know. The HTML of the signature retrieved from ScratchDB is then directly put into the div.
P is not the right element semantically because a signature can contain multiple paragraphs. Those can even be s which will result in invalid HTML.
So what's the solution to the bug?

Use a div, like kccuber said.

Help improve the Advanced Topics (Really!)
Before you create a topic:
Always search for duplicates or other similar topics before making an umbrella topic, e.g., “The Mac Topic”.

Is it about something you are planning on making but haven't made yet? If so, please wait to post until you have created a working prototype. This is a key factor to keeping the ATs as clean as possible.
The ATs aren't technical support. It is perfectly valid to ask questions about things related to programming, but not issues with external websites, apps, or devices. Most sites have their own support system; try asking there!
Is it related to something you are making in Scratch? (This includes OSes and other Scratch projects) If so, please post in Collaboration, Show and Tell, or another similar forum.
Is your topic questionably “advanced”? Try browsing the other forums to see if your topic fits better in one of those.
Issues with Scratch itself should be put in Bugs and Glitches.

Before you post: Is what you're posting likely to start an argument or derail the thread (e.g., browsers, operating systems)? If so, please re-think your post!

MagicCrayon9342

NFlex23 wrote:
MagicCrayon9342 wrote:
(#171)
Maximouse wrote:
MagicCrayon9342 wrote:
switching tags made no difference. The CSS on the div might be affecting the signature? I don't know. The HTML of the signature retrieved from ScratchDB is then directly put into the div.
P is not the right element semantically because a signature can contain multiple paragraphs. Those can even be s which will result in invalid HTML.
So what's the solution to the bug?
Use a div, like kccuber said.

I did exactly that, and it still doesn't work.

NFlex23

MagicCrayon9342 wrote:
(#173)
NFlex23 wrote:
MagicCrayon9342 wrote:
(#171)
Maximouse wrote:
MagicCrayon9342 wrote:
switching tags made no difference. The CSS on the div might be affecting the signature? I don't know. The HTML of the signature retrieved from ScratchDB is then directly put into the div.
P is not the right element semantically because a signature can contain multiple paragraphs. Those can even be s which will result in invalid HTML.
So what's the solution to the bug?
Use a div, like kccuber said.
I did exactly that, and it still doesn't work.

I thought you meant fixing invalid HTML. As for the other bug, I haven't looked at your source code so I don't know. I should have read a few more posts up, sorry.

Last edited by NFlex23 (May 27, 2022 21:48:30)

Help improve the Advanced Topics (Really!)
Before you create a topic:
Always search for duplicates or other similar topics before making an umbrella topic, e.g., “The Mac Topic”.

Is it about something you are planning on making but haven't made yet? If so, please wait to post until you have created a working prototype. This is a key factor to keeping the ATs as clean as possible.
The ATs aren't technical support. It is perfectly valid to ask questions about things related to programming, but not issues with external websites, apps, or devices. Most sites have their own support system; try asking there!
Is it related to something you are making in Scratch? (This includes OSes and other Scratch projects) If so, please post in Collaboration, Show and Tell, or another similar forum.
Is your topic questionably “advanced”? Try browsing the other forums to see if your topic fits better in one of those.
Issues with Scratch itself should be put in Bugs and Glitches.

Before you post: Is what you're posting likely to start an argument or derail the thread (e.g., browsers, operating systems)? If so, please re-think your post!

MagicCrayon9342

components are cool.

MagicCrayon9342

So, I completed the port from React to React + NextJS. However, this…

MagicCrayon9342

Problems with NextJS

1. I literally cannot import ANY css file from ANY file other than app.js (can't style components)
2. I cant import functions.js, since ‘document’ is NEVER defined.
3. I can't do ANYTHING

Maximouse

MagicCrayon9342 wrote:
So, I completed the port from React to React + NextJS. However, this…

You can't use DOM on the server. Why do you even need it if you're using React?

This is Maximouse's signature. Learn more about signatures.

MagicCrayon9342

Maximouse wrote:
MagicCrayon9342 wrote:
So, I completed the port from React to React + NextJS. However, this…
You can't use DOM on the server. Why do you even need it if you're using React?

Each page is in /pages correct? so the app.js is entirely irrelevant.

MagicCrayon9342

Update 1: Hacky solution, but I am now using app as a component to use it. However, without being able to use functions.js or import ANY css thats pretty much useless.
Update 2: The hacky solution was completely unnecessary. I was supposed to create _app.js in pages/
Update 3: Still can't import any JS, document not defined.

Update 4:
I have pushed my commits, so if anyone wants to help fix the errors they can.

Last edited by MagicCrayon9342 (May 29, 2022 18:11:54)

Discuss Scratch