Cannot find module 'next-image-export-optimizer' from '...'

[joeplaa]

I have a component which imports this library. Everything renders perfectly in development and production mode in the browser. However, when I run Jest, it cannot find this module.

 FAIL  src/components/ImageTest.test.tsx
  ● Test suite failed to run

    Cannot find module 'next-image-export-optimizer' from 'src/components/ImageTest.tsx'

    Require stack:
      src/components/ImageTest.tsx
      src/components/ImageTest.test.tsx

    > 1 | import ExportedImage from 'next-image-export-optimizer';

I created a codesandox (https://codesandbox.io/s/wizardly-haibt-lt8ewy?file=/package.json) and narrowed it down to the version of Next. With 13.3.0 everything works fine. When using >13.4.0 the error pops up.

Edit: And obviously as soon as I posted this and refreshed the codesandbox, the example works. I still have the issue in my application though irrespective of Next version.

Edit 2: So far I tried:

• creating minimal example (see codesandbox) and extending to my config --> cannot reproduce the error
• changing from babel-jest to ts-jest in my project --> same error
• adding next-image-export-optimizer to transformIgnorePatterns in my project --> same error

Any ideas where to look or what to try next?

[Niels-IO]

Hi @joeplaa,

Thanks for the bug report. I just found time to have a look at this.

I am also a bit clueless so I asked Github CopilotX: This can happen if Jest is not configured to handle ES modules properly.

To fix this issue, you can try adding the esModuleInterop and allowSyntheticDefaultImports options to your Jest configuration in jest.config.js. Here's an example:

module.exports = {
  // other Jest configuration options
  transform: {
    '^.+\\.(js|jsx|ts|tsx)$': 'babel-jest',
  },
  globals: {
    'ts-jest': {
      tsconfig: 'tsconfig.json',
      diagnostics: false,
    },
  },
  moduleNameMapper: {
    '\\.(css|less|scss|sass)$': 'identity-obj-proxy',
  },
  testEnvironment: 'jsdom',
  setupFilesAfterEnv: ['<rootDir>/setupTests.ts'],
  // add these options
  globals: {
    'ts-jest': {
      esModuleInterop: true,
      allowSyntheticDefaultImports: true,
    },
  },
};

[joeplaa]

Hi @Niels-IO,

I already have both of those options in my ts-config.json. Even after adding them in the globals section of jest config I still get the error.

// ts-config.json
{
    "compilerOptions": {
        "allowJs": true,
        "allowSyntheticDefaultImports": true,
        "checkJs": true,
        "esModuleInterop": true,
        "forceConsistentCasingInFileNames": true,
        "isolatedModules": true,
        "jsx": "preserve",
        "lib": [
            "DOM",
            "DOM.Iterable",
            "ES6",
            "ESNext"
        ],
        "module": "ESNext",
        "moduleResolution": "node",
        "noEmit": true,
        "noImplicitAny": true,
        "noImplicitThis": true,
        "resolveJsonModule": true,
        "skipLibCheck": true,
        "strict": true,
        "strictNullChecks": true,
        "target": "ES5",
        "types": [
            "jest",
            "jest-extended",
            "@testing-library/jest-dom"
        ],
        "incremental": true,
        "typeRoots": [
            "./node_modules/@types",
            "src/typings"
        ]
    },
    "exclude": [
        ".next",
        "coverage",
        "node_modules",
        "out"
    ],
    "include": [
        "**/*.d.ts",
        "**/*.ts",
        "**/*.tsx"
    ]
}

This is my jest config:

{
    collectCoverageFrom: [
        '**/*.{js,jsx,ts,tsx}',
        '!**/*.d.ts',
        '!**/node_modules/**',
        '!**/.next/**',
        '!**/coverage/**'
    ],
    coverageReporters: ['teamcity', 'lcov'],
    globals: {
        'ts-jest': {
            tsconfig: 'tsconfig.json',
            diagnostics: false
        }
    },
    moduleNameMapper: {
        // Handle CSS imports (with CSS modules)
        // https://jestjs.io/docs/webpack#mocking-css-modules
        '^.+\\.module\\.(css|sass|scss)$': 'identity-obj-proxy',

        // Handle CSS imports (without CSS modules)
        '^.+\\.(css|sass|scss)$': '<rootDir>/node_modules/@jodibooks/libreact/__mocks__/styleMock.js',

        // Handle image imports
        // https://jestjs.io/docs/webpack#handling-static-assets
        '^.+\\.(jpg|jpeg|png|gif|webp|avif|svg)$': '<rootDir>/node_modules/@jodibooks/libreact/__mocks__/fileMock.js'
    },
    reporters: ['default', 'jest-teamcity'],
    setupFiles: ['<rootDir>/.jest/setEnvVars.js'], // https://stackoverflow.com/a/58953365,
    setupFilesAfterEnv: [
        '<rootDir>/.jest/jest.setup.ts',
        '<rootDir>/.jest/fetchmock.jest.setup.ts',
        'jest-extended/all'
    ],
    testEnvironment: 'jsdom',
    testPathIgnorePatterns: [
        '<rootDir>/.jest/',
        '<rootDir>/.next/',
        '<rootDir>/.vscode/',
        '<rootDir>/.yarn/',
        '<rootDir>/coverage/',
        '<rootDir>/lib/',
        '<rootDir>/node_modules/',
        '<rootDir>/out/'
    ],
    transform: {
        '^.+\\.(js|jsx|ts|tsx)$': ['babel-jest', { presets: ['next/babel'] }]
    },
    transformIgnorePatterns: [
        '/lib/',
        '/node_modules/',
        '^.+\\.module\\.(css|sass|scss)$'
    ]
}

[Niels-IO]

Could be related to https://github.com/vercel/next.js/issues/50486. @joeplaa Can you try to go back to version 13.3.1 of Next.js and try again?

[joeplaa]

@Niels-IO thanks for delving into it. I downgraded Next.js (I tried 13.3, 13.2, 13.1 13.0), but all still gave the same error.

[Samcbehrens]

Hello, I am also getting the same error. I am using next 12.3.4. I have also added the changes to esModuleInterop and allowSyntheticDefaultImports and like @joeplaa, I still had the same error.

[vitorpdasilva]

same error here

[esantosrvolvo]

I think this is related to vercel/next.js#40183. I am experiencing it even though I have transpilePackages: ["next-image-export-optimizer"] in next.config.js. Steps to reproduce:

1. Create a simple NextJS app with Jest using the example in the quickstart guide: npx create-next-app@latest --example with-jest with-jest-app
2. Configure this library and add an image to the page pages/index.tsx
3. Run the tests yarn test:ci

Output:

 FAIL  __tests__/index.test.tsx
  ● Test suite failed to run

    Cannot find module 'next-image-export-optimizer' from 'pages/index.tsx'

    Require stack:
      pages/index.tsx
      __tests__/index.test.tsx
...
...

[Niels-IO]

Hi @esantosrvolvo,

Thank you very much for this reproduction. It helped me to address the issue. It should be fixed in the latest version. If you have time to confirm it, I would appreciate it!

[Niels-IO]

Closing, because it works in my setup