fix: mandatory ext on @lingui/loader (#831)

Author: semoal

docs/ref/loader.rst

@@ -25,10 +25,12 @@ Usage
 Simply prepend ``@lingui/loader:`` in front of path to message catalog you want to
 import. Here's an example of dynamic import:
 
+Extension is mandatory. If you use minimal or lingui file format, use ``.json``. In case of using po format, use ``.po``.
+
 .. code-block:: jsx
 
    export async function dynamicActivate(locale: string) {
-      const { messages } = await import(`@lingui/loader!./locales/${locale}/messages.js`)
+      const { messages } = await import(`@lingui/loader!./locales/${locale}/messages.json`)
       i18n.load(locale, messages)
       i18n.activate(locale)
    }

examples/create-react-app/package.json

@@ -41,6 +41,7 @@
   },
   "devDependencies": {
     "@lingui/cli": "^3.0.0",
+    "@lingui/loader": "^3.0.0",
     "@lingui/macro": "^3.0.0"
   }
 }

examples/create-react-app/src/i18n.ts

@@ -17,7 +17,7 @@ i18n.loadLocaleData({
  * @param locale any locale string
  */
 export async function dynamicActivate(locale: string) {
-  const { messages } = await import(`./locales/${locale}/messages`)
+  const { messages } = await import(`@lingui/loader!./locales/${locale}/messages.po`)
   i18n.load(locale, messages)
   i18n.activate(locale)
 }

packages/loader/src/index.js

@@ -54,8 +54,23 @@ export default function (source) {
     cwd: path.dirname(this.resourcePath),
   })
 
+  const EMPTY_EXT = /\.[0-9a-z]+$/.test(this.resourcePath)
+  const JS_EXT = /\.js+$/.test(this.resourcePath)
+
+  const catalogRelativePath = path.relative(config.rootDir, this.resourcePath)
+
+  if (!EMPTY_EXT || JS_EXT) {
+    const formats = {
+      minimal: ".json",
+      po: ".po",
+      lingui: ".json"
+    }
+    // we replace the .js, because webpack appends automatically the .js on imports without extension
+    throw new Error(`File extension is mandatory, for ex: import("@lingui/loader!./${catalogRelativePath.replace(".js", formats[config.format])}")`)
+  }
+
   const { locale, catalog } = getCatalogForFile(
-    path.relative(config.rootDir, this.resourcePath),
+    catalogRelativePath,
     getCatalogs(config)
   )
   const catalogs = catalog.readAll()