pimterry/loglevel

Is it possible to import Loglevel as an ES module in client-side javascript?

shanemcandrewai opened this issue · 5 comments

shanemcandrewai commented

Hi,

I tried the following -

loglevel.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>loglevel test</title>
    <script type="module" src="scripts/loglevel.js"></script>
  </head>
  <body>
    <h1>loglevel test</h1>
  </body>
</html>

scripts/loglevel.js version 1

import log from 'https://unpkg.com/loglevel/dist/loglevel.min.js';
log.warn('module-tastic');

result version 1

Uncaught SyntaxError: The requested module 'https://unpkg.com/loglevel/dist/loglevel.min.js' does not provide an export named 'default'

scripts/loglevel.js version 2

import * as log from 'https://unpkg.com/loglevel/dist/loglevel.min.js';
log.warn('module-tastic');

result version 2

loglevel.min.js:2 Uncaught TypeError: Cannot set properties of undefined (setting 'log') at loglevel.min.js:2:141 at loglevel.min.js:2:146

Is it possible to import https://unpkg.com/loglevel/dist/loglevel.min.js into a client side javascript?

pimterry commented

It's not possible to import that URL as a module, but you can load it directly as a raw script and it will define a log global, which is usable without bundling or other tools. That works like this:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>loglevel test</title>
    <script src="https://unpkg.com/loglevel/dist/loglevel.min.js"></script>
    <script>
      log.warn('loglevel!');
    </script>
  </head>
  <body>
    <h1>loglevel test</h1>
  </body>
</html>

This is because this officially published release isn't built as a pure ES module right now - instead it's built as UMD, which supports CommonJS, RequireJS and global usage (the options that were most relevant when this package was initially created).

Alternatively, if you'd strongly prefer ES modules, you can probably use Skypack instead of unpkg to do this. Skypack is a CDN that can automatically convert existing npm packages to ES modules. That would work like this:

import loglevel from 'https://cdn.skypack.dev/loglevel';

loglevel.warn('module-tastic')

In a quick test with their codepen this seems to work correctly.

Does one of those options work for you?

I am open to supporting ES modules natively, but it's a bit of work that I'm not too familiar with, and it's not a priority for me right now. If you're really interested in this, and there's a route to add this without breaking any existing usage, PRs are welcome!

shanemcandrewai commented

Hi Tim, thanks for your explanation. The background to my question is that I am trying to eliminate ESlint errors relating to loglevel. I was able to successfully import the Skypack version after downloading it to the HTTP server. Now I get different errors -

  1:8   error  Using exported name 'log' as identifier for default export                                                                 import/no-named-as-default
  1:17  error  Unexpected use of file extension "js" for "./loglevelES.js"                                                                import/extensions
  3:1   error  Caution: `log` also has a named export `warn`. Check if you meant to write `import {warn} from './loglevelES.js'` instead  import/no-named-as-default-member

✖ 3 problems (3 errors, 0 warnings)
pimterry commented

All of those errors are related to your code, not loglevel's. You can look up ESLint's docs for each error here: https://github.com/import-js/eslint-plugin-import/tree/main/docs/rules

The 2nd is because you've included .js in the require path when it's not necessary, you just need to remove that. I think you can probably fix the 1st and 3rd too by importing as import * as log instead of using the default import.

shanemcandrewai commented

Your suggestion removed the 1st and 3rd errors but removing the .js extension causes a browser error

GET http://localhost:3000/scripts/loglevelES net::ERR_ABORTED 404 (Not Found)

pimterry commented

This errors are problems with your ESLint setup or your code, I can't help with that I'm afraid. If .js doesn't work in your setup, then your ESLint configuration or your other project setup must be wrong.

The ESLint docs for that rule are here: https://github.com/import-js/eslint-plugin-import/blob/main/docs/rules/extensions.md. If you're still having issues with ESLint I'd suggest opening an issue with them.

Independent of the linting issues, it sounds like you do now have a working setup that can import Loglevel as an ES module, so I'm going to close this issue. If you're still having any issues with that raw importing step though, do feel free to let reply here and I can look into that.