How to load static files inside react component while creating react library using webpack

Question

I am trying to create custom react library and wanted to load some files [js,data,wasm] from assets folder inside my react component but I am not able to load those files I tried multiple loaders. if someone can help it would be very helpful, i am basically trying to create one common package with webgl builds.


this is my component 

import React from "react";
import { Unity, useUnityContext } from "react-unity-webgl";

export default function UnityPlayer() {
        const { unityProvider } = useUnityContext({      
        loaderUrl: "./assets/WebGLExport.loader.js", //i tried import loaderUrl from ... as well
        dataUrl: "./assets/WebGLExport.data",
        frameworkUrl:"./assets/WebGLExport.framework.js",
        codeUrl: "./assets/WebGLExport.wasm",
      
    });

    return <Unity unityProvider={unityProvider} />;
}

this is webpack config, i tried multiple ways,

const path = require('path');

module.exports = {
    entry: './src/index.ts',
    mode: "production",
    output: {
        publicPath: '',
        path: path.resolve(__dirname, "dist"),
        filename: 'index.js',
        libraryTarget: 'umd',
        library: 'dt-lib'
    },
    module: {
        rules: [
            {
                test: /\.tsx?/,                
                use: ['ts-loader']
            },
            // {
            //     test: /\.script\.js$/,
            //     use: [
            //       {
            //         loader: 'script-loader',
            //         options: {
            //           useStrict: false,
            //         },
            //       },
            //     ]
            //   },
            {
                test: /\.(js|data|wasm)$/,
                loader: 'file-loader',
                options: {
                    name: './assets/[name].[ext]'
                }
            },     
            // {
            //     test: /\.(js|data|wasm)$/,
            //     loader: 'url-loader',
            //     options: {
            //         limit:false
            //     }
            // },      
        ]
    },
    externals: {
        react: 'react'
    },
    resolve: {
        fallback:{
            "crypto":false,
            "path":false,
            "fs":false,
            "ws":false
        },
        extensions: [".tsx", ".ts", ".js", ".data", ".wasm"]
    }
}

Carsten Codes · Accepted Answer · 2024-09-17 06:49:35Z

0

Have you tried to use require or import to resolve paths correctly, as Webpack will process these paths during build time?

import React from "react";
import { Unity, useUnityContext } from "react-unity-webgl";

// Use require for dynamic asset loading
export default function UnityPlayer() {
    const { unityProvider } = useUnityContext({
        loaderUrl: require("./assets/WebGLExport.loader.js"),
        dataUrl: require("./assets/WebGLExport.data"),
        frameworkUrl: require("./assets/WebGLExport.framework.js"),
        codeUrl: require("./assets/WebGLExport.wasm"),
    });

    return <Unity unityProvider={unityProvider} />;
}

answered Sep 17, 2024 at 6:49

Carsten Codes

1316 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Abhilash Tiwari Over a year ago

Yes I tried that, also tried to readfile from fs

Abhilash Tiwari Over a year ago

index.js:1 Uncaught TypeError: (0 , u.useUnityContext) is not a function at t.default (index.js:1:1) at renderWithHooks (react-dom.development.js:15486:1) at mountIndeterminateComponent (react-dom.development.js:20103:1) at beginWork (react-dom.development.js:21626:1) at HTMLUnknownElement.callCallback (react-dom.development.js:4164:1) at Object.invokeGuardedCallbackDev (react-dom.development.js:4213:1) at invokeGuardedCallback (react-dom.development.js:4277:1) at beginWork$1 (react-dom.development.js:27490:1)

Collectives™ on Stack Overflow

How to load static files inside react component while creating react library using webpack

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related