?. Module parse failed: Unexpected token

[sapkra]

Checks

• Not a duplicate.
• Not a question, feature request, or anything other than a bug report directly related to React Splide. Use Discussions for these topics: https://github.com/Splidejs/splide/discussions

Version

0.6.5

Description

I only know the ?. syntax from TypeScript and I think that's the issue here.

ERROR in /node_modules/@splidejs/react-splide/dist/js/react-splide.esm.js 2449:16
Module parse failed: Unexpected token (2449:16)
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
|   }
|   go(control) {
>     this.splide?.go(control);
|   }
|   getSlides() {

Reproduction Link

No response

Steps to Reproduce

1. Install current react-splide version
2. Try to build it with webpack using es modules

Expected Behaviour

Should build without error

[NaotoshiFujita]

It's not a TypeScript specific feature.
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining

Webpack 5 supports the syntax.
webpack/webpack#10227

[sapkra]

Mhh, okay interesting and good to know. But for more context: This error appeared in the currect storybook version 6.3.12 which theoretically uses webpack 5.

[NaotoshiFujita]

What do you mean "theoretically"? Storybook supports both webpack 4 and 5, and the default version is still 4.

[sapkra]

Ohh ok sorry, I thought they switched to v5 in general. I'm sorry for the misunderstanding. At least we found the source of the problem.

[NaotoshiFujita]

😎👍

[dimaninc2]

I use the plugin with nextjs v11 which uses webpack 5, but i have the same error
node v12.19.0

[NaotoshiFujita]

If so, it's fatal for all nextjs users. You should report the bug to nextjs.

[dimaninc2]

i've also installed @babel/plugin-proposal-optional-chaining and created .babelrc with the following contents:

{
  "presets": [
    "next/babel"
  ],
  "plugins": [
    "@babel/plugin-proposal-optional-chaining"
  ]
}

and this didn't help

[NaotoshiFujita]

It's one of the solution for webpack4 to recognize the optional chaining. Webpack 5 does not require it since it uses the latest acorn under the hood.

[jindada]

Excuse me how to use react-splide with webpack4

{
  "plugins": [
    "@babel/plugin-proposal-optional-chaining"
  ]
}

this didn't help

[dimaninc2]

nextjs authors told me that "Next.js already supports optional chaining but node_modules are not compiled using Babel."

[NaotoshiFujita]

Ah, nextjs does not support transpiling node modules. It sounds very inconvenient.
vercel/next.js#706

Okay. I'll think about it.

[NaotoshiFujita]

I transpiled the chaining syntax(^0.6.7).

[dimaninc2]

thanks, mate!

[NaotoshiFujita]

👍

[jogeshpi03]

Could someone help me to get the exact issue here.

./node_modules/@splidejs/react-splide/dist/js/react-splide.esm.js
Module parse failed: Unexpected token (3221:2)
You may need an appropriate loader to handle this file type.
|   children: children2,
|   className,
|   ...props
| }) => {
|   return /* @__PURE__ */React.createElement("div", {