Coder Social home page Coder Social logo

Comments (5)

pimterry avatar pimterry commented on June 2, 2024

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!

from loglevel.

shanemcandrewai avatar shanemcandrewai commented on June 2, 2024

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)

from loglevel.

pimterry avatar pimterry commented on June 2, 2024

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.

from loglevel.

shanemcandrewai avatar shanemcandrewai commented on June 2, 2024

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)

from loglevel.

pimterry avatar pimterry commented on June 2, 2024

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.

from loglevel.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.