Bogus import in generated dist ESM file

[yyx990803]

Bug Report

https://unpkg.com/browse/react-virtualized@9.22.3/dist/es/WindowScroller/utils/onScroll.js

What is the current behavior?

Last line of the linked file has the following bogus import pointing to a non-existent export:

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

What is the expected behavior?

This import shouldn't exist.

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?

Not sure which version this started shipping - but this import breaks when imported in native browser ESM and also breaks in strict bundlers like esbuild / rollup.

[tajo]

This has been reported more than 2 years ago: https://github.com/bvaughn/react-virtualized/issues/1212

I guess webpack ignores bogus imports but some modern tools like snowpack or esbuild don't.

[mewhhaha]

Having the same issue. Since the there is no flow needed to be converted to prop types in the onScroll file then perhaps the babel-plugin-flow-react-proptypes plugin that seems to be causing this issue should simply be disabled for this file by adding 'no babel-plugin-flow-react-proptypes'; to the top of the file? As described in the "Supression" section of https://github.com/brigand/babel-plugin-flow-react-proptypes.

[remorses]

I have published a version of the package with the fix, you can use it via resolutions field in package.json

{
    "resolutions": {
        "react-virtualized": "git+https://git@github.com/remorses/react-virtualized-fixed-import.git#9.22.3"
    }
}

[ty-lerscott]

I have published a version of the package with the fix, you can use it via resolutions field in package.json

{
    "resolutions": {
        "react-virtualized": "git+https://git@github.com/remorses/react-virtualized-fixed-import.git#9.22.3""
    }
}

This fixed the problem for me.

[hsblhsn]

I have published a version of the package with the fix, you can use it via resolutions field in package.json

{
    "resolutions": {
        "react-virtualized": "git+https://git@github.com/remorses/react-virtualized-fixed-import.git#9.22.3""
    }
}

Did not work for me. Any other way to get a hotfix?

[0rvar]

@bvaughn can we remove that bogus import please?

[rtsao]

For folks using Yarn v2 you can use this patch:

package.json

{
  "resolutions": {
    "react-virtualized": "patch:react-virtualized@9.22.3#./path/to/react-virtualized-9.22.3.patch"
  }
}

react-virtualized-9.22.3.patch

diff --git a/dist/es/WindowScroller/utils/onScroll.js b/dist/es/WindowScroller/utils/onScroll.js
index d00f0f18c6596e4e57f4f762f91fed4282610c91..42456dc5c3b9b5ea4a83ce976df542bf2e55e8a4 100644
--- a/dist/es/WindowScroller/utils/onScroll.js
+++ b/dist/es/WindowScroller/utils/onScroll.js
@@ -71,4 +71,3 @@ export function unregisterScrollListener(component, element) {
     }
   }
 }
-import { bpfrpt_proptype_WindowScroller } from "../WindowScroller.js";
\ No newline at end of file

[zombieleet]

I have published a version of the package with the fix, you can use it via resolutions field in package.json

{
    "resolutions": {
        "react-virtualized": "git+https://git@github.com/remorses/react-virtualized-fixed-import.git#9.22.3""
    }
}

Did not work for me. Any other way to get a hotfix?

if you are using yarn workspaces, put this in the base package.json

[zheeeng]

Using pnpm, need a patch for resoving the importing issue

[0rvar]

I think this PR fixes this issue: https://github.com/bvaughn/react-virtualized/pull/1635

If so, there needs to be a new release of react-virtualized with this patch

[chelseachen007]

I have published a version of the package with the fix, you can use it via resolutions field in package.json

{
    "resolutions": {
        "react-virtualized": "git+https://git@github.com/remorses/react-virtualized-fixed-import.git#9.22.3""
    }
}

This fixed the problem for me.

Error: The following dependencies are imported but could not be resolved: react-virtualized/styles.css

[jasonwilliams]

So this looks all ready to go, but it seems like @bvaughn doesn't want to release it? https://github.com/bvaughn/react-virtualized/commit/2e962d8f8aebc22cb1168a8d147bcaa1d27aa326 is the changelog being updated but he's asking for "someone else" to publish it.

[lironezra]

Hi,

Anyone knows what's going on with the solution for this isssue? I'm using it on vite project with npm and I'm getting this error to.

the resolutiondidn't work for those using npm.

What can I do for now?

Thanks Friends!

[gsiwiec01]

Hi @lironezra, Did you manage to deal with this problem? I have the same one and have no idea about it.

[lironezra]

Hi @gsiwiec01

Still doesn't work :( Waiting for someone knows how to deal with that.

[dceddia]

Deleting the line is enough to get it working once, but it'll get overwritten, won't work across machines, etc. The patching approach seems like a more resilient way to go, but I'm not using Yarn v2.

I fixed it with patch-package:

npm i patch-package   # or: yarn add patch-package postinstall-postinstall

