question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

You are passing an undefined module! Please check the object you are passing to i18next.use()

See original GitHub issue

🐛 Bug Report

I followed the usage example files i18n with jest. I created the mock file, included in moduleNameMapper, but when I go to test a component that uses i18n, I get this error: You are passing an undefined module! Please check the object you are passing to i18next.use()

Captura de Tela 2022-10-27 às 12 31 14

To Reproduce

/src/test/__mocks__/react-i18next.js:

const React = require('react');
const reactI18next = require('react-i18next');

const hasChildren = node => node && (node.children || (node.props && node.props.children));

const getChildren = node =>
  node && node.children ? node.children : node.props && node.props.children;

const renderNodes = reactNodes => {
  if (typeof reactNodes === 'string') {
    return reactNodes;
  }

  return Object.keys(reactNodes).map((key, i) => {
    const child = reactNodes[key];
    const isElement = React.isValidElement(child);

    if (typeof child === 'string') {
      return child;
    }
    if (hasChildren(child)) {
      const inner = renderNodes(getChildren(child));
      return React.cloneElement(child, { ...child.props, key: i }, inner);
    }
    if (typeof child === 'object' && !isElement) {
      return Object.keys(child).reduce((str, childKey) => `${str}${child[childKey]}`, '');
    }

    return child;
  });
};

const useMock = [k => k, {}];
useMock.t = k => k;
useMock.i18n = {};

module.exports = {
  // this mock makes sure any components using the translate HoC receive the t function as a prop
  withTranslation: () => Component => props => <Component t={k => k} {...props} />,
  Trans: ({ children }) =>
    Array.isArray(children) ? renderNodes(children) : renderNodes([children]),
  Translation: ({ children }) => children(k => k, { i18n: {} }),
  useTranslation: () => useMock,

  // mock if needed
  I18nextProvider: reactI18next.I18nextProvider,
  initReactI18next: reactI18next.initReactI18next,
  setDefaults: reactI18next.setDefaults,
  getDefaults: reactI18next.getDefaults,
  setI18n: reactI18next.setI18n,
  getI18n: reactI18next.getI18n,
};

jest.config.js

moduleNameMapper: {
    'react-i18next': '<rootDir>/src/test/__mocks__/react-i18next.js',
  },

Your Environment

  • node: v16.14.2
  • i18next version: ^21.6.16
  • os: Mac
  • react: 18.1.0
  • next: 12.1.6

Issue Analytics

  • State:closed
  • Created a year ago
  • Comments:18 (9 by maintainers)

github_iconTop GitHub Comments

1reaction
adraicommented, Oct 27, 2022

can you console.log initReactI18next

0reactions
adraicommented, Dec 16, 2022

@dashcraft like said, I was and am not able to reproduce that issue in my test setups… that’s why I ask for a minimal reproducible example… a small repository or similar. 🤷‍♂️

Read more comments on GitHub >

github_iconTop Results From Across the Web

Error with i18n (Error: You are passing an undefined module ...
It seems to have been called reactI18nextModule in an earlier version of react-i18next which is why you can find tutorials using it.
Read more >
Error With I18N (Error: You Are Passing An ... - ADocLib
Please Check The Object You Are Passing To I18Next.Use()). The syntax for the nested i18n object comes from NextJs directly. Note: nextConfigDir should...
Read more >
Testing - react-i18next documentation
For testing purpose of your component you should export the pure component without ... In the test, test the myComponent export passing a...
Read more >
API - i18next documentation
You can create additional instances using the createInstance function. ... in the t function override the languages or namespaces by passing them in...
Read more >
Step by step guide - react-i18next documentation
We expect you to have an existing react application supporting hooks (at least ... The interesting part here is by i18n.use(initReactI18next) we pass...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found