Unexpected token '<' (at VM201 Build.loader.js:1:1)

[inar-vision]

Please avoid duplicates

• I checked all open issues and discussions and none of them matched my problem.

Language and Compiler

Babel and WebPack JavaScript

What environment are you using?

Local Development Server

When does your problem occur?

When the Context is created

What does your problem relate to?

The problem seems React related

React-Unity-WebGL Version

9.4.0

React Version

18.2.0

Unity Version

2021.3.4f1

What happened?

• First I've created a "create-react-app"
• Npm install react-unity-webgl
• Set the Unity Config object as I think it should be set
• npm start

I get an Error about unexpected token..? Seems to be that a lot of people have got this, but I can't seem to figure this out.

Reproducible test case

No response

Would you be interested in contributing a fix?

• yes, I would like to contribute a fix

[Jeffrey Lanters]

Remove ../public from your URLs, that should fix it.

[inar-vision]

Not entirely, I'm getting a couple new error on Build.framework.js

[Jeffrey Lanters]

You've removed too much, Keep the leading / 😁

[inar-vision]

That's not it. :( Trust me, I've tried pretty much every combination on those paths..

[Sergey Levkovich]

Have the same error.
create-react-app with react-unity-webgl

[Sergey Levkovich]

In appearance, there are some problems when working specifically with CRA, because the installation in react project, which was created by "hands" (https:/dev.to/stepstep.to/ivadyhabimana/how--create-a-withwithout-appervice-creang----reactrea-appBusi-a30nl) - everything works

[willy20040711]

The link seem don't work any more.

In appearance, there are some problems when working specifically with CRA, because the installation in react project, which was created by "hands" (https:/dev.to/stepstep.to/ivadyhabimana/how--create-a-withwithout-appervice-creang----reactrea-appBusi-a30nl) - everything works

[Miguel]

i have the same error with CRA and react-unity-webgl.

@levkovich2806 can you reupload the link with created by ¨hands¨ solution plz?

[Sergey Levkovich]

Create react app without CRA - https://dev.to/ivadyhabimana/how-to-create-a-react-app-without-using-create-react-app-a-step-by-step-guide-30nl

[Miguel]

Thanks @levkovich2806!

I have tried to use the library with Vite instead of CRA and it works perfectly.

[whitetac]

you can fix with CRA

add webpack.config.js in project root

example webpack.config.js

const HtmlWebpackPlugin = require('html-webpack-plugin');
const path = require('path');

module.exports = {
    entry: './index.js',
    mode: 'development',
    output: {
        path: path.resolve(__dirname, './dist'),
        filename: 'index_bundle.js',
        publicPath: '/'
    },
    target: 'web',
    devServer: {
        port: '5000',
        static: {
            directory: path.join(__dirname, 'public')
        },
        open: true,
        hot: true,
        liveReload: true,
    },
    resolve: {
        extensions: ['.js', '.jsx', '.json'],
    },
    module: {
        rules: [
            {
                test: /\.(js|jsx)$/,
                exclude: /node_modules/,
                use: 'babel-loader',
            },
        ],
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: path.join(__dirname, 'public', 'index.html')
        })
    ]
};

[Tina Nguyen]

I have the same exact problem, with the URLs correct and everything, however my project wasn't created from create-react-app, but rather I pulled a react template and started modifying it. What should I do in this case? The template is CoreUI incase you're wondering.

Edit: I realized there's a "WebGL" extra text in the dataurl, however even after fixing that. The problem remains the same.