[V8] You may need an additional loader to handle the result of these loaders #4500

samyan · 2022-11-02T10:06:36Z

Describe the bug

I'm trying to run react app with your library but I get runtime error:

./node_modules/@tanstack/react-table/build/umd/index.production.js 106:18
Module parse failed: Unexpected token (106:18)
File was processed with these loaders:
 * ./node_modules/babel-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
|           i = l.accessorKey;
|     let r,
>         a = l.id ?? (i ? i.replace(".", "_") : void 0) ?? ("string" == typeof l.header ? l.header : void 0);
|     if (l.accessorFn ? r = l.accessorFn : i && (r = i.includes(".") ? e => {
|       let t = e;

Your minimal, reproducible example

localhost

Steps to reproduce

This is my npm package:

├── @tanstack/[email protected]
├── @types/[email protected]
├── @types/[email protected]
├── @types/[email protected]
├── @types/[email protected]
├── @types/[email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
└── [email protected]

My code:

const table = useReactTable({
	data,
	columns,
	getCoreRowModel: getCoreRowModel()
});

return (
	<div className='p-2'>
		<table>
			<thead>
				{table.getHeaderGroups().map((headerGroup) => (
					<tr key={headerGroup.id}>
						{headerGroup.headers.map((header) => (
							<th key={header.id}>
								{header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext())}
							</th>
						))}
					</tr>
				))}
			</thead>
			<tbody>
				{table.getRowModel().rows.map((row) => (
					<tr key={row.id}>
						{row.getVisibleCells().map((cell) => (
							<td key={cell.id}>{flexRender(cell.column.columnDef.cell, cell.getContext())}</td>
						))}
					</tr>
				))}
			</tbody>
			<tfoot>
				{table.getFooterGroups().map((footerGroup) => (
					<tr key={footerGroup.id}>
						{footerGroup.headers.map((header) => (
							<th key={header.id}>
								{header.isPlaceholder ? null : flexRender(header.column.columnDef.footer, header.getContext())}
							</th>
						))}
					</tr>
				))}
			</tfoot>
		</table>
	</div>
);

Expected behavior

Get result.

How often does this bug happen?

Every time

Screenshots or Videos

No response

Platform

Windows 11 // Node v16.151

react-table version

v8.5.22

TypeScript version

v4.2.3

Additional context

No response

Terms & Code of Conduct

I agree to follow this project's Code of Conduct
I understand that if my bug cannot be reliable reproduced in a debuggable environment, it will probably not be fixed and this issue may even be closed.

The text was updated successfully, but these errors were encountered:

gear4s · 2022-11-02T11:17:08Z

this issue was first introduced in 8.5.15 - we are currently using 8.5.13 to build our front-end

samyan · 2022-11-02T11:27:53Z

this issue was first introduced in 8.5.15 - we are currently using 8.5.13 to build our front-end

I will try with 8.5.13. Thanks for response.

samyan · 2022-11-02T12:00:42Z

Working with 8.5.13 for now as @gear4s suggested. Any idea when will be fixed?

gear4s · 2022-11-02T13:15:03Z

try to change your browser targets from this:

"browserslist": {
   "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
},

to this:

"browserslist": [
   ">0.2%",
  "not dead",
  "not op_mini all"
],

it could also be an issue with your version of React-Scripts not supporting Babel version that implements the ?? operator - try to update to [email protected] too

samyan · 2022-11-02T15:51:50Z

try to change your browser targets from this:
"browserslist": {
   "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
},
to this:
"browserslist": [
   ">0.2%",
  "not dead",
  "not op_mini all"
],
it could also be an issue with your version of React-Scripts not supporting Babel version that implements the ?? operator - try to update to [email protected] too

I've tried browserslist already but no luck. About react-scripts version, maybe. I will try later and write you. Thanks!

nrayburn-tech · 2022-11-10T02:15:03Z

Your issue is likely due to how Create React App processes dependency code, here is an issue from that repo with a more detailed explanation.

facebook/create-react-app#11339 (comment)

patrickgalbraith · 2022-11-17T02:19:31Z

I had this same issue when using v8 with Storybook. Fix was to extend the Storybook webpack config to process react-table.

.storybook/main.js

const nodeModulesThatNeedToBeParsedBecauseTheyExposeES6 = [
  '@tanstack[\\\\/]react-table',
];

module.exports = {
  // ...
  webpackFinal: async (config) => {
    return {
      ...config,
      module: {
        ...config.module,
        rules: config.module.rules.map((rule) => {
          if (rule.test.toString() !== String(/\.js$/)) return rule;

          const include = new RegExp(
            `[\\\\/]node_modules[\\\\/](${nodeModulesThatNeedToBeParsedBecauseTheyExposeES6.join(
              '|'
            )})`
          );

          if (Array.isArray(rule.include)) {
            rule.include.push(include);
          } else {
            rule.include = [rule.include, include].filter(Boolean);
          }

          return rule;
        }),
      },
    };
  },

KevinVandy · 2022-11-24T00:41:13Z

@samyan @gear4s @patrickgalbraith Try out the newest TanStack Table v8.7.0 and let us know if you are still running into problems here

We think PR #4552 should have fixed this issue.

samyan · 2022-11-24T18:23:16Z

@samyan @gear4s @patrickgalbraith Try out the newest TanStack Table v8.7.0 and let us know if you are still running into problems here

We think PR #4552 should have fixed this issue.

Working perfect! Thank you.

patrickgalbraith · 2022-12-15T01:01:24Z

@KevinVandy 8.7.0 works great!

However I tried v8.7.3 and the issue has returned, was there a regression recently?

patrickgalbraith · 2022-12-15T01:04:00Z

Error I'm getting in 8.7.3

ERROR in ./node_modules/@tanstack/react-table/build/lib/index.esm.js 64:28
Module parse failed: Unexpected token (64:28)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|     onStateChange: updater => {
|       setState(updater);
>       options.onStateChange?.(updater);
|     }
|   }));

KevinVandy · 2022-12-15T01:11:29Z

Error I'm getting in 8.7.3

ERROR in ./node_modules/@tanstack/react-table/build/lib/index.esm.js 64:28
Module parse failed: Unexpected token (64:28)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|     onStateChange: updater => {
|       setState(updater);
>       options.onStateChange?.(updater);
|     }
|   }));

