Module parse failed: Unexpected token (38:6)

[topmagician]

Module parse failed: Unexpected token (38:6)

[nuxy]

Without seeing your code, but based on the error message itself, it looks like your missing the react-dom NPM package.

For example, the head of your component should look like..

import React       from 'react';
import ReactDOM    from 'react-dom';
import SlotMachine from 'react-slot-machine';

Hope this helps.

[topmagician]

Thanks for your response.
I am going to define the slot machine component and import it in index.tsx file.
Here is the component I made with your npm module.
It still shows the same error.
I already made the image file in the specified folder in this code.

import { useState } from 'react';
// @ts-ignore
import SlotMachine from 'react-slot-machine-gen'; // or '../dist/react-slot-machine-gen';

const SlotMachineWrapper = () => {
    const [isPlaying, setIsPlaying] = useState(false);

    const playEvent = () => {
        setIsPlaying(!isPlaying);
    }

    const reels = [
        {
            imageSrc: 'images/slot_bg.png',
            symbols: [
                {
                    title: 'cherry',
                    position: 100,
                    weight: 2
                },
                {
                    title: 'plum',
                    position: 300,
                    weight: 6
                },
                {
                    title: 'orange',
                    position: 500,
                    weight: 5
                },
                {
                    title: 'bell',
                    position: 700,
                    weight: 1
                },
                {
                    title: 'cherry',
                    position: 900,
                    weight: 3
                },
                {
                    title: 'plum',
                    position: 1100,
                    weight: 5
                }
            ]
        },

        // add more reels ...
    ]

    return (
        <>
            <SlotMachine reels={reels} play={isPlaying} />
            <button id="play-button" onClick={() => playEvent()}>Play</button>
        </>
    );
};

export default SlotMachineWrapper;

[nuxy]

FYI, this is not an issue with this package but an issue with your app configuration.

That being said, here is how you can overcome this.

Create new React application

$ create-react-app slot-machine-test
$ npm run eject
$ npm install react-slot-machine-gen

Update webpack.config.js

            // Process any JS outside of the app with Babel.
            // Unlike the application JS, we only compile the standard ES features.
            {
              test: /\.(js|mjs)$/,
              exclude: /@babel(?:\/|\\{1,2})runtime/,
              loader: require.resolve('babel-loader'),
              options: {
                babelrc: false,
                configFile: false,
                compact: false,
                presets: [
+                  ["@babel/preset-env"],
+                  ["@babel/preset-react", {"runtime": "automatic"}],

.. and then

     // Turn off performance processing because we utilize
     // our own hints via the FileSizeReporter
     performance: false,
+    resolve: {
+      alias: {
+        react: path.resolve('./node_modules/react'),
+      }
+    }
   };
};

Closing this issue.