Cannot convert undefined or null to object

[rtrembecky]

Hi!
I'm very surprised this barrel files problem is being fixed only now, but rather later than never... However, I encounter multiple issues. Seeing you're active on the issues here and fix the bugs fairly quickly, I have high hopes it could help us on a project.

Let me start with the first issue I encountered: TypeError: /Users/richard/repos/xxx/node_modules/@react-native-google-signin/google-signin/jest/build/jest/setup.js: Cannot convert undefined or null to object

I "solved" this by skipping node_modules in babelTransform.js:

      plugins: sourcePath.includes('node_modules')
        ? []
        : [
            [
              'transform-barrels',
              {
                executorName: 'jest',
                alias: alias,
                extensions: extensions,
                logging: { type: 'screen' },
              },
            ],
          ],

Note: babel-jest-boost as your counterpart has ignoreNodeModules option: https://github.com/gtsop/babel-jest-boost?tab=readme-ov-file#ignorenodemodules-boolean
It would be cool to see something similar here eventually.

However, it just allowed babel-jest to process more files, only to quickly crash again: TypeError: /Users/richard/repos/xxx/test-setup.mobile.tsx: Cannot convert undefined or null to object

Short stacktrace:

      at Function.createASTJestMockCallFunction (../../node_modules/babel-plugin-transform-barrels/src/ast.js:62:30)
      at PluginPass.call (../../node_modules/babel-plugin-transform-barrels/src/main.js:53:36)
      at call (../../node_modules/@babel/traverse/src/visitors.ts:303:14)

Logs:

2024-11-05 19:34:11 - Processed Javascript file: /Users/richard/repos/xxx/test-setup.mobile.tsx
2024-11-05 19:34:11 - Source import line: import mockSafeAreaContext from 'react-native-safe-area-context/jest/mock';

Isolated minimal crashing file:

//@ts-expect-error not typed
import mockSafeAreaContext from 'react-native-safe-area-context/jest/mock';

jest.mock('react-native-safe-area-context', () => mockSafeAreaContext);

This is the suggested way to mock this package: https://github.com/th3rdwave/react-native-safe-area-context?tab=readme-ov-file#testing
I've also tried commenting these lines out, only to have it fail on other similar code. This is also mocked as of package guide:

jest.mock(
  'react-native-fbsdk-next',
  // eslint-disable-next-line @typescript-eslint/no-var-requires
  () => require('react-native-fbsdk-next/jest/mocks').default
);

Looking here, as of the stacktrace, the specifiersByModule is undefined: https://github.com/FogelAI/babel-plugin-transform-barrels/blob/main/src/ast.js#L62
I provided empty object {} as the default in your code. Moving on...

