dev.zenroom.org: Zenroom in react is outdated (Medium is updated)

[andrea-dintino]

This is outdated: https://dev.zenroom.org/#/pages/zenroom-javascript3

This is updated: https://medium.com/think-do-tank/make-with-zencode-and-javascript-aka-easy-crypto-and-human-readable-smart-contracts-in-react-pt-ec91be04fd4d

[matteo-cristino]

Since the new release of react-scripts version 5 the javascript documentation is outdated and does not work anymore. The v5 excludes support for some node features and polyfills that were available in lower versions, i manage to overcome this first issue by installing (inside the freshly created app) react-app-rewired with the command:

yarn add react-app-rewired

followed by the the installation of all needed packages:

yarn add browserify-fs crypto-browserify path-browserify stream-browserify buffer zenroom

To use this new package creates config-overrides.js in the main root and copy inside it the following code:

module.exports = function override (config, env) {
    console.log('override')
    let loaders = config.resolve
    loaders.fallback = {
        "fs": require.resolve("browserify-fs"),
        "path": require.resolve("path-browserify"),
        "stream": require.resolve("stream-browserify"),
        "crypto": require.resolve("crypto-browserify"),
        "buffer": require.resolve("buffer")
    }
    return config
}

and inside package.json modify start from react-scripts start to react-app-rewired start. In this way it starts with no error, but it raise a warning sayng:

WARNING in ./node_modules/zenroom/dist/module/index.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from '/home/matteo/src/zenroom-react-test/node_modules/zenroom/src/index.ts' file: Error: ENOENT: no such file or directory, open '/home/matteo/src/zenroom-react-test/node_modules/zenroom/src/index.ts'

And the browser page will be white without printing the {"hello": "world"}, i have no clue on how to solve the last issue 😖