Error when using @cardano-sdk/core

[aryelciu001]

Why does this happen? I can import @cardano-sdk/cip30 without any issue

[mkazlauskas]

Could you please post more information about your environment / build setup?

[aryelciu001]

React with typscript, I will post full details later

[aryelciu001]

tsconfig.json

{
  "compilerOptions": {
    "baseUrl": ".",
    "target": "esnext",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "commonjs",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx"
  },
  "include": [
    "src"
  ]
}

package.json

{
  "name": "tosidrop-client",
  "version": "1.0.0",
  "description": "TosiDrop Frontend React App",
  "engines": {
    "node": ">=16",
    "npm": ">=8"
  },
  "dependencies": {
    "@emurgo/cardano-serialization-lib-asmjs": "^11.1.0",
    "@emurgo/cip14-js": "^3.0.1",
    "@fortawesome/fontawesome-common-types": "^6.1.1",
    "@fortawesome/fontawesome-svg-core": "^6.1.1",
    "@fortawesome/free-brands-svg-icons": "^6.1.1",
    "@fortawesome/free-solid-svg-icons": "^6.1.1",
    "@fortawesome/react-fontawesome": "^0.1.18",
    "@reduxjs/toolkit": "^1.8.1",
    "@types/node": "^16.11.25",
    "@types/react": "^17.0.39",
    "@types/react-dom": "^17.0.11",
    "axios": "^0.27.2",
    "buffer": "^6.0.3",
    "bulma": "^0.9.3",
    "copy-to-clipboard": "^3.3.2",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-native": "^0.67.4",
    "react-qr-code": "^2.0.5",
    "react-redux": "^8.0.0",
    "react-router-dom": "^6.2.2",
    "react-scripts": "5.0.0",
    "react-simple-tooltip": "^2.6.3",
    "react-spinners": "^0.11.0",
    "sass": "^1.49.9",
    "ts-node": "^10.7.0",
    "typescript": "^4.5.5",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "PORT=3001 react-scripts --max-old-space-size=8192 start",
    "clean": "rm -rf build/* node_modules",
    "build": "npm install && react-scripts --max_old_space_size=8192 build",
    "test": "react-scripts test --passWithNoTests",
    "eject": "react-scripts eject",
    "format": "npx prettier --write src"
  },
  "proxy": "http://localhost:3000",
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "autoprefixer": "^9.8.8",
    "postcss": "^8.4.14",
    "tailwindcss": "^3.1.6"
  }
}

[mkazlauskas]

react-scripts uses webpack and you need a custom config to get it working. See webpack.config.js in our web-extension e2e tests as an example. These are the important options (don't necessarily need all of those for just core package):

{
  experiments: {
    syncWebAssembly: true
  },
  plugins: [
    new NormalModuleReplacementPlugin(
      /@dcspark\/cardano-multiplatform-lib-nodejs/,
      '@dcspark/cardano-multiplatform-lib-asmjs'
    ),
    new NormalModuleReplacementPlugin(/blake2b$/, 'blake2b-no-wasm'),
    new NormalModuleReplacementPlugin(
      /@emurgo\/cardano-message-signing-nodejs/,
      '@emurgo/cardano-message-signing-asmjs'
    ),
    new ProvidePlugin({
      Buffer: ['buffer', 'Buffer'],
      process: 'process/browser'
    }),
    new IgnorePlugin({
      contextRegExp: /bip39\/src\/wordlists$/,
      resourceRegExp: /^\.\/(?!english)/
    })
  ],
  resolve: {
    extensions: ['.ts', '.js'],
    fallback: {
      buffer: require.resolve('buffer/'),
      events: require.resolve('events/'),
      fs: false,
      'get-port-please': false,
      http: false,
      net: false,
      os: false,
      path: false,
      stream: require.resolve('readable-stream'),
      util: require.resolve('util/')
    }
  }
}