Closed yyx990803 closed 4 days ago
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.
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.
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"
}
}
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.
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?
@bvaughn can we remove that bogus import please?
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
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
Using pnpm, need a patch for resoving the importing issue
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
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
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.
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 resolution
didn't work for those using npm.
What can I do for now?
Thanks Friends!
Hi @lironezra, Did you manage to deal with this problem? I have the same one and have no idea about it.
Hi @gsiwiec01
Still doesn't work :( Waiting for someone knows how to deal with that.
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.
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);
},
};
}
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 :)
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';
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?
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";
@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!
@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)
},
}
}
Thank you @petersamokhin you a life saver bru
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
为什么这个问题还没修复?
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
Bumping. Can the fix please get merged for this? Frustrating adding this workaround in all our apps.
"postinstall": "patch-package"
it works for me. thanks a lot!
@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.
I wrote an esbuild plugin to fix this which can also be used for vite: https://npmjs.com/package/esbuild-plugin-react-virtualized
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)
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!
Why is this not being fixed in the repo instead of this giant custom plugin festival?
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:
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.