Bogus import in generated dist ESM file #1632

yyx990803 · 2021-01-22T23:37:05Z

Bug Report

https://unpkg.com/browse/[email protected]/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 · 2021-02-04T05:38:34Z

This has been reported more than 2 years ago: #1212

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

mewhhaha · 2021-02-19T09:31:24Z

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 · 2021-03-19T15:56:08Z

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://[email protected]/remorses/react-virtualized-fixed-import.git#9.22.3"
    }
}

ty-lerscott · 2021-03-26T23:20:16Z

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://[email protected]/remorses/react-virtualized-fixed-import.git#9.22.3""
    }
}

This fixed the problem for me.

hsblhsn · 2021-04-22T17:47:59Z

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://[email protected]/remorses/react-virtualized-fixed-import.git#9.22.3""
    }
}

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

0rvar · 2021-04-29T06:10:35Z

@bvaughn can we remove that bogus import please?

rtsao · 2021-05-20T22:07:53Z

For folks using Yarn v2 you can use this patch:

package.json

{
  "resolutions": {
    "react-virtualized": "patch:[email protected]#./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 · 2021-07-15T22:53:12Z

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://[email protected]/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 · 2021-09-07T03:41:23Z

Using pnpm, need a patch for resoving the importing issue

0rvar · 2021-09-07T11:34:39Z

I think this PR fixes this issue: #1635

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

chelseachen007 · 2021-12-06T08:00:17Z

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://[email protected]/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

This isn't working, running into a weird error: ``` import { bpfrpt_proptype_WindowScroller } from "../WindowScroller.js"; ``` with react-virtualized and vite. See bvaughn/react-virtualized#1635 bvaughn/react-virtualized#1632 https://github.com/uber/baseweb/issues/4129 Seems like react-virtualized is an inactive project, so probably should just switch to a more active full featured table library

jasonwilliams · 2022-03-04T11:54:24Z

So this looks all ready to go, but it seems like @bvaughn doesn't want to release it?
2e962d8 is the changelog being updated but he's asking for "someone else" to publish it.

lironezra · 2022-05-08T11:39:08Z

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 · 2022-06-03T18:12:49Z

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

lironezra · 2022-06-14T13:11:42Z

Hi @gsiwiec01

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

dceddia · 2022-08-04T19:50:19Z

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 · 2022-08-08T14:00:41Z

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 · 2022-09-05T14:20:39Z

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 · 2022-09-21T20:04:11Z

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 · 2022-10-04T15:52:10Z

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 · 2022-10-07T13:28:26Z

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 · 2022-11-15T17:28:24Z

@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 · 2023-03-26T01:29:23Z

@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 · 2023-08-07T07:04:28Z

Thank you @petersamokhin you a life saver bru

JohnDDuncanIII · 2023-10-03T23:56:41Z

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 · 2023-10-27T06:29:41Z

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

samarai-jk · 2023-10-28T13:52:04Z

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 · 2023-11-17T08:49:25Z

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

ChandraMedhika · 2023-11-25T08:27:48Z

"postinstall": "patch-package"

it works for me. thanks a lot!

sluxzer · 2023-12-15T21:09:44Z

@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 · 2024-01-26T08:34:15Z

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

adonaisol · 2024-02-01T00:57:53Z

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 · 2024-05-17T09:27:51Z

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 · 2024-09-02T19:34:19Z

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

sebbean · 2025-01-12T06:59:44Z

🫡

yyx990803 changed the title ~~Bogus import in generated dist file~~ Bogus import in generated dist ESM file Jan 22, 2021

yyx990803 mentioned this issue Jan 23, 2021

Unable to boot create-react-app based project migrating to vite vitejs/vite#1652

Closed

3 tasks

mewhhaha mentioned this issue Feb 19, 2021

Fix issue with unused import being emitted #1635

Merged

6 tasks

nihalgonsalves mentioned this issue Apr 26, 2021

Allow users to apply plugins to and customise the pre-bundling process vitejs/vite#3124

Closed

VigneshHariharan mentioned this issue Mar 30, 2022

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

Closed

khelif96 mentioned this issue Aug 24, 2022

EVG-17465 Install react-virtualized and source map explorer evergreen-ci/parsley#12

Merged

TemaSM mentioned this issue Sep 20, 2022

reactvirtualized.com Domain has been hijacked #1770

Closed

jprochazk mentioned this issue Sep 30, 2022

Migrate to Vite HolodexNet/Musicdex#101

Closed

xzdarcy mentioned this issue Jan 26, 2023

windows scroller issue xzdarcy/react-timeline-editor#21

Open

hal-shin mentioned this issue Feb 1, 2023

vite prebuild error #1799

Closed

keller-mark mentioned this issue May 10, 2023

Use .js extensions for imports to so that source is ESM vitessce/vitessce#1519

Merged

3 tasks

This was referenced Aug 29, 2023

chore(ffe-account-selector-react)!: remove AccountSelectorHighCapacity SpareBank1/designsystem#1670

Merged

chore(ffe-searchable-dropdown-react)!: remove HighCapacity SpareBank1/designsystem#1674

Merged

rmanaem mentioned this issue Mar 1, 2024

Virtualize rendering of result in ResultContainer neurobagel/query-tool#40

Open

github-actions bot added the Stale label Sep 2, 2024

github-actions bot closed this as not planned Won't fix, can't repro, duplicate, stale Sep 2, 2024

michaeljaltamirano mentioned this issue Dec 23, 2024

Build Error from 'bpfrpt_proptype_WindowScroller' #1862

Closed

Bogus import in generated dist ESM file #1632

Bogus import in generated dist ESM file #1632

Comments

yyx990803 commented Jan 22, 2021

Bug Report

What is the current behavior?

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?

tajo commented Feb 4, 2021

mewhhaha commented Feb 19, 2021 • edited Loading

remorses commented Mar 19, 2021 • edited Loading

ty-lerscott commented Mar 26, 2021

hsblhsn commented Apr 22, 2021

0rvar commented Apr 29, 2021

rtsao commented May 20, 2021

zombieleet commented Jul 15, 2021

zheeeng commented Sep 7, 2021

0rvar commented Sep 7, 2021

chelseachen007 commented Dec 6, 2021

jasonwilliams commented Mar 4, 2022

lironezra commented May 8, 2022 • edited Loading

gsiwiec01 commented Jun 3, 2022

lironezra commented Jun 14, 2022

dceddia commented Aug 4, 2022

shunyue1320 commented Aug 8, 2022 • edited Loading

gilad1987 commented Sep 5, 2022

SrMouraSilva commented Sep 21, 2022 • edited Loading

pauloasantos commented Oct 4, 2022

Rejke commented Oct 7, 2022 • edited Loading

BigBallard commented Nov 15, 2022

petersamokhin commented Mar 26, 2023

Roeefl commented Aug 7, 2023

JohnDDuncanIII commented Oct 3, 2023 • edited Loading

xiaohaoo commented Oct 27, 2023

samarai-jk commented Oct 28, 2023

tavgordon commented Nov 17, 2023

ChandraMedhika commented Nov 25, 2023

sluxzer commented Dec 15, 2023

abemedia commented Jan 26, 2024

adonaisol commented Feb 1, 2024

EnixCoda commented May 17, 2024

Roeefl commented Sep 2, 2024

sebbean commented Jan 12, 2025

mewhhaha commented Feb 19, 2021 •

edited

Loading

remorses commented Mar 19, 2021 •

edited

Loading

lironezra commented May 8, 2022 •

edited

Loading

shunyue1320 commented Aug 8, 2022 •

edited

Loading

SrMouraSilva commented Sep 21, 2022 •

edited

Loading

Rejke commented Oct 7, 2022 •

edited

Loading

JohnDDuncanIII commented Oct 3, 2023 •

edited

Loading