# Edit the file and delete the line with bpfrpt_proptype_WindowScroller
vim node_modules/react-virtualized/dist/es/WindowScroller/utils/onScroll.js

# Generate the patch file (it puts it in /patches)
npx patch-package react-virtualized

# Commit the patch
git add patches/
git commit -m "temporary workaround for vite error with react-virtualized"

Also, added a postinstall script in package.json to apply the patch after npm install / yarn.

 "scripts": {
+  "postinstall": "patch-package"
 }

If the patch eventually fails to apply, it should be simple enough to update it (repeating some steps above) or remove it.

[shunyue1320]

vite.config.ts

import type { Plugin } from "vite";
import fs from "fs";
import path from "path";

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

const WRONG_CODE = `import { bpfrpt_proptype_WindowScroller } from "../WindowScroller.js";`;
export function reactVirtualized(): Plugin {
    return {
        name: "flat:react-virtualized",
        // Note: we cannot use the `transform` hook here
        //       because libraries are pre-bundled in vite directly,
        //       plugins aren't able to hack that step currently.
        //       so instead we manually edit the file in node_modules.
        //       all we need is to find the timing before pre-bundling.
        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);
        },
    };
}

[gilad1987]

vite.config.ts

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

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);
    },
  }
}

can you share all file please? from whete to import path and fs? thanks :)

[SrMouraSilva]

vite.config.ts

can you share all file please? from whete to import path and fs? thanks :)

@gilad1987 I used this following and it worked

import * as fs from 'node:fs';
import path from 'path';

[pauloasantos]

vite.config.ts

import type { Plugin } from "vite";
import fs from "fs";
import path from "path";

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

const WRONG_CODE = `import { bpfrpt_proptype_WindowScroller } from "../WindowScroller.js";`;
export function reactVirtualized(): Plugin {
    return {
        name: "flat:react-virtualized",
        // Note: we cannot use the `transform` hook here
        //       because libraries are pre-bundled in vite directly,
        //       plugins aren't able to hack that step currently.
        //       so instead we manually edit the file in node_modules.
        //       all we need is to find the timing before pre-bundling.
        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);
        },
    };
}

not working for me, follow the error?

error when starting dev server:
TypeError: __require.resolve is not a function
    at Object.configResolved 

Could you help me?

[Rejke]

vite.config.ts

import type { Plugin } from "vite";
import fs from "fs";
import path from "path";

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

const WRONG_CODE = `import { bpfrpt_proptype_WindowScroller } from "../WindowScroller.js";`;
export function reactVirtualized(): Plugin {
    return {
        name: "flat:react-virtualized",
        // Note: we cannot use the `transform` hook here
        //       because libraries are pre-bundled in vite directly,
        //       plugins aren't able to hack that step currently.
        //       so instead we manually edit the file in node_modules.
        //       all we need is to find the timing before pre-bundling.
        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);
        },
    };
}

not working for me, follow the error?

error when starting dev server:
TypeError: __require.resolve is not a function
    at Object.configResolved 

Could you help me?

You can insert const require = module.createRequire(import.meta.url); in start of configResolved function with module import like that: import module from "module";

[BigBallard]

@bvaughn if you are not going to maintain this code anymore than give it to someone who will instead of leaving issues out to hang. Especially when its downloaded more than a million times a week. I mean come on, Evan You created this issue!

[petersamokhin]

@Rejke To fix this:

error when starting dev server:
TypeError: __require.resolve is not a function
    at Object.configResolved 

You can use the below:

vite.config.ts

import fs from 'node:fs/promises'
import path from 'node:path'
import url from 'node:url'
import { createRequire } from 'node:module'

// same usage inside defineConfig

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

function reactVirtualized(): PluginOption {
  return {
    name: 'flat:react-virtualized',
    // Note: we cannot use the `transform` hook here
    //       because libraries are pre-bundled in vite directly,
    //       plugins aren't able to hack that step currently.
    //       so instead we manually edit the file in node_modules.
    //       all we need is to find the timing before pre-bundling.
    configResolved: async () => {
      const require = createRequire(import.meta.url)
      const reactVirtualizedPath = require.resolve('react-virtualized')
      const { pathname: reactVirtualizedFilePath } = new url.URL(reactVirtualizedPath, import.meta.url)
      const file = reactVirtualizedFilePath
        .replace(
          path.join('dist', 'commonjs', 'index.js'),
          path.join('dist', 'es', 'WindowScroller', 'utils', 'onScroll.js'),
        )
      const code = await fs.readFile(file, 'utf-8')
      const modified = code.replace(WRONG_CODE, '')
      await fs.writeFile(file, modified)
    },
  }
}

[Roeefl]

Thank you @petersamokhin you a life saver bru

[JohnDDuncanIII]

This also breaks when bundling with bun 1.0.4

bun build app/static/frontend/index.jsx --outdir ./build

Fixed with

index.ts

const Bun = require("bun")
import type { BunPlugin } from "bun"
import fs from "fs"
import path from "path"

