DEV Community

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

View post
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.

Collapse
 
lokesh007 profile image
Lokesh Prabakaran •

Hello Charles, my sincere apologies for replying to this quite late.

From looking at your code, it looks you need to update the path relative to the file in which you are importing.

Since you trying to import the build in BudgetTable.js, please update the import path in componentDidMount to reflect the relative path to the build file from the directory of BudgetTable.js.