Import Splide in a no-Typescript React project failed

[GELight]

Checks

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

Version

^0.7.8

Description

In an older React project I like to use amazing Slide Slider but if I try to import the module in a React component I get this error:

[1163] ./node_modules/@splidejs/react-splide/dist/js/react-splide.esm.js 405 bytes {26} [built] [failed] [1 error]
    + 1184 hidden modules

ERROR in ./node_modules/@splidejs/react-splide/dist/js/react-splide.esm.js
Module parse failed: Unexpected token (2639:53)
You may need an appropriate loader to handle this file type.
| // src/js/components/SplideTrack/SplideTrack.tsx
| import React from "react";
| var SplideTrack = ({ children: children2, className, ...props }) => {
|   return /* @__PURE__ */ React.createElement("div", {
|     className: classNames("splide__track", className),
 @ ./node_modules/babel-loader/lib?{"presets":["@babel/preset-react",["@babel/preset-env",{"targets":["ie 10","last 2 versions"],"modules":"commonjs","useBuiltIns":"entry","corejs":3}]],"plugins":[["@babel/plugin-transform-classes",{"loose":true}],"lodash"]}!./node_modules/eslint-loader!./src/js/views/pages/hostlogin.jsx 26:19-52
 @ ./node_modules/bundle-loader?lazy!./src/js/views/pages/hostlogin.jsx
 @ ./src/js/views/pages ./node_modules/bundle-loader?lazy ^\.\/.*\.jsx$
 @ ./src/js/app.js
Version: webpack 3.12.0

Is there any way to use the package in React app without typescript?

Reproduction Link

No response

Steps to Reproduce

Dependencies in package.json:

{
  "devDependencies": {
    "@babel/core": "^7.10.2",
    "@babel/plugin-transform-classes": "^7.10.1",
    "@babel/preset-env": "^7.10.2",
    "@babel/preset-react": "^7.10.1",
    "babel-eslint": "^10.1.0",
    "babel-loader": "^8.1.0",
    "babel-plugin-lodash": "^3.3.4",
    "bundle-loader": "^0.5.6",
    "css-loader": "^0.15.1",
    "eslint": "^4.18.2",
    "eslint-loader": "^1.1.0",
    "eslint-plugin-lodash": "^2.6.1",
    "eslint-plugin-react": "^7.7.0",
    "grunt": "^1.0.3",
    "grunt-contrib-less": "^1.4.1",
    "grunt-contrib-uglify": "^3.3.0",
    "grunt-contrib-watch": "^1.1.0",
    "grunt-eslint": "^20.1.0",
    "grunt-githooks": "^0.6.0",
    "grunt-image-resize": "^1.0.0",
    "grunt-modernizr": "^2.0.1",
    "grunt-newer": "^1.3.0",
    "grunt-replace": "^1.0.1",
    "grunt-webpack": "^3.1.1",
    "imports-loader": "^0.7.1",
    "less": "^2.7.3",
    "less-loader": "^4.1.0",
    "load-grunt-tasks": "^3.5.2",
    "lodash-webpack-plugin": "^0.11.4",
    "optimist": "^0.6.1",
    "webpack": "^3.11.0",
    "webpack-dev-server": "^3.11.0"
  },
  "dependencies": {
    "@sentry/react": "^6.2.5",
    "@sentry/tracing": "^6.2.5",
    "@splidejs/react-splide": "^0.7.8",
    "@splidejs/splide": "^4.0.7",
    "backbone": "^1.3.2",
    "core-js": "^3.6.5",
    "gsap": "^1.20.3",
    "lodash": "^4.17.5",
    "marked": "^0.3.12",
    "pannellum": "^2.4.0",
    "pen": "^0.1.0",
    "react": "^15.6.2",
    "react-collapsible": "^2.0.4",
    "react-dnd": "^2.5.4",
    "react-dnd-html5-backend": "^2.5.4",
    "react-dom": "^15.6.2",
    "react-modal": "^2.4.1",
    "simple-ajax": "^1.0.1",
    "style-loader": "^0.8.3",
    "validator": "^3.39.0"
  }
}

Import in React component like docu:

import { Splide, SplideSlide } from '@splidejs/react-splide';

Expected Behaviour

Ability to use Splide in a non-Typescript project.