Failed to compile: You may need an additional loader to handle the result of these loaders.

[hungyifang]

Hello, I'm a novice in react, and I encounter this error.
How can I solve this or what I am missing.
./node_modules/react-use-pagination/dist-module/react-use-pagination.mjs 52:85
Module parse failed: Unexpected token (52:85)
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.
  |
  | case "SET_PAGESIZE":

  return limitPageBounds(rootState.totalItems, action.pageSize)(action.nextPage ?? state);

|
| case "SET_TOTALITEMS":

[msniezynski]

I have same issue, make a dist with older syntax please

[Hwacc]

I have same issue too.
Currently the solutions is that:

1. You could copy out the sourcecode from dist-module/react-use-pagination.mjs to your project
   and make sure your babel configs include presets: ['@babel/preset-env'] or 'plugins' have '@babel/plugin-proposal-nullish-coalescing-operator'. (Suggested).

2. You could remove js rules exclude: /node_modules/ in your webpack config file, it will compile all files in node_moules, so that's not suggested.

3. Also, you could folk this repository, and write your owned esbuild config to compile '??' symbol and build moudles. Then import to your project.

4. Wait for update 😃

[rodgracas]

For projects bootstraped with CRA (Create React App), and don't want to eject, do these steps:

• Install CRACO (https://github.com/gsoft-inc/craco/blob/master/packages/craco/README.md#installation) and follow the steps (install, update npm scripts and create craco.config.js file)

• Add the webpack and babel configurations below to your craco.config.js file. This was the 1st suggestion from @Hwacc

// craco.config.js
module.exports = {
  webpack: {
    configure: {
      module: {
        rules: [
          {
            test: /\.mjs$/,
            include: /node_modules/,
            type: "javascript/auto"
          }
        ]
      }
    }
  },
  babel: {
    plugins: ['@babel/plugin-proposal-nullish-coalescing-operator'],
    presets: ['@babel/preset-env']
  },
  // more options
}