v3.0.0 + TypeScript Cannot find module 'redux-actions' from ...

[kaelig]

The new ESM version fails to be imported by TypeScript.

Here's a reproducible comparison:

• v2.6.5: https://replit.com/@kaelig/ReduxActionsV2BugReport#index.ts
• v3.0.0: https://replit.com/@kaelig/ReduxActionsV3BugReportTS#index.ts

In the shell, run:

tsc index.ts

• v2.6.5: compiles successfully
• v3.0.0:

~/ReduxActionsV3BugReportTS$ tsc index.ts
index.ts:1:30 - error TS2307: Cannot find module 'redux-actions' or its corresponding type declarations.

1 import { createAction } from 'redux-actions';
                               ~~~~~~~~~~~~~~~

Found 1 error in index.ts:1

[alexander-heimbuch]

The applied typescript configuration still transpiles to node's require:

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var redux_actions_1 = require("redux-actions");
var myAction = (0, redux_actions_1.createAction)('MY_ACTION');

This doesn't work with the ESM only build we currently have. @timche this could be a case why a commonJS export still might have relevance.

[alexander-heimbuch]

@kaelig With this configuration it should work: https://replit.com/@alexander-heimb/ReduxActionsV3BugReportTS

v3.0.0 provides the same API as v2.6.5, so for projects that might not be able to switch to ESM this should work as well. I will close this bug but if you that doesn't solve your issue feel free to reopen it.

[kaelig]

Thank you! Simply adding the types did fix the build.

That said, for some reason our Jest + @swc/jest setup still throws the same error so I need to investigate further...

Any tips appreciated!

[alexander-heimbuch]

Hey @kaelig,
the jest error might be due to the configured jest runtime. Could you share the configuration? Btw. it just sprung to my mind that we worked for the same company (Salesforce) a while ago :D

[kaelig]

Oh, what a fun coincidence!

Here's our jest.config.js configuration:

import hq from 'alias-hq';

const ESM_NODE_MODULES = {
  '@devcycle/devcycle-js-sdk/node_modules/uuid/*': ['uuid'],
  '@storybook/addon-docs/*': ['@mdx-js/react'],
  'markdown-table': undefined,
  'node-fetch': ['data-uri-to-buffer', 'fetch-blob', 'formdata-polyfill'],
  'parse-domain': ['ip-regex', 'is-ip'],
  'react-markdown': [
    'bail',
    'decode-named-character-reference',
    'hast-util-whitespace',
    'is-plain-obj',
    'mdast-util-from-markdown',
    'mdast-util-to-hast',
    'micromark',
    'remark-rehype',
    'trim-lines',
    'trough',
    'unified',
    'unist-util-generated',
  ],
  'strip-ansi': ['ansi-regex'],
};

const ignoreESMNodeModules = (delimiter = '|') => {
  return `<rootDir>/node_modules/(?!${Object.entries(ESM_NODE_MODULES)
    .map(([key, values = []]) => [key, ...values].join(delimiter))
    .join(delimiter)})`;
};

/** @type {import('jest').Config} */
// eslint-disable-next-line import/no-anonymous-default-export
export default {
  setupFiles: ['<rootDir>/test/setup.ts', 'jest-canvas-mock'],
  setupFilesAfterEnv: ['<rootDir>/test/setupAfterEnv.ts'],
  transform: {
    '^.+\\.(t|j)sx?$': [
      '@swc/jest',
      {
        jsc: {
          parser: {
            syntax: 'typescript',
            decorators: true,
          },
          transform: {
            react: {
              runtime: 'automatic',
            },
          },
          experimental: {
            plugins: [['jest_workaround', {}]],
          },
        },
      },
    ],
  },
  transformIgnorePatterns: [ignoreESMNodeModules()],
  automock: false,
  testMatch: [
    '<rootDir>/(src|functions)/**/*.spec.[jt]s?(x)',
    '<rootDir>/*.spec.[jt]s?(x)',
  ],
  modulePaths: ['<rootDir>/src', '<rootDir>/test'],
  moduleFileExtensions: ['js', 'cjs', 'json', 'jsx', 'ts', 'tsx'],
  moduleNameMapper: {
    '\\.(css|jpg|png|webp)$': '<rootDir>/test/empty-module.cjs',
    '\\.svg$': '<rootDir>/test/svg-file-mock.ts',
    // Load path aliases from tsconfig.json
    ...hq.get('jest', { format: 'array' }),
  },
  collectCoverageFrom: [
    'src/**/*.[jt]s?(x)',
    'functions/**/*.[jt]s?(x)',
    '!**/src/**/*.stories.[jt]s?(x)',
    '!**/node_modules/**',
    '!**/.netlify/**',
    '!**/src/config/**',
    '!**/src/ampli/**',
    '!**/__generated__/**',
    '!**/*.d.ts',
  ],
  reporters: [
    'default',
    [
      'jest-junit',
      { outputDirectory: 'reports/jest', outputName: 'report.xml' },
    ],
  ],
  testEnvironment: 'jest-environment-jsdom',
  testEnvironmentOptions: {
    url: 'http://localhost/',
    resources: 'usable',
  },
};

[alexander-heimbuch]

@kaelig did you tried to add redux-actions to the ESM_NODE_MODULES? Might be worth a try.

[kaelig]

That's the first thing I tried, but sadly it didn't solve it :/

[markthiessen]

@kaelig did you solve this? Running into the same issue

[kaelig]

I haven't had time to look into this dependency upgrade. Since 3.0.0 doesn't bring any new features, I've deprioritized it.

If anybody finds a workaround, please post here!

[alexander-heimbuch]

Hey @kaelig,

That is a valid approach. v3 is dedicated to bring ESM compatibility. In case you want to give it a try I managed to provide a minimal example with v3 and Jest: https://replit.com/@alexander-heimb/redux-actions-jest#jest.config.js

Also a different way would be to use vitest as an alternative test runner.

[prathamesh-mutkure]

Hey @alexander-heimbuch, here's my jest config

"jest": {
    "globalSetup": "./test/jest.global-setup.js",
    "setupFilesAfterEnv": [
      "./test/jest-per-test-setup.js"
    ],
    "collectCoverageFrom": [
      "src/**/*.{js,jsx,ts,tsx}",
      "!src/**/*.d.ts",
      "!src/setup*.js",
      "!src/utils/DraggableManager/demo/*.tsx",
      "!src/utils/test/**/*.js",
      "!src/demo/**/*.js",
      "!src/types/*"
    ],
    "reporters": [
      "default",
      "jest-junit"
    ],
    "transform": {
      "\\.(css|png)$": "./test/generic-file-transform.js",
      "\\.([jt]sx?|svg)$": "./test/babel-transform.js"
    },
    "transformIgnorePatterns": [
      "[/\\\\\\\\]node_modules[/\\\\\\\\].+\\\\.(js|jsx|mjs|cjs|ts|tsx)$"
    ],
    "testEnvironment": "jsdom",
    "snapshotFormat": {
      "escapeString": true,
      "printBasicPrototype": true
    }
  }

The app is running fine but it's giving errors in test, it is giving Module Not Found error in all places where it's imported

@kaelig @markthiessen did you guys find any solution?

[kaelig]

I haven't found any solutions, sorry!