const reactVirtualizedImport: BunPlugin = {
    name: "Fix react-virtualized",
    setup(build) {
        const WRONG_CODE = `import { bpfrpt_proptype_WindowScroller } from "../WindowScroller.js";`

        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);
    },
};

await Bun.build({
    entrypoints: ["app/static/frontend/index.jsx"],
    outdir: "build",
    target: "browser",
    // plugins: [reactVirtualizedImport],
})

bun index.ts

[xiaohaoo]

为什么这个问题还没修复？

[samarai-jk]

Above solution doesn't work in a browser app if you don't want to introduce node to your project. So I created a repo that works with npm/vite/ts/react and is the latest version as of today, 9.22.5. It's only the distribution no original sources. react-virtualized-fixed

Install with npm: npm install https://github.com/samarai-project/react-virtualized-fixed.git

this will replace the npm package with the repo. Check the last line in node_modules/react-virtualized/dist/es/WindowScroller/utils/onScroll.js, needs to be commented out

[tavgordon]

Bumping. Can the fix please get merged for this? Frustrating adding this workaround in all our apps.

[ChandraMedhika]

"postinstall": "patch-package"

it works for me. thanks a lot!

[sluxzer]

@Rejke To fix this:

error when starting dev server:
TypeError: __require.resolve is not a function
    at Object.configResolved 

You can use the below:

vite.config.ts

import fs from 'node:fs/promises'
import path from 'node:path'
import url from 'node:url'
import { createRequire } from 'node:module'

// same usage inside defineConfig

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

function reactVirtualized(): PluginOption {
  return {
    name: 'flat:react-virtualized',
    // Note: we cannot use the `transform` hook here
    //       because libraries are pre-bundled in vite directly,
    //       plugins aren't able to hack that step currently.
    //       so instead we manually edit the file in node_modules.
    //       all we need is to find the timing before pre-bundling.
    configResolved: async () => {
      const require = createRequire(import.meta.url)
      const reactVirtualizedPath = require.resolve('react-virtualized')
      const { pathname: reactVirtualizedFilePath } = new url.URL(reactVirtualizedPath, import.meta.url)
      const file = reactVirtualizedFilePath
        .replace(
          path.join('dist', 'commonjs', 'index.js'),
          path.join('dist', 'es', 'WindowScroller', 'utils', 'onScroll.js'),
        )
      const code = await fs.readFile(file, 'utf-8')
      const modified = code.replace(WRONG_CODE, '')
      await fs.writeFile(file, modified)
    },
  }
}

2023 and still facing the issue on new install, this solution works for me.

[abemedia]

I wrote an esbuild plugin to fix this which can also be used for vite: https://npmjs.com/package/esbuild-plugin-react-virtualized

[adonaisol]

configResolved: async () => {
      const require = createRequire(import.meta.url)
      const reactVirtualizedPath = require.resolve('react-virtualized')
      const { pathname: reactVirtualizedFilePath } = new url.URL(reactVirtualizedPath, import.meta.url)
      const file = reactVirtualizedFilePath
        .replace(
          path.join('dist', 'commonjs', 'index.js'),
          path.join('dist', 'es', 'WindowScroller', 'utils', 'onScroll.js'),
        )
      const code = await fs.readFile(file, 'utf-8')
      const modified = code.replace(WRONG_CODE, '')
      await fs.writeFile(file, modified)
    }

Thanks @petersamokhin for this fix.

In case anyone faces this problem, I ran into an issue with this workaround that the new URL() function encodes special characters like spaces which was causing server builds to fail. I solved this by decoding the pathname parameter before assigning it to reactVirtualizedPath

const { pathname } = new url.URL(reactVirtualizedPath, import.meta.url)
const reactVirtualizedFilePath = decodeURI(pathname)

[EnixCoda]

I wrote an esbuild plugin to fix this which can also be used for vite: https://npmjs.com/package/esbuild-plugin-react-virtualized

This might be the best solution so far, especially when you have multiple copies of react-virtualized installed, it will handle all of them.

If you do not prefer installing the package, here is a simplified version, merge this into your vite config:

defineConfig({
  optimizeDeps: {
    esbuildOptions: {
      plugins: [
        {
          name: 'esbuild-plugin-react-virtualized',
          setup({ onLoad }) {
            onLoad(
            {
              filter: /react-virtualized[/\\]dist[/\\]es[/\\]WindowScroller[/\\]utils[/\\]onScroll\.js$/
            },
            async ({ path }) => {
              const code = await readFile(path, 'utf8')
              const broken = `import { bpfrpt_proptype_WindowScroller } from "../WindowScroller.js";`
              return { contents: code.replace(broken, '') }
            })
          },
        }
      ],
    },
  },
})

Big thanks to @abemedia you saved my life!

[Roeefl]

Why is this not being fixed in the repo instead of this giant custom plugin festival?