Using blockly online

[ShimpleShe Quackutus]

So, i've got a blockly uh (application? package?) thing, and i wanted to just upload it online with github pages, like the image below

Now, i've tried several times and i keep getting errors like:

Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/css". Strict MIME type checking is enforced for module scripts per HTML spec

or

Failed to load resource: the server responded with a status of 404 (Not Found)

So i was wondering, what could i do to fix these issues and possibly get my blockly project working on standard pages

Thanks in advance!

[Maribeth Moffatt]

Hello,

I think your question is more about how to host things on github pages rather than about blockly specifically, as blockly is just a regular client-side library, there's not anything blockly-specific about hosting on github pages. You might get better support asking in a forum related to github pages, but I will try to help as best I can.

However, you will have to provide more information before we can assist you. What resource failed to load? What files are you uploading to github pages? What does your code look like? What line of code is throwing the error mentioned?

Best,

Maribeth

[ShimpleShe Quackutus]

It might be hard to explain in here, and for simplicity's sake i made this: https://docs.google.com/document/d/e/2PACX-1vQLKGMbZuEu7sgMeJTbflf7IcnlccoZIW1YSTxj2CAr9_zXed7Y953iEAtw9IkKgC-qIpQd1Oz-TCO5/pub

Long story short my imports look like:

import * as Blockly from '../node_modules/blockly';

import {blocks} from './blocks/nitgblocks.js';

import {nitgGenerator} from './generators/nitgen.js';

import {save, load} from './serialization.js';

import {toolbox} from './toolbox.js';

import './index.css';

import './renderers/NotITB.js';

//import plugins

import {shadowBlockConversionChangeListener} from '../node_modules/@blockly/shadow-block-converter';

import {Backpack} from '../node_modules/@blockly/workspace-backpack';

import {ZoomToFitControl} from '../node_modules/@blockly/zoom-to-fit';

import {

  ScrollOptions,

  ScrollBlockDragger,

  ScrollMetricsManager,

} from '../node_modules/@blockly/plugin-scroll-options';

And my errors look like the image down below:

As always. Thanks in advance, i'm really just starting to try and code even though i know uh, just a little.. 😅

[Maribeth Moffatt]

Thanks for providing your code. You have waded deep into the problem of JavaScript modules. This topic is outside the scope of what we can provide support for in the forum, but here's an overview. This is simplified and definitely not comprehensive, but hopefully generally accurate.

There are multiple module systems (basically ways you can structure your JS code so that the browser knows which symbols are found in which files). EcmaScript Modules aka esmodules aka esm are the flavor of modules that are supported by browsers. That means you can write 'import foo from '../myfooesmodule.js' and as long as myfooesmodule.js is in fact an esm, the browser understands how to load that file and the code within it.

However, esmodules are relatively newer compared to other module systems. Before the browsers knew how to do this natively, there were other modules systems such as commonjs or amd. The browser does not know what to do with these module systems, so in order to load code using them into the browser, you have to use a build tool to transpile the code into something the browser understands.

Blockly is published as a UMD, which is an older system that was used before browsers had esm compatibility. Despite the waning popularity of this format, blockly continues to be published this way for backwards compatibility. The browser cannot load UMD modules via import statements. What this means for you is that if you want to use `import Blockly` statements, you need to use a build tool that can support umd and output something the browser understands. Alternatively, umd modules can be loaded directly in the browser via script tags. These options are explained in our "Get the Code" documentation.

Beyond all that and loading Blockly itself, browsers don't have the ability to load css through `import` statements either. You either need to include css on your page in the way browsers understand (for example, by loading a stylesheet in a script tag) or you need a build tool that can transform your code into the format expected by the browser.

This is a rather complex topic and if you just don't want to deal with it, I'd recommend you try the "create-package" script that is explained on the page I linked above. It will bootstrap you an application with some common build tools like webpack that will transform code like you've written above into something you can load on github pages. If you have an app made with that script, you can run `npm run build` to run a production build, then upload the contents of the `dist` directory to github pages.

I hope this helps! Best,

Maribeth

[Mark Friedman]

I looked at your doc and your repo and I have some ideas for what might have happened.  It looks like the example that you started with was based on the "create-package" script that Maribeth mentioned.  And it looks like it initially worked fine when you ran it with `npm start` and maybe even worked after some of your initial modifications.  What you might have trouble with was how to package everything up so that it would work without needing `npm start`.  That's where `npm build` comes in.  If you run that command, it will package all your code in a way that can be simply run by pointing a browser at the index.html file that `npm build` will create. `npm build` will put all the files that it generates into a 'dist' folder.  If you want to publish your app, you just need to put the contents of the dist folder into a web server.

Hope this helps!

-Mark

--
You received this message because you are subscribed to the Google Groups "Blockly" group.
To unsubscribe from this group and stop receiving emails from it, send an email to blockly+u...@googlegroups.com.
To view this discussion visit https://groups.google.com/d/msgid/blockly/f0869a65-f95a-491b-86da-93e1f3d4d044n%40googlegroups.com.

[ShimpleShe Quackutus]

Thanks guys!

The method of running `npm build` worked like a charm!
I cannot stress enough how thankful i am!