Webpack error in react builder

App Development Front-end
, ,
1

When using a React lib called Puck, I can’t link because of a weird error in Webpack:

error: Webpack for react@3.x builder finished in 18721ms with errors:
./node_modules/@measured/dnd/dist/dnd.esm.js 1601:44
Module parse failed: Unexpected token (1601:44)
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
| function normalizeFamilies(pageBorderBox, candidates) {
|   const families = candidates.reduce((acc, candidate) => {
>     const familyName = candidate.parents[0]?.id || candidate.descriptor.id;
|     const family = acc[familyName] || [];
|     const generation = candidate.parents.length;

The thing is, there’s no unexpected token there. Probably would be solved by just updating webpack, but how can I do that?

2

Hi, did you manage to solve this error?

3

It seems you’re encountering a Webpack error related to the @measured/dnd library due to an unhandled file type. This error might be solved by adding the appropriate loader in your Webpack configuration.

To resolve this:

  1. Make sure your Webpack is updated.
  2. Install a proper loader for the .esm.js files (e.g., babel-loader or webpack-esm-loader).
  3. Add the loader to your webpack.config.js

I hope this helps