npm es module result do not have bpfrpt_proptype_WindowScroller in WindowScroller/onScroll.js,

[forthealllight]

Bug Report

Please include either a failing unit test or a simple repro. You can start by forking this Code Sandbox: https://codesandbox.io/s/03qpzq1p9p?module=%2FExample.js

What is the current behavior?

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem. Your bug will get fixed much faster if we can run your code and it doesn't have dependencies other than React and react-virtualized. Paste the link to your Code Sandbox below:

What is the expected behavior?

Which versions of React and react-virtualized, and which browser / OS are affected by this issue? Did this work in previous versions of react-virtualized?

react-virtualized bundle result , this is some bug in esm

the path is: node_modules/react-virtualized/dist/es/WindowScroller/onScroll.js,

....

import { bpfrpt_proptype_WindowScroller } from "../WindowScroller.js";

....

bpfrpt_proptype_WindowScroller is unuse ,meanwhile ../WindowScroller.js do not have named export that is called

bpfrpt_proptype_WindowScroller

[VigneshHariharan]

Github link
Follow this discussion
This issue is solved in the package: git+https://[email protected]/remorses/react-virtualized-fixed-import.git#9.22.3. =

[Lazercat]

this is all sorts of messy on Vite now that CRA is dead given the native es module support of Vite... heres how this runs OOB on several versions of react-virtualized, this is not sustainable as is.

[nicktobolski]

Any available workarounds for this? Or is a bugfix on the horizon? Still seeing this in ^9.22.5:

[abemedia]

@nicktobolski you can use a Vite plugin to fix this. In your vite.config.ts add this:

const WRONG_CODE = `import { bpfrpt_proptype_WindowScroller } from "../WindowScroller.js";`;

function reactVirtualized() {
  return {
    name: 'my:react-virtualized',
    configResolved() {
      const file = require
        .resolve('react-virtualized')
        .replace(
          path.join('dist', 'commonjs', 'index.js'),
          path.join('dist', 'es', 'WindowScroller', 'utils', 'onScroll.js')
        );
      const code = fs.readFileSync(file, 'utf-8');
      const modified = code.replace(WRONG_CODE, '');
      fs.writeFileSync(file, modified);
    },
  };
}

The add it to your plugins in the config:

export default defineConfig({
  plugins: [
    //...
    reactVirtualized(),
  ],
  // ...
});

[NateYip]

@nicktobolski you can use a Vite plugin to fix this. In your vite.config.ts add this:

const WRONG_CODE = `import { bpfrpt_proptype_WindowScroller } from "../WindowScroller.js";`;

function reactVirtualized() {
  return {
    name: 'my:react-virtualized',
    configResolved() {
      const file = require
        .resolve('react-virtualized')
        .replace(
          path.join('dist', 'commonjs', 'index.js'),
          path.join('dist', 'es', 'WindowScroller', 'utils', 'onScroll.js')
        );
      const code = fs.readFileSync(file, 'utf-8');
      const modified = code.replace(WRONG_CODE, '');
      fs.writeFileSync(file, modified);
    },
  };
}

The add it to your plugins in the config:

export default defineConfig({
  plugins: [
    //...
    reactVirtualized(),
  ],
  // ...
});

this is useful for me

[tomas-light]

@nicktobolski you can use a Vite plugin to fix this. In your vite.config.ts add this:

const WRONG_CODE = `import { bpfrpt_proptype_WindowScroller } from "../WindowScroller.js";`;

function reactVirtualized() {
  return {
    name: 'my:react-virtualized',
    configResolved() {
      const file = require
        .resolve('react-virtualized')
        .replace(
          path.join('dist', 'commonjs', 'index.js'),
          path.join('dist', 'es', 'WindowScroller', 'utils', 'onScroll.js')
        );
      const code = fs.readFileSync(file, 'utf-8');
      const modified = code.replace(WRONG_CODE, '');
      fs.writeFileSync(file, modified);
    },
  };
}

The add it to your plugins in the config:

export default defineConfig({
  plugins: [
    //...
    reactVirtualized(),
  ],
  // ...
});

ESM version of the fix:

import { readFile, writeFile } from 'fs/promises';
import path from 'path';
import { fileURLToPath } from 'url';
import type { PluginOption } from 'vite';
// ...

function reactVirtualized(): PluginOption {
  const WRONG_CODE = `import { bpfrpt_proptype_WindowScroller } from "../WindowScroller.js";`;

  return {
    name: 'my:react-virtualized',
    async configResolved() {
      const reactVirtualizedPath = path.dirname(
        fileURLToPath(import.meta.resolve('react-virtualized'))
      );

      const brokenFilePath = path.join(
        reactVirtualizedPath,
        '..', // back to dist
        'es',
        'WindowScroller',
        'utils',
        'onScroll.js'
      );
      const brokenCode = await readFile(brokenFilePath, 'utf-8');

      const fixedCode = brokenCode.replace(WRONG_CODE, '');
      await writeFile(brokenFilePath, fixedCode);
    },
  };
}

[abemedia]

I made an esbuild plugin to fix this: https://npmjs.com/package/esbuild-plugin-react-virtualized

// vite.config.js
import { defineConfig } from 'vite'
import fixReactVirtualized from 'esbuild-plugin-react-virtualized'

export default defineConfig({
  optimizeDeps: {
    esbuildOptions: {
      plugins: [fixReactVirtualized],
    },
  },
})

[Dhravya]

if anyone's getting a ts error here, here's what helped:

  optimizeDeps: {
    esbuildOptions: {
      plugins: [fixReactVirtualized],
    } as DepOptimizationConfig['esbuildOptions']
  },