Error in a react app with latest servicestack client

#1

Hi by adding the latest service stack client on a react app with create-react-app i get the following error.

	Error: Cannot find module 'cross-fetch/polyfill'
▼ 3 stack frames were expanded.
webpackEmptyContext
src/sense-club-web/sense-admin-ui/node_modules/@servicestack/client/dist sync:2
(anonymous function)
src/sense-club-web/sense-admin-ui/node_modules/@servicestack/client/dist/index.js:32
./node_modules/@servicestack/client/dist/index.js
http://localhost:3000/static/js/vendors~main.chunk.js:5962:30
#2

Which template are you using react-spa? Can you also confirm if you’re using the latest v1.0.50?

#3

i’m using a standalone react app created with the official react cli.

These are the servicestack libs i manually added to my project

"@servicestack/client": "^1.0.50",
"@servicestack/react": "^1.0.6",
#4

Can you try with the latest ^1.0.51?

#5

Got same error.
But i have tried on a clean project and it seem to work maybe is something that is on my project. I’m using tailwind with craco maybe is interfering with the loading of that library. I’m going to investigate if is the case and let you know

#6

I’ve tried on a new create-react-app and I can run & build the app without issues.

The change I did was node detection to change from looking for process to checking for window, i.e:

function nodeRequire() {
    //node require(), using dynamic access to fix web ng aot build
    try {
        return typeof window !== 'undefined' ? null : (typeof require !== 'undefined' ? require : null);
    }
    catch (e) {
        return null;
    }
}
var R = nodeRequire();
if (R) R('cross-fetch/polyfill'); //fetch polyfill only required for node.js

@servicestack/client doesn’t have any dependencies when used in a web browser, the cross-fetch/polyfill import should only be loaded when running in node.js to load its node-fetch polyfill implementation of fetch.

The error should be gone now as it shouldn’t be trying to load the dependency anymore, unless something is interfering with it and reassigning window as undefined or something.

1 Like
#7

I think a found the issue. there was some conflict caused by a bad installation of tailwindcss.I problably swapped npm command with yarn last night :sweat_smile:.

the command i should have used are these from their docs.
Installation - Tailwind CSS

npm uninstall tailwindcss postcss autoprefixer
npm install -D tailwindcss@npm:@tailwindcss/postcss7-compat @tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9

I got confused because with the old servicestack package it was working fine, but was giving that error on the newest. :face_with_monocle:

1 Like