Bogus import in generated dist ESM file

Question

Bogus import in generated dist ESM file

yyx990803 opened this issue 4 years ago · comments

Evan You commented 4 years ago

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.

Vojtech Miksu · Answer 1 · Thu Feb 04 2021 13:38:34 GMT+0800 (China Standard Time)

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.

Jacob Torrång · Answer 2 · Fri Feb 19 2021 17:31:24 GMT+0800 (China Standard Time)

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.

Tommy D. Rossi · Answer 3 · Fri Mar 19 2021 23:56:08 GMT+0800 (China Standard Time)

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"
    }
}

Tyler Williams · Answer 4 · Sat Mar 27 2021 07:20:16 GMT+0800 (China Standard Time)

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.

Hasibul Hasan · Answer 5 · Fri Apr 23 2021 01:47:59 GMT+0800 (China Standard Time)

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?

Orvar Segerström · Answer 6 · Thu Apr 29 2021 14:10:35 GMT+0800 (China Standard Time)

@bvaughn can we remove that bogus import please?

Ryan Tsao · Answer 7 · Fri May 21 2021 06:07:53 GMT+0800 (China Standard Time)

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

Victory Osikwemhe · Answer 8 · Fri Jul 16 2021 06:53:12 GMT+0800 (China Standard Time)

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 · Answer 9 · Tue Sep 07 2021 11:41:23 GMT+0800 (China Standard Time)

Using pnpm, need a patch for resoving the importing issue

Orvar Segerström · Answer 10 · Tue Sep 07 2021 19:34:39 GMT+0800 (China Standard Time)

I think this PR fixes this issue: #1635

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

奔跑的小胖 · Answer 11 · Mon Dec 06 2021 16:00:17 GMT+0800 (China Standard Time)

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

Jason Williams · Answer 12 · Fri Mar 04 2022 19:54:24 GMT+0800 (China Standard Time)

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 · Answer 13 · Sun May 08 2022 19:39:08 GMT+0800 (China Standard Time)

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!

KoruS · Answer 14 · Sat Jun 04 2022 02:12:49 GMT+0800 (China Standard Time)

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

lironezra · Answer 15 · Tue Jun 14 2022 21:11:42 GMT+0800 (China Standard Time)

Hi @gsiwiec01

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

Dave Ceddia · Answer 16 · Fri Aug 05 2022 03:50:19 GMT+0800 (China Standard Time)

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.

舜岳 · Answer 17 · Mon Aug 08 2022 22:00:41 GMT+0800 (China Standard Time)

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

Gilad Takoni · Answer 18 · Mon Sep 05 2022 22:20:39 GMT+0800 (China Standard Time)

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 :)

Paulo Mateus · Answer 19 · Thu Sep 22 2022 04:04:11 GMT+0800 (China Standard Time)

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 · Answer 20 · Tue Oct 04 2022 23:52:10 GMT+0800 (China Standard Time)

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?

Valery Smirnov · Answer 21 · Fri Oct 07 2022 21:28:26 GMT+0800 (China Standard Time)

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";

Dallas Phillips · Answer 22 · Wed Nov 16 2022 01:28:24 GMT+0800 (China Standard Time)

@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!

Peter · Answer 23 · Sun Mar 26 2023 09:29:23 GMT+0800 (China Standard Time)

@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 · Answer 24 · Mon Aug 07 2023 15:04:28 GMT+0800 (China Standard Time)

Thank you @petersamokhin you a life saver bru

John Duncan · Answer 25 · Wed Oct 04 2023 07:56:41 GMT+0800 (China Standard Time)

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

Samantha Smith · Answer 26 · Fri Oct 27 2023 14:29:41 GMT+0800 (China Standard Time)

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

jk · Answer 27 · Sat Oct 28 2023 21:52:04 GMT+0800 (China Standard Time)

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

Tom · Answer 28 · Fri Nov 17 2023 16:49:25 GMT+0800 (China Standard Time)

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

Chandra Medhika · Answer 29 · Sat Nov 25 2023 16:27:48 GMT+0800 (China Standard Time)

"postinstall": "patch-package"

it works for me. thanks a lot!

Taufik Hidayat · Answer 30 · Sat Dec 16 2023 05:09:44 GMT+0800 (China Standard Time)

@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.

chencc · Answer 31 · Tue Jan 02 2024 11:02:20 GMT+0800 (China Standard Time)

if using go esbuild, you can try

...
				build.OnLoad(
					api.OnLoadOptions{Filter: "onScroll.js"},
					func(args api.OnLoadArgs) (ret api.OnLoadResult, err error) {
						WRONG_CODE := `import { bpfrpt_proptype_WindowScroller } from "../WindowScroller.js`
						code, err := os.ReadFile(args.Path)
						newContent := strings.Replace(string(code), WRONG_CODE, "", -1)
						return api.OnLoadResult{Contents: &newContent, Loader: api.LoaderJS}, nil
					},
				)

...
```go

Adam Bouqdib · Answer 32 · Fri Jan 26 2024 16:34:15 GMT+0800 (China Standard Time)

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

Adonai Solomon · Answer 33 · Thu Feb 01 2024 08:57:53 GMT+0800 (China Standard Time)

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)