DAPR setup issue in CRA app

skolkerom commented 1 year ago

Expected Behavior

Sucsessful DAPR setup in CRA app (https://create-react-app.dev/)

Actual Behavior

I'm getting error like this

Module` not found: Error: Can't resolve 'crypto' in 'C:\temp\it-dev\dapr.demo\dapr.createreactapp\node_modules\@dapr\dapr\actors'
BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
        - add a fallback 'resolve.fallback: { "crypto": require.resolve("crypto-browserify") }'
        - install 'crypto-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
        resolve.fallback: { "crypto": false }

Then I installed customize-cra and react-app-rewired packages and tried to add all needed polyfills into config-overrides.js as such:

const { override } = require('customize-cra');

module.exports = override(
    (config) => {
        config.resolve.fallback = {
            ...config.resolve.fallback,
            http: require.resolve('stream-http'),
            crypto: require.resolve('crypto-browserify'),
            https: require.resolve('https-browserify'),
            util: require.resolve('util/'),
            tls: false,
            http2: false,
            net: require.resolve('net-browserify'),
            dns: require.resolve('dns-then'),
            querystring: require.resolve('querystring-es3'),
            zlib: require.resolve('browserify-zlib'),
            path: require.resolve('path-browserify'),
            fs: false,
            stream: require.resolve('stream-browserify'),
            os: require.resolve('os-browserify/browser'),
            url: require.resolve('url/'),
            buffer: require.resolve('buffer/'),
            assert: require.resolve('assert/')
        };

        return config;
    }
);

In that case I'm getting the error

TypeError: Cannot read properties of undefined (reading 'prototype')
    at ./node_modules/express/lib/response.js (http://localhost:3000/static/js/bundle.js:78298:45)
    at options.factory (http://localhost:3000/static/js/bundle.js:176924:31)
    at __webpack_require__ (http://localhost:3000/static/js/bundle.js:176363:33)
    at fn (http://localhost:3000/static/js/bundle.js:176581:21)
    at ./node_modules/express/lib/express.js (http://localhost:3000/static/js/bundle.js:77566:11)
    at options.factory (http://localhost:3000/static/js/bundle.js:176924:31)
    at __webpack_require__ (http://localhost:3000/static/js/bundle.js:176363:33)
    at fn (http://localhost:3000/static/js/bundle.js:176581:21)
    at ./node_modules/express/index.js (http://localhost:3000/static/js/bundle.js:76903:18)
    at options.factory (http://localhost:3000/static/js/bundle.js:176924:31)

Steps to Reproduce the Problem

Create CRA app using npx create-react-app my-app
Install @dapr/dapr using npm i @dapr/dapr
Add import { DaprClient } from "@dapr/dapr"; into App.jsx file
Build and run app: PS> npm run build; npm start

XavierGeerinck commented 1 year ago

Hi!

Are you running Dapr with NodeJS? Currently it is only supported in the NodeJS runtime

Kind regards, Xavier Geerinck

Sent from Outlook for iOShttps://aka.ms/o0ukef

From: skolkerom @.> Sent: Wednesday, April 5, 2023 11:41:14 AM To: dapr/js-sdk @.> Cc: Subscribed @.***> Subject: [dapr/js-sdk] DAPR setup issue in CRA app (Issue #473)

Expected Behavior

Sucsessful DAPR setup in CRA app (https://create-react-app.dev/)

Actual Behavior

I'm getting error like this

`Module not found: Error: Can't resolve 'crypto' in @.***\dapr\actors' BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default. This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:

add a fallback 'resolve.fallback: { "crypto": require.resolve("crypto-browserify") }'
install 'crypto-browserify' If you don't want to include a polyfill, you can use an empty module like this: resolve.fallback: { "crypto": false } `

Then I installed customize-cra and react-app-rewired packages and tried to add all needed polyfills into config-overrides.js as such:

`const { override } = require('customize-cra');

module.exports = override( (config) => { config.resolve.fallback = { ...config.resolve.fallback, http: require.resolve('stream-http'), crypto: require.resolve('crypto-browserify'), https: require.resolve('https-browserify'), util: require.resolve('util/'), tls: false, http2: false, net: require.resolve('net-browserify'), dns: require.resolve('dns-then'), querystring: require.resolve('querystring-es3'), zlib: require.resolve('browserify-zlib'), path: require.resolve('path-browserify'), fs: false, stream: require.resolve('stream-browserify'), os: require.resolve('os-browserify/browser'), url: require.resolve('url/'), buffer: require.resolve('buffer/'), assert: require.resolve('assert/') };

return config;

}

); `

In that case I'm getting the error

Steps to Reproduce the Problem

Create CRA app using npx create-react-app my-app
Install @dapr/dapr using npm i @dapr/dapr
Add import { DaprClient } from @.***/dapr"; into App.jsx file
Build and run app: PS> npm run build; npm start

— Reply to this email directly, view it on GitHubhttps://github.com/dapr/js-sdk/issues/473, or unsubscribehttps://github.com/notifications/unsubscribe-auth/AAEQLMUQR3VOIHPOLMBLUW3W7U43VANCNFSM6AAAAAAWT2SVUM. You are receiving this because you are subscribed to this thread.Message ID: @.***>

skolkerom commented 1 year ago

Hi!

Yes, CRA is NodeJS app

NodeJS version I'm trying to run the CRA app on is

node -v
v16.18.0

XavierGeerinck commented 1 year ago

This is to initialize a React project which uses NPM underlying :) node will not be used on the frontend serving part where your browser is running the files. This means that the crypto module is also not working as it should, but you can polyfill this to get that working. This is however outside the scope of the Dapr project as we are a backend-facing only project at the moment

dapr / js-sdk