0

I'm a newbie, I've been trying since this morning to get some code in order to run Chalk in the console of Firefox, Chrome and so forth. I've seen tons of videos about modules and Babels and I've read here a lot of discussion, but nothing is still happened.

Firstly I have installed Chalk with npm, checked package.json and everything was fine.

Then using Live server:

ES 5 syntax: I get "Require is not defined".

ES 6 syntax: "Uncaught SyntaxError: import declarations may only appear at top level of a module".

ES 6 syntax2: I have added in HTML file: <script src="./node_modules/chalk/index.d.ts" type="module"></script> and I obtain:

  1. Loading module “http://127.0.0.1:5500/Getapper/node_modules/chalk/index.d.ts” was blocked because of a disallowed MIME type (“video/mp2t”).
  2. Loading failed for the with source “http://127.0.0.1:5500/Getapper/node_modules/chalk/index.d.ts”.
  3. "Uncaught SyntaxError: import declarations may only appear at top level of a module".

Babel: desperate, I have also tried to install and use Babel to convert the import code, but even in that way I failed (but I have learnt something new and useful).

Last but not least, I have tried to run Chalk without Live server, nothing again.

Notes:

  • I've tried both version 5 and version 4 of Chalk, but it's not still gonna work.

  • I added the line "type: modules" in package.json with syntax ES 6.

  • I changed "main" with "exports" as written here: chalk - Error [ERR_REQUIRE_ESM]: require() of ES Module

  • Node version and NPM version are the latest.

News:

With this line in HTML <script src="modules.js" type="/module"></script>

There is no more syntax error, but Chalk is still not working (the console.log lines are not getting read).

On modules.js the code is:

import chalk from 'chalk'; 
console.log(chalk.blue.italic("Chalk package is working")); 
console.log(chalk.red.bold("Hello Chalk!"));

Only when I run Node on VSCode Chalk works fine.

Someone could help me please and explained what's happening? I am quite discouraged, apparently it seemed a piece of cake -.-

Romy
  • 1
  • 2

2 Answers2

0

The chalk docs says it is for terminal string styling which means this package works for server side node js applications and not in the browser.

islam hany
  • 148
  • 8
  • Aehm <.< ... As I said I am a newbie, I completely didn't catch that "terminal string" means "not for browsers". I saw "console.log" into the docs and for me it was natural that it was "that console". In addiction to that, the paper I am studying doesn't mention this little "difference" at all. So I've spent all the day on nothing <.< Good game. I am very grateful for your reply. – Romy Jan 30 '23 at 00:35
0

Chalk is for terminals and runs on servers.
Browsers are not officially supported but they might add it in the future, see discussion on GitHub.

HOWEVER, somehow it DOES seem to work in GoogleChrome/Chromium/Edge with colors and styles. In other browsers like Firefox the log is displayed as just the text without the color styles so at least it doesn't show strange characters!.

Try creating a simple html file like this and test it yourself:

<!DOCTYPE html>
<html>
<script type="module">
    import chalk from 'https://cdn.jsdelivr.net/npm/chalk@5.2.0/+esm'
    console.log(chalk.blue('Hello world!'));
</script>
</html>
Lazaro
  • 179
  • 2
  • 12