There have been no code changes pretty much between 8.7.0 and 8.7.3, which is making this hard to figure out why it is happening

marwen-cherif · 2022-12-16T10:23:38Z

Personally i've rollback to version 8.5.11 allowed me to get arround the problem.

it seems that the problem was introduced between 8.512 and 8.5.30

8.5.30 => KO
8.7.3 => KO
8.5.11 => OK

vishal-rathod-07 · 2022-12-21T05:49:07Z

Error I'm getting in 8.7.3

ERROR in ./node_modules/@tanstack/react-table/build/lib/index.esm.js 64:28
Module parse failed: Unexpected token (64:28)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|     onStateChange: updater => {
|       setState(updater);
>       options.onStateChange?.(updater);
|     }
|   }));

I am also getting same error.

I am using "react-scripts": "3.0.1" and "@tanstack/react-table": "8.7.2".

any solution without changing browserlist.

valentinkorzun · 2022-12-22T14:45:16Z

Error I'm getting in 8.7.3

ERROR in ./node_modules/@tanstack/react-table/build/lib/index.esm.js 64:28
Module parse failed: Unexpected token (64:28)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|     onStateChange: updater => {
|       setState(updater);
>       options.onStateChange?.(updater);
|     }
|   }));

I am also getting same error.

I am using "react-scripts": "3.0.1" and "@tanstack/react-table": "8.7.2".

any solution without changing browserlist.

I also have this error. Any updates?

ivanov-v · 2022-12-28T07:50:19Z

Error with 8.7.2. Maybe reopen issue?

ellisPae · 2022-12-28T22:17:30Z

Error I'm getting in 8.7.3

ERROR in ./node_modules/@tanstack/react-table/build/lib/index.esm.js 64:28
Module parse failed: Unexpected token (64:28)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|     onStateChange: updater => {
|       setState(updater);
>       options.onStateChange?.(updater);
|     }
|   }));

I am also getting same error.

I am using "react-scripts": "3.0.1" and "@tanstack/react-table": "8.7.2".

any solution without changing browserlist.

I'm getting the same exact issue on 8.7.4

gear4s · 2022-12-30T23:00:03Z

@KevinVandy I'm sure that the issues are related to the react-scripts these guys are using. what finally, really fixed the issue for us, was upgrading from [email protected] to [email protected]. what would likely have triggered this to arise is a change to the build process.

@ellisPae @valentinkorzun @vishal-rathod-07 could you try to update react-scripts first?

WilsonCWong · 2023-01-04T20:46:29Z

Having the same issue with [email protected] and @tanstack/[email protected].

EDIT: Downgrading to 8.7.0 fixes it.

vishal-rathod-07 · 2023-01-05T04:46:06Z

@gear4s Updating [email protected] works for me thanks 👍🏻.

netdesignr · 2023-01-05T10:42:05Z

Downgrading to 8.7.0 it solved the issue. The issue will also disappear if switching to Webpack 5, but it's not an option for the project I work on.

patrickgalbraith · 2023-01-08T23:08:03Z