Whether I make the above adjustment or I comment out the problematic lines, I get to: TypeError: /Users/richard/repos/xxx/apps/mobile-expo/src/components/AppLoad.spec.tsx: Cannot read properties of undefined (reading 'absEsmFile'

Stacktrace:

      at PluginPass.call (../../node_modules/babel-plugin-transform-barrels/src/main.js:19:79)
      at call (../../node_modules/@babel/traverse/src/visitors.ts:303:14)
      at NodePath.call [as _call] (../../node_modules/@babel/traverse/src/path/context.ts:36:20)

We are using Nx monorepo and in jest.config.ts we have resolver: '@nx/jest/plugins/resolver' defined. I just quickly debugged your resolver, the arguments for const absolutePath = PathFunctions.getAbsolutePath(originalPath, fromDir, this.modulesDirs) are @xxx/mobile/core, /Users/richard/repos/xxx/apps/mobile-expo/src/components, [ 'node_modules' ], the absolute path returned is null. Not sure if this has something to do with path aliases and whether there should be a way to combine the resolvers, or I just need to make manually sure the aliases are provided...

That's it for now. Any help? Can you make the code type-safer, so e.g. absEsmFile is never accessed on null object, also regarding the undefined specifiersByModule before? And advice on the resolver issue?

[FogelAI]

Hi @rtrembecky

Most of the errors you encountered are because you're using React Native, which I hadn't tested before. I've now tested your issues and successfully fixed them.

1. To fix the Jest mock issue, I've made a new commit on GitHub that addresses the bug. Before I publish a new version, please manually copy the plugin from GitHub to your project and let me know if it resolves the issue. If it works, I'll go ahead and release a new version.
2. To address most of your issues, you'll need to follow the changes I've made in the babelTransform.js file.

Could you explain why you think I should add an ignoreNodeModules option? I believe enabling it would cause you to lose many of the plugin's advantages. However, if I see that it's necessary, I'll consider adding it.

I'll also work on making the code type-safer in future versions.
Let me know if the changes helped or if you encounter any new issues.

Thanks!

[rtrembecky]

@FogelAI thanks! will try tomorrow and let you know.

As for the ignoreNodeModules option - it's just about the easier/gradual rollout of the plugin. As we see, there are still errors to be fixed for different code, so the chance that the plugin won't work doubles with it being enabled for node_modules. When something crashes while integrating this plugin, I think the first reasonable thing to try is to actually skip node_modules and see if it fails on our own code.
However, as I'm able to do this in babelTransform.js, it's not that important. I just imagine it could help people a bit.

[rtrembecky]

@FogelAI hi, I tried the latest package version and the babelTransform.js changes from main branch - no luck. It doesn't seem to be related to RN at all, the mocked libs don't provide any ios/android-specific files, it's just JS...

I proceeded to test on our non-RN web code, standard (next.js/react stuff) - the plugin still fails, though now with TypeError: /Users/richard/repos/xxx/test-setup.ts: Cannot read properties of undefined (reading 'get'). This may be a different error, but we could have a look...

Problem 1: test-setup.ts: Cannot read properties of undefined (reading 'get')

Start of the stacktrace:

      at PluginPass.call (../../../node_modules/babel-plugin-transform-barrels/src/main.js:49:66)
      at call (../../../node_modules/@babel/core/node_modules/@babel/traverse/src/visitors.ts:304:14)
      at NodePath._call (../../../node_modules/@babel/core/node_modules/@babel/traverse/src/path/context.ts:35:20)

It's this call:

directImports = jestMockFunction.getDirectImports(barrelFile).get(modulePath);

Added logging:

// node_modules/babel-plugin-transform-barrels/src/executorConfig.js:184
    getDirectImports(barrelFile) {
      console.log('getDirectImports', barrelFile);
// :191
        const directModulePath = importSpecifier.path;
        console.log('getDirectImports loop', specifier, importSpecifier);

Logs before crash:

2024-11-13 13:47:30 - Processed Javascript file: /Users/richard/repos/xxx/libs/web/core/setupTests.ts
2024-11-13 13:47:30 - Processed Javascript file: /Users/richard/repos/xxx/test-setup.ts
2024-11-13 13:47:30 - Source import line: import { act } from '@testing-library/react';
2024-11-13 13:47:30 - Source import line: import { configMocks } from 'jsdom-testing-mocks';
getDirectImports BarrelFile {
  path: '/Users/richard/repos/xxx/node_modules/next-i18next/dist/esm/index.js',
  exportMapping: {
    I18nContext: ExportSpecifier {
      esmPath: '/Users/richard/repos/xxx/node_modules/react-i18next/dist/es/index.js',
      type: 'named',
      localName: 'I18nContext',
      exportedName: 'I18nContext'
    },
    Trans: ExportSpecifier {
      esmPath: '/Users/richard/repos/xxx/node_modules/react-i18next/dist/es/index.js',
      type: 'named',
      localName: 'Trans',
      exportedName: 'Trans'
    },
    Translation: ExportSpecifier {
      esmPath: '/Users/richard/repos/xxx/node_modules/react-i18next/dist/es/index.js',
      type: 'named',
      localName: 'Translation',
      exportedName: 'Translation'
    },
    useTranslation: ExportSpecifier {
      esmPath: '/Users/richard/repos/xxx/node_modules/react-i18next/dist/es/index.js',
      type: 'named',
      localName: 'useTranslation',
      exportedName: 'useTranslation'
    },
    withTranslation: ExportSpecifier {
      esmPath: '/Users/richard/repos/xxx/node_modules/react-i18next/dist/es/index.js',
      type: 'named',
      localName: 'withTranslation',
      exportedName: 'withTranslation'
    },
    appWithTranslation: ExportSpecifier {
      esmPath: '/Users/richard/repos/xxx/node_modules/next-i18next/dist/esm/appWithTranslation.js',
      type: 'named',
      localName: 'appWithTranslation',
      exportedName: 'appWithTranslation'
    },
    i18n: ExportSpecifier {
      esmPath: '/Users/richard/repos/xxx/node_modules/next-i18next/dist/esm/appWithTranslation.js',
      type: 'named',
      localName: 'globalI18n',
      exportedName: 'i18n'
    }
  },
  defaultPatternExport: DefaultPatternExport {
    esmPath: '',
    type: '',
    localName: '',
    exportedName: '',
    isDefaultPatternCreated: true
  }
}
getDirectImports loop Node {
  type: 'SpreadElement',
  start: 782,
  end: 819,
  loc: SourceLocation {
    start: Position { line: 28, column: 2, index: 782 },
    end: Position { line: 28, column: 39, index: 819 },
    filename: undefined,
    identifierName: undefined
  },
  argument: Node {
    type: 'CallExpression',
    start: 785,
    end: 819,
    loc: SourceLocation {
      start: [Position],
      end: [Position],
      filename: undefined,
      identifierName: undefined
    },
    callee: Node {
      type: 'MemberExpression',
      start: 785,
      end: 803,
      loc: [SourceLocation],
      object: [Node],
      computed: false,
      property: [Node],
      leadingComments: undefined,
      innerComments: undefined,
      trailingComments: undefined
    },
    arguments: [ [Node] ],
    leadingComments: undefined,
    innerComments: undefined,
    trailingComments: undefined
  },
  leadingComments: undefined,
  innerComments: undefined,
  trailingComments: undefined
} ImportSpecifier {
  esmPath: '',
  type: '',
  localName: '',
  importedName: ''
}

^ The importSpecified.path doesn't exist, so undefined is returned from getDirectImports, hence the TypeError. (wink wink type safety 😄)

The problematic mock in question:

jest.mock('next-i18next', () => ({
  ...jest.requireActual('next-i18next'),
  useTranslation: () => ({
    t: (key: string, args: unknown) => {
      if (args != null) {
        const keys = Object.keys(args);

        if (keys.length >= 1 && keys[0] !== 'ns') {
          return `${key} - ${JSON.stringify(args)}`;
        }
      }

      return key;
    },
    i18n: {
      language: 'en-US',
    },
  }),
}));

Problem 2: test-setup.ts: Cannot read properties of undefined (reading 'absEsmFile')

When I comment the mock out from out test-setup.ts and run the test again, I'm back to the previous absEsmFile error.

Stacktrace:

      at PluginPass.call (../../../node_modules/babel-plugin-transform-barrels/src/main.js:45:67)
      at call (../../../node_modules/@babel/core/node_modules/@babel/traverse/src/visitors.ts:304:14)
      at NodePath._call (../../../node_modules/@babel/core/node_modules/@babel/traverse/src/path/context.ts:35:20)

As I mentioned previously, it crashes because the resolver can't resolve the path (e.g. @xxx/web/contexts/useLayoutContext/LayoutProvider). I've made this adjustment to fall back to the resolver we use in jest config:

// node_modules/babel-plugin-transform-barrels/src/resolver.js:49
    resolve(path, from) {
        const originalPath = PathFunctions.isRegularPath(path) ? path : this.convertAliasToOriginal(path);
        const fromDir = ospath.dirname(from);
        let absolutePath = PathFunctions.getAbsolutePath(originalPath, fromDir, this.modulesDirs);
        if (!absolutePath) absolutePath = require("@nx/jest/plugins/resolver")(path, {
          basedir: fromDir,
          rootDir: '/Users/richard/repos/xxx/libs/web/core'
        });
        if (!absolutePath) return;

Here I would appreciate an option to pass the resolver into the plugin config, if not somehow read it from the jest config by default... The nx resolver automatically reads the typescript config and figures out the aliases, so it doesn't make sense to define the aliases manually.

Problem 3:testing.tsx: Cannot read properties of null (reading 'toLowerCase')

Again, more files were processed, failing further on another TypeError ^.

Stacktrace:

      at Function.isBarrelFilename (../../../node_modules/babel-plugin-transform-barrels/src/barrel.js:83:40)
      at Function.getBarrelFile (../../../node_modules/babel-plugin-transform-barrels/src/barrel.js:375:21)
      at PluginPass.call (../../../node_modules/babel-plugin-transform-barrels/src/main.js:20:46)

Relevant logs:

2024-11-13 15:07:34 - Source import line: import { MockedProvider } from '@apollo/client/testing';
entryPath ResolvedPath {
  originalPath: '@apollo/client/testing',
  absEsmFile: null,
  absCjsFile: '',
  packageJsonExports: false
}

This is the entryPath returned object from this.getFilePathFromPackageJson(absolutePath, originalPath) called as this.getFilePathFromPackageJson('/Users/richard/repos/xxx/node_modules/@apollo/client/testing', '@apollo/client/testing').

I'm not going to look deeper today. Let me know if I can help further, but I hope I provided a lot of useful info.

[FogelAI]

Hi @rtrembecky
Thanks for your detailed explanations.
I'm going to check it now.
Which operating system are you using?
For now, jest.mock with next-i18next is working for me... Before running the tests, did you run npx jest --clearCache?

[rtrembecky]

The platform is macOS, I'm on M1 Max.
I'm always running the test via npx jest <test_path> --silent --no-cache, so cache shouldn't be an issue.

[FogelAI]

Hi @rtrembecky

Problem 1

The logs before the crash don't need to look like this. For me, it shows different logs. :/
Below, I show you the repo that I tried.

Anyway, before line 45: const moduleAbsPath = resolver.resolve(modulePath ,parsedJSFile).absEsmFile; add the line console.log(resolver.resolve(modulePath ,parsedJSFile)). I want to see the value of packageJsonExports.

Regarding importSpecified.path, it is a getter, which is why it does not appear in the console.log. But I get your point ;-) I will make it type-safe.

I have created a new repository for problem 1 (for now) that works for me with jest.mock using next-i18next as an argument. Please try running npm run test in this repo.

After we resolve the first problem, I will check the other ones because I am not sure if the error depends on the plugin.

[rtrembecky]

thanks for the repo, I was thinking about putting effort to create one as well.. I'll try it. and thanks very much for the willingness to work on this, it's often hard to come by.

Problem 2 is definitely something to look at though, I think your resolver is relying on the passed-in alias but we have a jest resolver handling aliases automatically.

[rtrembecky]

logs when added suggested console.log:

2024-11-15 11:11:55 - Processed Javascript file: /Users/richard/repos/xxx/libs/web/core/setupTests.ts
2024-11-15 11:11:55 - Processed Javascript file: /Users/richard/repos/xxx/test-setup.ts
2024-11-15 11:11:55 - Source import line: import { act } from '@testing-library/react';
2024-11-15 11:11:55 - Source import line: import { configMocks } from 'jsdom-testing-mocks';
ResolvedPath {
  originalPath: './libs/web/core/src/utils/client-logger',
  absEsmFile: '/Users/richard/repos/xxx/libs/web/core/src/utils/client-logger/index.ts',
  absCjsFile: '',
  packageJsonExports: false
}
ResolvedPath {
  originalPath: 'react-lottie',
  absEsmFile: '',
  absCjsFile: '/Users/richard/repos/xxx/node_modules/react-lottie/dist/index.js',
  packageJsonExports: false
}
ResolvedPath {
  originalPath: 'next-i18next',
  absEsmFile: '/Users/richard/repos/xxx/node_modules/next-i18next/dist/esm/index.js',
  absCjsFile: '/Users/richard/repos/xxx/node_modules/next-i18next/dist/commonjs/index.js',
  packageJsonExports: false
}

[FogelAI]

I got a different output for react-i18next. What version of react-i18next are you using?

[rtrembecky]

running npm run test in your repo works. However, your jest.setup.ts doesn't include my mock, or mock of next-18next - you have react-18next there.

these changes make the test fail in your repo as well:

// cli
npm i next-18next
// interfaces/correctOne.tsx
commented out the `react-18next` usage
// jest.setup.ts
swapped react-i18next mock for:
1.
jest.mock("next-i18next", () => ({
  ...jest.requireActual("next-i18next"),
}));
2.
jest.mock("next-i18next");

in 1., I get:
TypeError: /Users/richard/repos/babel-plugin-transform-barrels-issue8/jest.setup.ts: Cannot read properties of undefined (reading 'get')
in 2., I get:
TypeError: /Users/richard/repos/babel-plugin-transform-barrels-issue8/jest.setup.ts: Cannot convert undefined or null to object

[FogelAI]

Ok ok, sorry, you're right :) I see now that there are two packages in your logs from earlier: react-i18next and next-i18next. I will check it and let you know.

[rtrembecky]

heya, any news? right now I'm actually thinking about removing the barrels files from our codebase in general, I'm convinced it also affects other tools beside jest, e.g. TypeScript in VSCode. many articles about barrel files being a general evil: https://marvinh.dev/blog/speeding-up-javascript-ecosystem-part-7/

I think, as we're transpiling React Native node_modules in tests (because they ship with Flow types), that this plugin will still be helpful though, for such third-party code. so I'd definitely like to see this through

[FogelAI]

Hi @rtrembecky

Today or tomorrow, I will publish a new version with a fix for your first problem. This version will also include some other fixes.

You can't get rid of barrel files. You still need a solution for barrel files in third-party packages since they use them as an API.

Barrel files are effectively an API. A specific interface that distinguishes private vs public code.

I had a lot of troubles with strange behaviors caused by barrel files, which is why I developed this plugin.

I recommend reading two of my articles about barrel files:

1. Potential issues with barrel files in Webpack
2. Potential issues with barrel files in Jest

[FogelAI]

Hi @rtrembecky

I have just released a new version of the plugin (v1.0.21).
Let me know if it solves your first problem.
I tried testing the third problem, but I didn't encounter the error. It might be fixed in this version, or it could be related to the operating system.

[FogelAI]

Hi @rtrembecky

I've updated the repo for problems 1 and 3.
It works for me without any errors.