search

fnando / i18n

A small library to provide the I18n translations on the JavaScript.
https://fnando.github.io/i18n/
MIT License
169 stars 20 forks source link

i18n fails when used via Importmaps #58

Closed john-999 closed 1 year ago

john-999 commented 1 year ago

Description

I have attempted to install, configure and use i18n-js via Importmaps (via Rails). Unfortunately, I get a ton of failing GET requests, where Lodash appears to look for the .js files using wrong paths.

How to reproduce

The installation:

$ ./bin/importmap pin i18n-js@4.2.3 --download

The resulting config/importmap.rb

pin "i18n-js" # @4.2.3
pin "bignumber.js" # @9.1.1
pin "lodash/camelCase", to: "lodash--camelCase.js" # @4.17.21
pin "lodash/flattenDeep", to: "lodash--flattenDeep.js" # @4.17.21
pin "lodash/get", to: "lodash--get.js" # @4.17.21
pin "lodash/has", to: "lodash--has.js" # @4.17.21
pin "lodash/isArray", to: "lodash--isArray.js" # @4.17.21
pin "lodash/isObject", to: "lodash--isObject.js" # @4.17.21
pin "lodash/range", to: "lodash--range.js" # @4.17.21
pin "lodash/repeat", to: "lodash--repeat.js" # @4.17.21
pin "lodash/set", to: "lodash--set.js" # @4.17.21
pin "lodash/sortBy", to: "lodash--sortBy.js" # @4.17.21
pin "lodash/uniq", to: "lodash--uniq.js" # @4.17.21
pin "lodash/zipObject", to: "lodash--zipObject.js" # @4.17.21
pin "make-plural" # @7.0.0

All corresponding .js files are downloaded to:

my_app/vendor/javascript/bignumber.js.js
my_app/vendor/javascript/i18n-js.js
my_app/vendor/javascript/lodash--camelCase.js
my_app/vendor/javascript/lodash--flattenDeep.js
my_app/vendor/javascript/lodash--get.js
my_app/vendor/javascript/lodash--has.js
my_app/vendor/javascript/lodash--isArray.js
my_app/vendor/javascript/lodash--isObject.js
my_app/vendor/javascript/lodash--range.js
my_app/vendor/javascript/lodash--repeat.js
my_app/vendor/javascript/lodash--set.js
my_app/vendor/javascript/lodash--sortBy.js
my_app/vendor/javascript/lodash--uniq.js
my_app/vendor/javascript/lodash--zipObject.js
my_app/vendor/javascript/make-plural.js

The resulting importmap script looks like this:

<script type="importmap" data-turbo-track="reload">{
    "imports": {
        ...
        "i18n-js": "/assets/i18n-js-04b620e607b4a8fc4d369deb77ddaca4c314ff3f5b113425aa02a5463c0f2a03.js",
        "bignumber.js": "/assets/bignumber.js-da37e3c473288a78d1c8f160c092a279052ebe856db1dcafe6e3d6d1b5afa239.js",
        "lodash/camelCase": "/assets/lodash--camelCase-6f67652d0026ec4ab6b1f27196f08a44304fa605aa6ff96fe6ec82fa285694d1.js",
        "lodash/flattenDeep": "/assets/lodash--flattenDeep-2f4edb1bfdbc4fbfdb2e7eefd3d37d5e2e4b88dee8f10c06789ddbb360057939.js",
        "lodash/get": "/assets/lodash--get-35a2d1636af7ea4edad2fda72147bffaa45bae5656450a0e43f0243ffddf7d6f.js",
        "lodash/has": "/assets/lodash--has-64e2b530099782a9245954fc3d0686a0435d5a4e36731b4487e53afa61487b41.js",
        "lodash/isArray": "/assets/lodash--isArray-90fbbd88ee79467a159561db8b16654aff7a93cedcdc52b7db2e16b0ae7afe87.js",
        "lodash/isObject": "/assets/lodash--isObject-4fab301185da7b0352cb57ea604e3424e95ab46992c48137bbcfe8e7251da840.js",
        "lodash/range": "/assets/lodash--range-c1e03f0ecbfd42e639fbd6729f8bc0b1ecef043c35ded308fcf0f9ae4360cb05.js",
        "lodash/repeat": "/assets/lodash--repeat-5664123cae867b181825acae4eb06f468f07dc03e88e20baceddf91b1696282b.js",
        "lodash/set": "/assets/lodash--set-82bc400373c55188224ac34f828c43950c4c575acca0d105024d85afe8b0f4e1.js",
        "lodash/sortBy": "/assets/lodash--sortBy-b081313fe9cbc9c19866f545b40357fc4a58f822fab6b893a1603c5c7b757fd6.js",
        "lodash/uniq": "/assets/lodash--uniq-b0fd5fd63d0fc1141fe47e7b2f16beefc916c1d87b07b43e69ee4813c105dac9.js",
        "lodash/zipObject": "/assets/lodash--zipObject-db9bbd8ec0b6e7ebc0cde82b511a40ff8fb16457fe92b7532903f07b172c2db4.js",
        "make-plural": "/assets/make-plural-2d052f6889f01180b0da040eb353fe7f921e763196a1003a289337fa09a8f10d.js",
        ...
    }
}</script>

