Next.js Static Export Broke

[Dylan Bucicchia]

Hello, I'm working on a project that uses Blockly for easy block coding. I've been working on this for a while and it's almost done. However, today i tried to test the static export on Next.js so I can ensure that I will be able to deploy the site. The export went fine, but when I opened the html file, the site looked like this:

The site is supposed to look like this:

All of my code for this site is available here:

https://github.com/DylDevs/Blockly-PyBricks

When you run "npm i && npm run dev" in the console, it should open localhost:3000 where the site will be viewable, but if you run "npm run build", the site will compile into the out directory, running the index.html file in that directory leads to the broken site.

Any help on this matter is appreciated as I am trying to get this site deployed in the next week.

Thanks!

- Dylan

[Christopher Allen]

Hi Dylan,

Hello, I'm working on a project that uses Blockly for easy block coding. I've been working on this for a while and it's almost done. However, today i tried to test the static export on Next.js so I can ensure that I will be able to deploy the site.

I don't think anyone on the Blockly team is that familiar with Next.js, and we don't unfortunately have time to debug every Blockly developer's project for them, but if you can provide us with a bit more information then we might be able to help or at least point you in the right direction.

The obvious place to start is the same as for almost any other web app debugging: do any error messages appear in the console, and if so what do they say?

Best wishes,

Christopher

[Dylan Bucicchia]

Thanks for the quick response!

I totally forgot to look in the console (my bad)

At first it gives these warnings which seem to be related to Next.js:

Loading failed for the <script> with source “file:///_next/static/chunks/webpack-953556fdf238d252.js”. index.html:1:517

Loading failed for the <script> with source “file:///_next/static/chunks/framework-ecc4130bc7a58a64.js”. index.html:1:600

Loading failed for the <script> with source “file:///_next/static/chunks/main-678ea17784401d5f.js”. index.html:1:678

Loading failed for the <script> with source “file:///_next/static/chunks/pages/_app-ef0c2d814daa91a8.js”. index.html:1:762

Loading failed for the <script> with source “file:///_next/static/chunks/d711c980-35baa5180bb4620c.js”. index.html:1:844

Loading failed for the <script> with source “file:///_next/static/chunks/ee9ce975-31d5f14ab71fbd00.js”. index.html:1:926

Loading failed for the <script> with source “file:///_next/static/chunks/690-9ddff9650b0d4649.js”. index.html:1:1003

Loading failed for the <script> with source “file:///_next/static/chunks/pages/index-557f5c67a89af9cf.js”. index.html:1:1088

Loading failed for the <script> with source “file:///_next/static/FYPDXEWgvLmg0imH3xMTx/_buildManifest.js”. index.html:1:1174

Loading failed for the <script> with source “file:///_next/static/FYPDXEWgvLmg0imH3xMTx/_ssgManifest.js”. index.html:1:1258

But then it shows an error, which I think is the issue here:

SyntaxError: CustomElementRegistry.whenDefined: 'blockly' is not a valid custom element name index.js:6248

I went to go check the index.js file but oddly, there doesn't seem to be one? I'm kind of stuck here.

​

[Christopher Allen]

Hi Dylan,

Thanks for the quick response!

You're most welcome.

 

At first it gives these warnings which seem to be related to Next.js:

Loading failed for the <script> with source “file:///_next/static/chunks/webpack-953556fdf238d252.js”. index.html:1:517

Loading failed for the <script> with source “file:///_next/static/chunks/framework-ecc4130bc7a58a64.js”. index.html:1:600

Loading failed for the <script> with source “file:///_next/static/chunks/main-678ea17784401d5f.js”. index.html:1:678

Loading failed for the <script> with source “file:///_next/static/chunks/pages/_app-ef0c2d814daa91a8.js”. index.html:1:762

Loading failed for the <script> with source “file:///_next/static/chunks/d711c980-35baa5180bb4620c.js”. index.html:1:844

Loading failed for the <script> with source “file:///_next/static/chunks/ee9ce975-31d5f14ab71fbd00.js”. index.html:1:926

Loading failed for the <script> with source “file:///_next/static/chunks/690-9ddff9650b0d4649.js”. index.html:1:1003

Loading failed for the <script> with source “file:///_next/static/chunks/pages/index-557f5c67a89af9cf.js”. index.html:1:1088

Loading failed for the <script> with source “file:///_next/static/FYPDXEWgvLmg0imH3xMTx/_buildManifest.js”. index.html:1:1174

Loading failed for the <script> with source “file:///_next/static/FYPDXEWgvLmg0imH3xMTx/_ssgManifest.js”. index.html:1:1258

But then it shows an error, which I think is the issue here:

SyntaxError: CustomElementRegistry.whenDefined: 'blockly' is not a valid custom element name index.js:6248

I went to go check the index.js file but oddly, there doesn't seem to be one? I'm kind of stuck here.

I know almost nothing about Next.js, but hopefully another forum contributor who is more familiar with it will chime in.  In the meantime, here are the things I'd investigate:

• The CustomElementRegistry error message looks like it is probably fallout from one of the loading failures.
• I'd start by checking to see if the mentioned files (e.g. file:///_next/static/chunks/webpack-953556fdf238d252.js) exist in the _next/ directory—if they don't then something seems to have gone wrong with your build.
• It looks like your browser will be looking for the _next directory in the root of your filesystem ("file:///_next/" === "file://" + "/next_/").  That looks wrong: the root directory would be a weird place to keep development files (next to /bin, /usr, /home, etc.) and the screenshot you included definitely doesn't look like the root directory, so I'd try to figure out why index.html is attempting to load files with absolute paths starting in the root directory.  Maybe it's expecting to be loaded via http:// from a development web server configured to serve the directory you screenshotted as its root, rather than being loaded via file://?
• You might be able to make it work by removing leading "/"s from the paths, but CORS restrictions often cause trouble with file: URLs so you might be better to make sure you have a development web server running instead so you can use HTTP.
• Blockly does not itself do anything involving web components (which the CustomElementRegistry exists to support), so if your code is expecting to be able to use <blockly> elements it will also need to do whatever needs to be done to add support for that custom element.  Alas I can't help you here as this is a frontend thing that I don't yet know much about.
• I'm not sure which index.js:6248 might be the culprit, but doing a find for any index.js in your working tree might find it.  It could also be that that file is part of a webpack bundle or the like, and the filename and line number shown are actually come from a sourcemap.  Disabling sourcemaps temporarily might tell you in what actual file that the browser loads the error occurs—or you could look in the browser's dev tools sources panel for an index.js, since the browser is often clever enough to show the contents of bundles as a tree of virtual files.

Best wishes,

Christopher

[Dylan Bucicchia]

I looked through all your suggestions and couldn't figure it out, bit I went on GitHub pages and found out that there is a built in Next.js compiler. When i used that workflow and commited my files, everything deployed with no issue!

One more thing, could you check this out and let me know if it shows up well for you?
https://cloverbots-fll.github.io/

Other than that I really appreciate the help, thank you!

- Dylan

[Christopher Allen]

I looked through all your suggestions and couldn't figure it out, bit I went on GitHub pages and found out that there is a built in Next.js compiler. When i used that workflow and commited my files, everything deployed with no issue!

Great!

 

One more thing, could you check this out and let me know if it shows up well for you?

https://cloverbots-fll.github.io/

It does.  Looks good to me.