Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

ESM distributable doesn't work in browsers #1667

Closed
DellCliff opened this issue Sep 28, 2021 · 5 comments
Closed

ESM distributable doesn't work in browsers #1667

DellCliff opened this issue Sep 28, 2021 · 5 comments

Comments

@DellCliff
Copy link

🐛 Bug Report

ESM distributable doesn't work in browsers.

To Reproduce

import * as I18 from "../node_modules/i18next/dist/esm/i18next.js";

Error in browser: Uncaught TypeError: Error resolving module specifier “@babel/runtime/helpers/esm/typeof”. Relative module specifiers must start with “./”, “../” or “/”.

Expected behavior

I18 usable in the browser as a module without the need for babel or other similar systems.

Your Environment

  • runtime version: browser
@adrai
Copy link
Member

adrai commented Sep 28, 2021 •
edited

maybe this helps: https://jspm.org/sandbox#H4sIAAAAAAAAA61WbW/aMBD+3l9xy760G0lKtRdGAdFR1JcNrS1j0z6a5CBuHTuyndJ06n/fxQltqdaNiSkils/28zx359zReRGryBYZQmJT0dvqLAdkcW8LoJOiZRAlTBu0XS+3M7/luQXLrcDeRLox7oTV/P6IZCl2vWuOi0xp60GkpEVJEAse26Qb4zWP0HeTBnDJLWfCNxET2G0SQSesFHSmKi4c6gvfpwHgdHw2giOUqJlVGk7SEh9GLHOrw5hbmFx8bpM/NjPtMJwvtwaXJksDrsKXk71vyY+jj1eHo11djG9Px5NmUhyOd4thbj8dDxcje354Pj+YvxOKH58fELDvOw0m0jyzUMar63HHnLLMxeOno6+NxmvXhtLUbEm8sWTy7jWxezEyS9v1jv5eM6AnjLmxIZo0rO2013Ngd42KxEQqwxWO3wA/WqYN/Smbogh1TvlKkYIrMtTGsTBjUNuvCTcnVRr4LcZ/ULsK1X8fNN8Gb/6OWHrRWEtQJAhgwIQYJBhdbaRkFeofJGhkFgfl6c34H3DWJ5+jPdPKqvKafZltxL8Ktb4ELhPU3G7m/BJkfVo1vcTIjjOK2mY38DHQ+vSZMoZPBQ6UNFbnERWNC7S5lhtpeRZ1fWFl+tRmN6GCWI/yv9LVbHdby3f564RVKS0rZ13cYTiGkYpzgTBOeGray9JOFdZApkQx40LAjGp+6rYZmGq1oEpjYMFtonIL/NEJk2dusk1fP+BNhFS4B4lWKULrw+udJyWdmUJGYHTUfc5nNH7F65tSXn83aO4FrWWxXlkLUu6SC5Gm3CvN51x2PSaVLFKVG6/31P2VvlIhuaYCS49ekUCo2wHMyImHtrJfYQCEIXynzw3JfS7rGFHbjam1o8YGUOAIhIHBjFFDRKB4ogsdGT1y3QNmrebTnNaUBJvgEqXSFzgaauRGCQyEmm/XGnb2V1LaCaumTT3c/Zn4BUcDel5kCAAA

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>Untitled</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
  <!--
    JSPM Generator Import Map
    Edit URL: https://generator.jspm.io/#U2VhYGBkDM0rySzJSU1hyDS0yEutKHEwMtQDQgAg6loiHQA
  -->
  <script type="importmap">
  {
    "imports": {
      "i18next": "https://ga.jspm.io/npm:i18next@21.1.1/dist/esm/i18next.js"
    },
    "scopes": {
      "https://ga.jspm.io/": {
        "@babel/runtime/helpers/esm/assertThisInitialized": "https://ga.jspm.io/npm:@babel/runtime@7.15.4/helpers/esm/assertThisInitialized.js",
        "@babel/runtime/helpers/esm/classCallCheck": "https://ga.jspm.io/npm:@babel/runtime@7.15.4/helpers/esm/classCallCheck.js",
        "@babel/runtime/helpers/esm/createClass": "https://ga.jspm.io/npm:@babel/runtime@7.15.4/helpers/esm/createClass.js",
        "@babel/runtime/helpers/esm/getPrototypeOf": "https://ga.jspm.io/npm:@babel/runtime@7.15.4/helpers/esm/getPrototypeOf.js",
        "@babel/runtime/helpers/esm/inherits": "https://ga.jspm.io/npm:@babel/runtime@7.15.4/helpers/esm/inherits.js",
        "@babel/runtime/helpers/esm/objectSpread": "https://ga.jspm.io/npm:@babel/runtime@7.15.4/helpers/esm/objectSpread.js",
        "@babel/runtime/helpers/esm/possibleConstructorReturn": "https://ga.jspm.io/npm:@babel/runtime@7.15.4/helpers/esm/possibleConstructorReturn.js",
        "@babel/runtime/helpers/esm/typeof": "https://ga.jspm.io/npm:@babel/runtime@7.15.4/helpers/esm/typeof.js",
        "@babel/runtime/helpers/typeof": "https://ga.jspm.io/npm:@babel/runtime@7.15.4/helpers/esm/typeof.js"
      }
    }
  }
  </script>
  
  <!-- ES Module Shims: Import maps polyfill for modules browsers without import maps support (all except Chrome 89+) -->
  <script async src="https://ga.jspm.io/npm:es-module-shims@0.12.8/dist/es-module-shims.min.js" crossorigin="anonymous"></script>
  
  <script type="module">
    import * as i18next from "i18next";
  
    // Write main module code here, or as a separate file with a "src" attribute on the module script.
    console.log(i18next);
  </script>
</body>
</html>

@adrai adrai closed this as completed Sep 28, 2021
@DellCliff
Copy link
Author

DellCliff commented Sep 29, 2021 •
edited

@adrai Shims and polyfills are not really acceptable. They are not browser-native solutions (yet?). It means I still need another 3rd-party library, because a different library couldn't adhere to (current) browser-standards.

@DellCliff
Copy link
Author

The issue still stands and should not have been closed IMO.

@jamuhl
Copy link
Member

jamuhl commented Sep 29, 2021

Alternative: Providing a PR adding a special export for ESM for direct browser usage including the babel runtime....https://github.com/i18next/i18next/blob/master/rollup.config.js#L8

adrai added a commit that referenced this issue Sep 29, 2021
@adrai
provide bundled esm distributable #1667
9ae84d3
@adrai
Copy link
Member

adrai commented Sep 29, 2021

v21.2.0 should have a bundled esm file: https://cdn.jsdelivr.net/npm/i18next@21.2.0/dist/esm/i18next.bundled.js

@HanchaiN HanchaiN mentioned this issue Mar 14, 2023
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@jamuhl @adrai @DellCliff