The import statement in: my_app/javascript/controllers/my_controller.js

import { I18n } from "i18n-js";
console.log(I18n);

Some of the resulting failing requests, upon page load:

GET http://127.0.0.1:3000/assets/isArray.js
GET http://127.0.0.1:3000/assets/_/51cf0f3b.js
GET http://127.0.0.1:3000/assets/_/301ffe46.js
GET http://127.0.0.1:3000/assets/isObjectLike.js
GET http://127.0.0.1:3000/assets/isSymbol.js
GET http://127.0.0.1:3000/assets/_/bc38db9b.js
GET http://127.0.0.1:3000/assets/isObject.js
GET http://127.0.0.1:3000/assets/isFunction.js
GET http://127.0.0.1:3000/assets/_/e44fb5c7.js
GET http://127.0.0.1:3000/assets/_/27ce0419.js
GET http://127.0.0.1:3000/assets/_/da7e18fe.js
GET http://127.0.0.1:3000/assets/eq.js
GET http://127.0.0.1:3000/assets/_/6d2b6c8f.js
GET http://127.0.0.1:3000/assets/memoize.js
GET http://127.0.0.1:3000/assets/_stringToPath.js
GET http://127.0.0.1:3000/assets/_arrayMap.js
GET http://127.0.0.1:3000/assets/_/5bbd3627.js
GET http://127.0.0.1:3000/assets/toString.js
GET http://127.0.0.1:3000/assets/_toKey.js
GET http://127.0.0.1:3000/assets/isArguments.js
GET http://127.0.0.1:3000/assets/isLength.js
GET http://127.0.0.1:3000/assets/_/25787e84.js
GET http://127.0.0.1:3000/assets/_/db1f5abb.js

Let's take a look at the 1st failing request (line 1):

GET http://127.0.0.1:3000/assets/isArray.js

The request that has lead to this error shows: Lodash's _.has is the origin

http://127.0.0.1:3000/assets/lodash--has-64e2b530099782a9245954fc3d0686a0435d5a4e36731b4487e53afa61487b41.js

This .js file contains "problematic" import statements such as...

import"./isArray.js";

...as you can see in the full code:

import"./isArray.js";import"./_/51cf0f3b.js";import"./_/301ffe46.js";import"./isObjectLike.js";import"./isSymbol.js";import"./_/bc38db9b.js";import"./isObject.js";import"./isFunction.js";import"./_/e44fb5c7.js";import"./_/27ce0419.js";import"./_/da7e18fe.js";import"./eq.js";import"./_/6d2b6c8f.js";import"./memoize.js";import"./_stringToPath.js";import"./_arrayMap.js";import"./_/5bbd3627.js";import"./toString.js";import"./_toKey.js";import"./isArguments.js";import"./isLength.js";import"./_/25787e84.js";import{_ as r}from"./_/db1f5abb.js";var t={};var s=Object.prototype;var i=s.hasOwnProperty;
//...

Software:

fnando commented 1 year ago

Did you take a look at this issue to see if something similar works for you?

https://github.com/fnando/i18n/issues/42

john-999 commented 1 year ago

Thanks for your reply.

Unfortunately, using the lodash-es package does not seem to work - I get the error message:

[...] TypeError: The specifier “lodash/get” was a bare specifier, but was not remapped to anything. Relative module specifiers must start with “./”, “../” or “/”.

However, my importmap script (which is always automatically generated by Rails) looks different from your example mentioned in #42:

<script type="importmap" data-turbo-track="reload">
  {
    "imports": {
      //...

      "i18n-js": "/assets/i18n-js-04b620e607b4a8fc4d369deb77ddaca4c314ff3f5b113425aa02a5463c0f2a03.js",
      "bignumber.js": "/assets/bignumber.js-da37e3c473288a78d1c8f160c092a279052ebe856db1dcafe6e3d6d1b5afa239.js",
      "lodash-es": "/assets/lodash-es-fe5434385acd06b4eed1fc708a6829d14f2a04a5586277d17c2fb7c39376efa4.js",
      "make-plural": "/assets/make-plural-2d052f6889f01180b0da040eb353fe7f921e763196a1003a289337fa09a8f10d.js",

      //...
    }
  }
</script>
fnando commented 1 year ago

An example of using i18n-js with importmaps (through esm.sh): https://codepen.io/fnando/pen/WNKejpx