Js-lingui: Type error: Cannot compile namespaces when the '--isolatedModules' flag is provided.

[andys8]

Describe the bug
I'm trying to get started with js-lingui.

/src/locales/de/messages.js
Type error: Cannot compile namespaces when the '--isolatedModules' flag is provided.  TS1208

  > 1 | /* eslint-disable */module.exports={languageData:{"plurals":function(n,ord){var s=String(n).split("."),v0=!s[1];if(ord)return"other";return n==1&&v0?"one":"other"}},messages:{"description":"Beschreibung"}};
      |                     ^

To Reproduce
Steps to reproduce the behavior, possibly with minimal code sample, e.g:

import * as React from 'react';
import { I18nProvider } from '@lingui/react';
import { Header } from './Header';

import catalogDe from '../locales/de/messages.js';
import catalogEn from '../locales/en/messages.js';

const catalogs = {
  de: catalogDe,
  en: catalogEn,
};

export const App = () => (
  <I18nProvider language="en" catalogs={catalogs}>
      <Header /> 
  </I18nProvider>
);

export default App;

Expected behavior
Should compile

Additional context
Using create-react-app, newest version where they introduces typescript support

{
    "@babel/core": "7.1.2",
    "@lingui/react": "2.7.0",
    "@lingui/cli": "2.7.0",
    "@lingui/macro": "2.7.0",
    "@types/lingui__core": "2.1.1",
    "@types/lingui__macro": "2.7.0",
    "@types/lingui__react": "2.5.0",
    "babel-core": "7.0.0-bridge.0",
    "react-scripts": "2.1.0",
    "typescript": "3.1.4"
}

tsconfig.json

create-react-app needs isolatedModules set to true.

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["es6", "dom"],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "preserve",
    "noImplicitReturns": true,
    "noImplicitThis": true,
    "noImplicitAny": true,
    "importHelpers": true,
    "strictNullChecks": true,
    "suppressImplicitAnyIndexErrors": true,
    "noUnusedLocals": true
  },
  "exclude": [
    "node_modules",
    "build",
    "scripts",
    "acceptance-tests",
    "webpack",
    "jest",
    "src/setupTests.ts"
  ],
  "include": ["src"]
}

This issue could be related, although it is about json: https://github.com/Microsoft/TypeScript/pull/28207

I guess I've a mistake in usage or configuration or it's a beginner mistake. I appreciate the help. Thanks in advance.

[andys8]

It looks like it's only an issue with the module systems, typescript imports and my understanding.

Using require over import will fix it :+1:

const catalogDe = require('../locales/de/messages.js');
const catalogEn = require('../locales/en/messages.js');

[tricoder42]

Hey @andys8, I honestly don't know anything about Typescript, but you could also try set compileNamespace to es if it helps:

https://lingui.js.org/ref/conf.html#compilenamespace

[andys8]

Wow, cool, missed that option. "es" will work with import. Can we add it to the typescript part of the documentation? https://lingui.js.org/guides/typescript.html#webpack-setup

[tricoder42]

Absolutely! Could you please create a PR?

[andys8]

Created PR #378. Created another (minor) one for the same chapter before (https://github.com/lingui/js-lingui/pull/376), when you're already looking at it ;)