Typescript client (v1.0.49) breaks webpack build

New changes in the typescript servicestack-client silently breaks builds done with webpack. It is silent in that webpack still outputs the bundle, but the resulting build leads to no javascript being run:

Webpack does emit a warning, however:

WARNING in ./node_modules/@servicestack/client/dist/index.js
24:51-58 Critical dependency: require function is used in a way in which dependencies cannot be statically extracted
 @ ./node_modules/@servicestack/client/dist/index.js
 @ ./src/shared/index.tsx
 @ ./src/index.tsx
 @ multi ./node_modules/react-scripts-ts/config/polyfills.js ./src/index.tsx

My guess is that the conditional require is the culprit:

Downgrading to version “1.0.48” seems to fix it (this version does not have the conditional require):

Steps to reproduce:

  1. x new react-spa ProjectName
  2. cd ProjectName/ProjectName
  3. Change the @servicestack/client dependency version to be ^1.0.49 in package.json
  4. npm install
  5. Run the project (the error occurs in dev mode as well as a prod build)

Should be resolved in ^1.0.50 by guarding against accessing node’s undefined require function.

Note: It’s intended to use require dynamically so that it only requires the fetch polyfill in node.js, using @servicestack/client in the browser is stand-alone & doesn’t need to import any dependencies.

In the latest release we’ve also switched from fetch-everywhere to cross-fetch since fetch-everywhere is abandoned and was referencing an outdated version of node-fetch which has vulnerabilities.

1 Like

i’m still getting this with @servicestack/client 1.0.51

i don’t need the nodejs bits where i’m at currently… the following structure avoids the error in my react webpack context, would it still work for the node contexts you’re covering?

try {
    typeof window === 'undefined' && typeof require !== 'undefined' && require('cross-fetch/polyfill'); //fetch polyfill only required for node.js
}
catch(e){}

Can’t use the require function directly, what’s the full Error message that you’re getting and which template are you using react-spa?

./node_modules/@servicestack/client/dist/index.js
Critical dependency: require function is used in a way in which dependencies cannot be statically extracted

my project is built up from the main npx create-react-app baseline… going back a year or so ago, i definitely tried starting with the service stack react-spa template but vaguely remember something about the ss template’s dev.js startup flow wasn’t giving me the full npm start experience i was accustomed to from CRA

this warning looks to be triggering from react-scripts’ internal webpack/eslint config…

i’m hoping to remain un-ejected and have a “rewire” library in play (@craco) so i could probably silence this warning with a config override but would be nice to reach more compatible resolution

well correlated facebook/cra github issue… no great answers there that i can tell
another good thread under webpack issues

how would you feel about using this eval(‘require’) approach?

Is it just a warning? or an actual error that stops the app from building or working?

oh cool you’re online =)

it is just a warning in dev mode but i think these turn into errors in production npm run build… double checking that now…hmmm … i got a “failed to compile” error but need to find a log to see if it’s related or some other issue due to other recent module upgrades

ok can confirm just a warning, production build does not fail… so i can live with it… there’s of course the usual preference to keep that output as clean as possible

would returning eval(‘require’) work for node? i can confirm this does avoid the warning in my context

function nodeRequire() {
    //node require(), using dynamic access to fix web ng aot build
    try {
        return typeof window !== 'undefined' ? null : (typeof require !== 'undefined' ? eval('require') : null);
    }
    catch (e) {
        return null;
    }
}

I prefer not to use eval in JS which is generally regarded as bad practice, apart from the added security flags it raises, it can also degrade performance.