Cannot find module '@lingui/message-utils/compileMessage'

[niksauer]

Describe the bug

  ● Test suite failed to run

    Cannot find module '@lingui/message-utils/compileMessage' from 'node_modules/@lingui/core/dist/index.cjs'

    Require stack:
      node_modules/@lingui/core/dist/index.cjs
      src/components/providers/LocaleProvider.tsx
      src/global.ts
      src/setupTests.ts

      at Resolver.resolveModule (node_modules/jest-resolve/build/resolver.js:324:11)
      at Object.<anonymous> (node_modules/@lingui/core/dist/index.cjs:3:24)

To Reproduce

  "scripts": {
    "start": "yarn task:trans-compile && react-scripts start",
    "build": "yarn task:trans-compile && react-scripts build",
    "test": "yarn task:trans-compile && react-scripts test",
    [...]
  }

// LocaleProvider.tsx
import { i18n } from '@lingui/core';
[...]

yarn test

Additional context

• jsLingui version: 4.0.0
• Babel version: 7.16.7
• CRA version: 5.0.1

[TheUltDev]

Getting this error too for React Native.
Copying the files in message-utils/dist to message-utils one level up fixes it.
I'm guessing our setups aren't respecting the exports in package.json?

Further debugging shows that was the problem, for RN here is the issue, it's already caused problems with this library before:
Issue: facebook/metro#670
Related Issue: #1347

For your issue, I'd recommend migrating to Vite, it's working for me there.
For RN users, it should be fixed in 0.72, and the below resolver patch should hold you over until then:

module.exports = {
  resolver: {
    resolveRequest: (context, moduleName, platform) => {
      if (moduleName.startsWith('@lingui/message-utils'))
        moduleName = moduleName.replace('@lingui/message-utils/', '@lingui/message-utils/dist/');
      return context.resolveRequest(context, moduleName, platform);
    },
  },
}

[andrii-bodnar]

The message-utils package has the following in its package.json:

"exports": {
  "./generateMessageId": {
    "import": "./dist/generateMessageId.mjs",
    "require": "./dist/generateMessageId.cjs",
    "types": "./dist/generateMessageId.d.ts"
  },
  "./compileMessage": {
    "import": "./dist/compileMessage.mjs",
    "require": "./dist/compileMessage.cjs",
    "types": "./dist/compileMessage.d.ts"
  }
},

It seems like your current setup doesn't respect the exports field indeed (as @TheUltDev said)

[davakos]

I am observing this same issue that manifested after upgrading to lingui 4.0 when running tests against a (non-Native) React app. Hoping some of this information may be useful.

My environment also uses create-react-app to configure the jest test runner.

Versions:

@testing-library/react@14.0.0
@testing-library/jest-dom@5.16.5
jest@27.5.1 (via react-scripts@5.0.1)
@babel/core@7.21.8

The error does not occur running the app (via npm start or npm build), only when running tests.
I have a test wrapper that wraps rendered components with all necessary providers, i.e.,:
https://testing-library.com/docs/react-testing-library/setup#custom-render

import { i18n } from "@lingui/core";  // <== error occurs at this import
import { I18nProvider } from "@lingui/react";
import { messages as enMessages } from "locale/en/messages";
...

const AllTheProviders = ({children}) => {
	const locale = "en"
	i18n.load(locale, enMessages)
	i18n.activate(locale)

	return (
	  <I18nProvider i18n={i18n}>
            {children}
	  </I18nProvider>
	)
}

...

Changing all lingui ES6 imports throughout the app (i18n, t, etc.) to CJS require appears to resolve the error, but is not a great solution.

Below is my lingui config:

{
	"catalogs": [
		{
			"path": "<rootDir>/src/locale/{locale}/messages",
			"include": [
				"<rootDir>/src"
			],
			"exclude": [
				"**/node_modules/**"
			]
		}
	],
	"locales": ["en"],
	"format": "po",
	"sourceLocale": "en",
	"compileNamespace": "cjs",
	"orderBy": "messageId",
	"runtimeConfigModule": ["@lingui/core", "i18n"]
}

I've also tried modifying compileNamespace to test es or ts instead of cjs, but this doesn't make any difference with this error.

[renchap]

For React Native users, I can confirm this is caused by Metro not supporting the exports field (should be supported in RN 0.72, released in a couple of weeks).

In the meantime, patching your Metro config as @TheUltDev showed above works fine.

If you are using @rnx-kit/metro-resolver-symlinks, you can use this:

{
  resolver: {
     resolveRequest: MetroSymlinksResolver({
        remapModule: (_context, moduleName, _platform) => {
          if (moduleName.startsWith("@lingui/message-utils"))
            return moduleName.replace(
              "@lingui/message-utils/",
              "@lingui/message-utils/dist/",
            )
          else return moduleName
        },
      }),
  }
}

[wkerswell]

I managed to resolve this issue by adding the paths to the jest module mapper.

moduleNameMapper: {
    ...
    '@lingui/message-utils/compileMessage': '@lingui/message-utils/dist/compileMessage.cjs',
    '@lingui/message-utils/generateMessageId': '@lingui/message-utils/dist/generateMessageId.cjs',
  },

[timofei-iatsenko]

@wkerswell what version of jest you using? AFAIK since Jest 28 exports should be supported out of the box.

[wkerswell]

I am using Create react app, so it could well be using an earlier version. Will take a look and see if upgrading helps

jest/core@^27.5.1 looking at the lock file

[timofei-iatsenko]

Yes, CRA uses an ancient version of Jest, there are few pull request bumping it to 28 and 29, none of them are merged yet (

[timofei-iatsenko]

i've prepared a workaround addressing this issue https://github.com/lingui/js-lingui/pull/1650/files

[timofei-iatsenko]

The workaround is published as https://github.com/lingui/js-lingui/releases/tag/v4.1.0

Please check, does it resolve the issue?

[davakos]

@thekip Thank you for providing this workaround.

I checked v4.1.0 and, at least in my usage, it produces another error when I remove the jest moduleNameMapper paths to the cjs files for compileMessage and generateMessageId:

TypeError: compileMessage.compileMessage is not a function

The error points to a line using t from @lingui/macro, e.g.,

import { t } from "@lingui/macro";

export const severities = {
	error: t`error`,   <== indicates error here
	info: t`info`,
	success: t`success`,
	warning: t`warning`,
};

this is being imported for use in a React functional component, e.g.,

import { useLingui } from "@lingui/react";
import { severities } from "./severities";

const AnotherComponent = () => {
    const { i18n } = useLingui();
    return <Component severity={i18n._(severities.error)} />
}

• There are no errors when jest moduleNameMapper paths are defined.
• There are no errors when running the app via npm start or npm build ...
• Errors only occur when running tests, react-scripts test

[davakos]

@thekip lingui v4.1.1 fixed the issue for me. thank you!