DEV Community

loading...

Discussion on: WebAssembly with Rust and React (Using create-react-app)

Collapse
chasahodge profile image
Charles Hodge

Lokesh, I'm implementing your template into an existing React app but the componentDidMount assignment of a value to this.state.nativeModule doesn't stick:

class BudgetTable extends Component {
...
componentDidMount() {
    import("../../native/build").then(native => {
        this.setState({
          nativeModule: native
        });
    });
    ...
}
Enter fullscreen mode Exit fullscreen mode

When I examine the state value of nativeModule right after the import setState it has an object value, however when accessing the state value of nativeModule in the function that accesses the state value of nativeModule it's null.

    const {
        nativeModule,
    } = this.state.nativeModule;
Enter fullscreen mode Exit fullscreen mode

config-override has the following assignments:

config.plugins = (config.plugins || []).concat([
    new WasmPackPlugin({
        crateDirectory: path.resolve(__dirname, "./src/native"),
        extraArgs: "--no-typescript",
        outDir: path.resolve(__dirname, "./src/native/build")
    }),
]);
Enter fullscreen mode Exit fullscreen mode

The file that contains this code located at: ./src/BudgetManager/ClientBudget/BudgetTable.js

Any ideas? Could it be because the import isn't happening in the App.js file?
Thanks.