Class extends value undefined is not a constructor or null (@stricahq/cbors/dist/Decoder.js)

[sennykalidien]

When using React w/ Webpack with the latest versions of meshsdk: "@meshsdk/core": "1.6.8", "@meshsdk/react": "1.6.8",

I get the following TypeError: Class extends value undefined is not a constructor or null

Full error message: TypeError: Class extends value undefined is not a constructor or null at ../../node_modules/@stricahq/cbors/dist/Decoder.js (http://localhost:6006/vendors-node_modules_meshsdk_core_dist_core_-0c8d45.iframe.bundle.js:144431:30) at __webpack_require__ (http://localhost:6006/runtime~main.iframe.bundle.js:28:33) at fn (http://localhost:6006/runtime~main.iframe.bundle.js:434:21) at ../../node_modules/@stricahq/cbors/dist/index.js (http://localhost:6006/vendors-node_modules_meshsdk_core_dist_core_-0c8d45.iframe.bundle.js:145094:17) at __webpack_require__ (http://localhost:6006/runtime~main.iframe.bundle.js:28:33) at fn (http://localhost:6006/runtime~main.iframe.bundle.js:434:21) at ../../node_modules/@meshsdk/core-cst/dist/index.js (http://localhost:6006/vendors-node_modules_meshsdk_core_dist_core_-0c8d45.iframe.bundle.js:40382:74) at __webpack_require__ (http://localhost:6006/runtime~main.iframe.bundle.js:28:33) at fn (http://localhost:6006/runtime~main.iframe.bundle.js:434:21) at http://localhost:6006/vendors-node_modules_node_modules_meshsdk_core_dist_core_-0c8d45.iframe.bundle.js:76461:75

Last known versions when I didn't got this error: "@meshsdk/core": "1.5.25", "@meshsdk/react": "1.1.12",

[HinsonSIDAN]

Any repo can be shared / specific way to reproduce?

[jinglescode]

@sennykalidien install version 1.6.9, also to ensure that dependencies packages are also up to date, try npm install @meshsdk/[email protected] too

[sennykalidien]

@HinsonSIDAN I'll create a repo that will reproduce this error later today. @jinglescode I'll try this and will report back if it worked.

[i-jump]

I also encountered this problem and don't know how to solve it

[sennykalidien]

@HinsonSIDAN I've created a small repo with React, Webpack 5, Babel and Storybook.

in ./storybook/main.js you can find the additional Webpack config needed to work with MeshJS.

@jinglescode I've made sure all dependencies are up to date and installed meshsdk/[email protected]. It did not help unfortunately.

Link to repo to reproduce issue: https://github.com/sennykalidien/meshjs-react-example

Packages:

"@meshsdk/core": "^1.6.9",
"@meshsdk/core-cst": "^1.6.9",
"@meshsdk/react": "^1.6.9",
"buffer": "^6.0.3",
"stream": "^0.0.3"

Hope this helps.

[HinsonSIDAN]

Just done basic investigation, it should be something around package compilation in the strica dependency, so it might not be a quick fix. we will continue investigating workaround and see if there is a more universally clean fix for this.

[Tarbez]

i'm having the same issue... is there a fix yet?

[jinglescode]

add another report:

It's a dependency pulled in somewhere either directly by Mesh or transitively (I would guess directly). @strahq/cbors/Decoder.js:55 defines a type which inherits from node stream, which is undefined, which throws an error.

[lisicky]

This config should help. But don’t forget to install packages that are used here, otherwise it won’t work

const path = require('path');
const webpack = require('webpack');
const NodePolyfillPlugin = require('node-polyfill-webpack-plugin');

module.exports = {
  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
  addons: ["@storybook/addon-webpack5-compiler-babel"],
  framework: {
    name: "@storybook/react-webpack5",
    options: {},
  },
  webpackFinal: async (config) => {
    // Provide polyfills for Node.js core modules
    config.plugins.push(new NodePolyfillPlugin());

    // Provide global variables
    config.plugins.push(
        new webpack.ProvidePlugin({
          Buffer: ['buffer', 'Buffer'],
          process: 'process/browser',
        }),
    );

    config.resolve.alias = {
      ...config.resolve.alias,
      react: path.resolve(__dirname, '../node_modules/react'),
      'react-dom': path.resolve(__dirname, '../node_modules/react-dom'),
    };

    // Update resolve.fallback
    config.resolve.fallback = {
      ...config.resolve.fallback,
      stream: require.resolve('stream-browserify'),
      buffer: require.resolve('buffer/'),
      // Add other fallbacks if necessary
    };

    // Include @stricahq/cbors in Babel transpilation
    config.module.rules.push({
      test: /\.(js|jsx|ts|tsx)$/,
      include: [
        path.resolve(__dirname, '../src'),
        path.resolve(__dirname, '../node_modules/@stricahq/cbors'),
        // Add other modules if necessary
      ],
      use: {
        loader: 'babel-loader',
        options: {
          presets: [
            '@babel/preset-env',
            '@babel/preset-react',
            '@babel/preset-typescript',
          ],
          plugins: [
            '@babel/plugin-proposal-class-properties',
            '@babel/plugin-transform-runtime',
            '@babel/plugin-transform-modules-commonjs',
          ],
          sourceType: 'unambiguous',
        },
      },
    });

    // Enable WebAssembly support in the experiments section
    config.experiments = {
      ...config.experiments,
      // asyncWebAssembly: true,
      // Uncomment the next line if you need synchronous WebAssembly
      syncWebAssembly: true,
      layers: true,
    };

    // Remove the invalid 'asyncWebAssembly' property from output.environment
    // You can include other valid properties if needed
    config.output.environment = {
      ...config.output.environment,
    };

    return config;
  },
};

[HinsonSIDAN]

Closing as dependency is removed