Something has obviously changed when the package is built:

// v8.7.0
onStateChange: updater => {
  setState(updater);
  options.onStateChange == null ? void 0 : options.onStateChange(updater);
}

// v8.7.4 (official)
onStateChange: updater => {
  setState(updater);
  options.onStateChange?.(updater);
}

// v8.7.4 (local build with YARN install)
onStateChange: updater => {
  setState(updater);
  options.onStateChange == null ? void 0 : options.onStateChange(updater);
}

@KevinVandy if I do a build locally and install using npm then I get the result from v8.7.4 BUT if I install using yarn then I get the correct result. You have a yarn.lock but you don't have a package-lock.json so when you do the build locally it is correct but the CI builds are using npm install which will pull the latest dependencies. So you may want to use yarn when doing the install in your Github CI config or add a package-lock.

I'm guessing this is because of changes to @babel/preset-env. You could probably just add a include for @babel/plugin-proposal-optional-chaining.

oneblockchain · 2023-02-12T02:04:23Z

try to change your browser targets from this:
"browserslist": {
   "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
},
to this:
"browserslist": [
   ">0.2%",
  "not dead",
  "not op_mini all"
],
it could also be an issue with your version of React-Scripts not supporting Babel version that implements the ?? operator - try to update to [email protected] too

This works for me, thanks!

KevinVandy · 2023-02-12T02:26:26Z

@oneblockchain this should no longer be necessary in the latest version of table though

mnickolay · 2023-04-26T14:58:47Z

The solution to this issue for me was multiple version for acorn were being pulled in as dependencies for other packages like webpack and ts-node. I ended up with 6.4.2, 7.4.1, and 8.8.2.

I just added the appropriate resolution in my package.json:

"resolutions": {
    "acorn": "^8.5.0"
},

samyan changed the title ~~[Error] You may need an additional loader to handle the result of these loaders~~ [V8] You may need an additional loader to handle the result of these loaders Nov 2, 2022

KevinVandy added the critical Issues or bugs that are highly critical and must be solved as soon as possible. label Nov 16, 2022

KevinVandy closed this as completed Nov 24, 2022

patrickgalbraith added a commit to patrickgalbraith/table that referenced this issue Jan 8, 2023

TanStack#4500 - Force babel to transform optional chaining

fb612be

patrickgalbraith mentioned this issue Jan 8, 2023

#4500 - Force babel to transform optional chaining #4647

Merged

Uh oh!

[V8] You may need an additional loader to handle the result of these loaders #4500

[V8] You may need an additional loader to handle the result of these loaders #4500

Comments

samyan commented Nov 2, 2022

Describe the bug

Your minimal, reproducible example

Steps to reproduce

Expected behavior

How often does this bug happen?

Screenshots or Videos

Platform

react-table version

TypeScript version

Additional context

Terms & Code of Conduct

gear4s commented Nov 2, 2022

Uh oh!

samyan commented Nov 2, 2022

Uh oh!

samyan commented Nov 2, 2022

Uh oh!

gear4s commented Nov 2, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

samyan commented Nov 2, 2022

Uh oh!

nrayburn-tech commented Nov 10, 2022

Uh oh!

patrickgalbraith commented Nov 17, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

KevinVandy commented Nov 24, 2022

Uh oh!

samyan commented Nov 24, 2022

Uh oh!

patrickgalbraith commented Dec 15, 2022

Uh oh!

patrickgalbraith commented Dec 15, 2022

Uh oh!

KevinVandy commented Dec 15, 2022

Uh oh!

marwen-cherif commented Dec 16, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

vishal-rathod-07 commented Dec 21, 2022

Uh oh!

valentinkorzun commented Dec 22, 2022

Uh oh!

ivanov-v commented Dec 28, 2022

Uh oh!

ellisPae commented Dec 28, 2022

Uh oh!

gear4s commented Dec 30, 2022

Uh oh!

WilsonCWong commented Jan 4, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

vishal-rathod-07 commented Jan 5, 2023

Uh oh!

netdesignr commented Jan 5, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

patrickgalbraith commented Jan 8, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

oneblockchain commented Feb 12, 2023

Uh oh!

KevinVandy commented Feb 12, 2023

Uh oh!

mnickolay commented Apr 26, 2023

Uh oh!

gear4s commented Nov 2, 2022 •

edited

Loading

patrickgalbraith commented Nov 17, 2022 •

edited

Loading

marwen-cherif commented Dec 16, 2022 •

edited

Loading

WilsonCWong commented Jan 4, 2023 •

edited

Loading

netdesignr commented Jan 5, 2023 •

edited

Loading

patrickgalbraith commented Jan 8, 2023 •

edited

Loading