Today I tried to help a friend use the JS module he found on Github. My friend is an excellent scientist, but not a JS specialist. Since I have been doing usability research and teaching at the Massachusetts Institute of Technology for the past six years, my skin has become frosty from how confused everything is. A bunch of unnecessary exceptions, mysterious errors and lack of proper feedback. And it seems to me that I did not help him too much to survive the disappointment that he experienced during this hour of torment or so, until he gave up.It was something like this ...Note: package and people names have been changed to protect their identity. I also omitted several issues that were too specific for this package. Some errors are recovered from memory, so let me know if I misunderstood something.John : Hey, I want to try this algorithm that I found on Github. He says what needs to be used import functionName packageName, and then called functionName(). Everything seems pretty simple! I don’t really need the user interface, so I will use Node!Me (Leah): Of course, Node seems like a good framework!John launches npm install packageName --saveas recommended by README. Then node index.js.Node:Warning: To load an ES module, set "type": "module" in the package.json or use the .mjs extension.
SyntaxError: Cannot use import statement outside a module
John: But I don’t have any package.json ...Leah: Run npm initit, it will generate it!John starts npm init, goes through the installation wizard, manually adds it type: "module"to the generated package.json.John launches node index.js.Node:SyntaxError: Cannot use import statement outside a module
Oddly enough, this time the internal module of the project threw an error. WAT ?!Lea: Well, to hell, just run it in a browser, this is the ES6 module, there is just a clean JS algorithm that does not use the Node API, it should work.John makes a simple index.html page with a line <script type="module" src="index.js">and loads it in a browser.Nothing in the console. TA-dah.Lea: Well, yes, you need to configure the module path in order to import packageName. Node does special things for resolving by node_modules, so in the browser you need to specify the explicit path yourself.John is looking at his files, but there is no node_modules directory there.Lea: Well, yes, you started it npm installbefore you appeared package.json, probably this is the point! Try again!John starts John again npm install packageName --save: Oh, now the node_modules directory has appeared!John is desperately looking for an entry point in node_modules. Then it edits its index.js accordingly and reloads it.Firefox:Incorrect MIME type: text / html
Lea: Of course, it opens for you file://! My friend, how do you live in our time without a localhost? Currently, the use of Javascript for is file://strictly limited.John: But why am I ... Okay, I’ll run a localhost.John runs localhost, opens his index.html at localhost : 80.Firefox:Incorrect MIME type: text / html
John (sighs) . Need to configure localhost to issue JS files with text / javascript type?Lea: What? No! He knows that. Hmm ... Look at the Networks tab. I suspect that he cannot find your module, so he returns a 404 HTML page, and then complains that this page is not text/javascript.Looks at node_modules again, corrects the path. It turns out that VS Code collapses directories with just one subdirectory, so we did not notice this.Actually, I think this is a really good usability improvement on behalf of VS Code, it improves efficiency, but they should have made things more visible.Firefox:SyntaxError: missing) after formal parameters
Lea: What? This is from the source package, it is not your fault. I don’t understand ... Can I look at this line?John clicks on the line that causesLea's mistake : Oh my god. This is not Javascript, this is Typescript !!! With the extension .js !!!John: Yes, I just wanted to run one line of code to test this algorithm ...John gives up. He concludes that it’s best never to touch the Node, npm or ES6 modules.The end.Please note that John is a computer scientist who knows quite a lot about the web: he had Node & npm installed, he knew what MIME types were, he could start localhost when it was needed. What can newbies hope for?