useAsyncDebounce in minified production has undefined reference

[jacebot]

Hey Tanner,

Thanks for the awesome project, I know you're working hard on moving to TS, I've seen/read your pain on Twitter. But I have noticed a bug has popped up since the beginning of the spring. A possible regression or new exposure as there are some closed tickets related around it. Please see below.

Also, send me a DM and I can give you some creds to my personal site if you want just to see it in action fail. I can't post anything from work at the moment.

Describe the bug (required)
useAsyncDebounce in a project, when minified for production will throw an error. (Maybe related to treeshaking?)

ReferenceError: Can't find variable: regeneratorRuntime

Provide an example via Codesandbox! (required)
Unable to reproduce outside of a minified production build. In dev this works as expected.

ReferenceError: Can't find variable: regeneratorRuntime
(anonymous function) — react-table.production.min.js:1:51258
(anonymous function) — react-table.production.min.js:1:51238

Steps To Reproduce (required)
add useAsyncDebounce to your project.

Build production output. Pull up page using the plugin in a browser. Instant error.

Expected behavior (Recommended)
Suspected it worked up to version v7.6.2 , possibly introduced after that version. Tried upgrading to 7.7.0 this morning. Same thing after build.

Additional context
PLEASE READ THIS: Had this error occur in two separate unrelated projects, with an entirely different build system, but same error in bundled production builds. My work project uses Parcel v2, while my personal one use Webpack(redwoodjs).

I have tried all kinds of 'tricks' and hacks including babelrc files but really to no avail. In my work project I moved on to lodash as a bandaid. But today I pull my personal project and blam, same error. And it points to the useAsyncdebounce function in minified production.

Sorry for no PR to go with this. Thanks again!

[garand]

@jacebot I've been running into this also, fixing it right now by adding the regenerator-runtime package. https://www.npmjs.com/package/regenerator-runtime

[jacebot]

@garand thanks, I will experiment with this and let you know if it helped my situation.

[earnubs]

I think this is because react-table builds with this browserslist config https://github.com/tannerlinsley/react-table/blob/master/package.json#L53, which in turn means that babel will use the regenerator-runtime polyfill for async, which is used in useAsyncDebounce. This means react-table has hard dependency on regenerator-runtime even if your project does not (because current node or latest Chrome, etc have native async).

With Webpack you can go around this by importing react-table from source directly and telling Webpack to transpile react-table using your own babel config:

// app.js
import {
  useTable,
  useSortBy,
  useBlockLayout,
  useAsyncDebounce,
  useGlobalFilter,
} from 'react-table/src'; // import from src/ directly

// webpack.config.js
module: {
      rules: [
        {
          test: /\.js$/,
          exclude: /node_modules\/(?!(react-table)\/).*/,
          loader: 'babel-loader',
        },
...
]},

// jest.config.js
...
  transformIgnorePatterns: [
    '/node_modules/(?!(react-table)/).*/',
    ...
]

[PenguinDetective]

Any updates on this?

What worked for me aswell was to simply extract the code and put it in my own utils/useAsyncDebounce.tsx file.

function useGetLatest(obj) {
	const ref = React.useRef();
	ref.current = obj;

	return React.useCallback(() => ref.current, []);
}

export function useAsyncDebounce(defaultFn, defaultWait = 0) {
	const debounceRef = React.useRef({});

	const getDefaultFn = useGetLatest(defaultFn);
	const getDefaultWait = useGetLatest(defaultWait);

	return React.useCallback(
		async (...args) => {
			if (!debounceRef.current.promise) {
				debounceRef.current.promise = new Promise((resolve, reject) => {
					debounceRef.current.resolve = resolve;
					debounceRef.current.reject = reject;
				});
			}

			if (debounceRef.current.timeout) {
				clearTimeout(debounceRef.current.timeout);
			}

			debounceRef.current.timeout = setTimeout(async () => {
				delete debounceRef.current.timeout;
				try {
					debounceRef.current.resolve(await getDefaultFn()(...args));
				} catch (err) {
					debounceRef.current.reject(err);
				} finally {
					delete debounceRef.current.promise;
				}
			}, getDefaultWait());

			return debounceRef.current.promise;
		},
		[getDefaultFn, getDefaultWait],
	);
}

[github-actions]

This issue is being marked as stale (no activity in the last 14 days)

[github-actions]

This issue has been detected as stale and automatically closed. It's very likely that your issue has remained here this long because it would require breaking changes to v7. React Table v8 is currently in alpha (soon beta!) and already contains bug fixes, performance improvements and architectural changes that likely address this issue.

• If your v7 issue has been previously labeled as requiring breaking changes, please try the new v8 alpha/beta releases
• If your v7 issue has not already been labeled as a breaking change, open a new issue.
• If this was a v8 issue and was closed by mistake, please reopen or leave a comment below.

[ahmedpasic19]

I this issue when i was unit testing a react project.

Configuration:

• the project is created with Vite,
• testing using Vitest.

Solution:

• Run npm i regenerator-runtime in the terminal
• Add to main.tsx file import 'regenerator-runtime/runtime.js'
  (I saw some importing like import 'regenerator-runtime')
• If you are testing the react-table library, import import 'regenerator-runtime' in the top of youre some.test.ts file

Hope this solves the issue