Minimal Code not working when following "Getting Started" instructions
#2,584 opened on Jan 7, 2024
Description
I am new to modern web development so I am carefully following the instructions at the "Getting Started" page.
Context
I am using a python Flask web application server which successfully responds to a web browser with HTML and static content like CSS and javascript. There is no issue with these being correctly sent to the browser, as verified by "Inspect element / view source".
I have tried loading the editorjs using two methods: (1) CDN and (2) static file sent from the web server to the browser. Both of these follow the Getting Started instructions:
<script src="https://cdn.jsdelivr.net/npm/@editorjs/editorjs@latest"></script>
or
<script src="editor.js"></script>
Problem 1: Which Library?
Actually, the link on the Getting Started page doesn't point to an official release of editor.js but a page of mostly pre-release versions. This is confusing for newcomers like me. However I scrolled down and found version v2.28.1 which didn't have a pre-release tag against it, and clicked on that. In the zip file there is no editor.js ... is this "release" meant for us to compile ourselves? If I then click on the "tags" tab and scroll down the list I see a v2.28.2 but again the zip doesn't have an editor.js (and why is this not on the main list?). If I go to the main git hub page - not linked from the Getting Started tutorial - I can see on the right that v.2.28.0 is the latest. Yes, I'm confused. This has editor.mjs and editor.umd.js .. as a newbie I don't know what these are and the Getting Started instructions don't mention it. I tried both.
Problem 2: Loading Library Fails
Back to the Getting Started tutorial, at the top of a new javascript file, includes as just after the library is imported, I immediately import the library, as per the tutorial's example code
import EditorJS from '@editorjs/editor.mjs'; // and also tried editor.umd.js
This leads to an error in Firefox latest (
Uncaught SyntaxError: import declarations may only appear at top level of a module
In Safari latest, the error is different
SyntaxError: Unexpected identifier 'EditorJS'. import call expects one or two arguments.
I also tried the other options in the tutorial eg:
import EditorJS from '@editorjs/editorjs';
const editor = new EditorJS({
/**
* Id of Element that should contain Editor instance
*/
holder: 'editorjs'
});
My Attempts to Solve This
I have been coding since the 1980s (!) but not modern web stuff, so I understand fundamentals but not the specifics. I asked around and people who are expert front end developers tell me I need "node/npm". This, if I understand, is a server-side javascript runtime framework. I'm not trying to do that - I',m just trying to load the library into the web browser and use it client side - as the Getting Started page suggests I can and should.
Also, is the use of "@" in the import statement something I need to replace when loading from a CDN or from a web server? Is it an alias that is resolved by node compiling it?
Summary
There are two key problems, irrespective of my own inexperience:
-
Following the tutorial at the Getting Started pages doesn't work for newcomers as clearly some guidance / information is missing.
-
There's a mismatch between the linked editor.js and actually finding the lates/official release. I still can't find a file named exactly "editor.js" on the GitHub pages.