Typescript client (v1.0.49) breaks webpack build

binu · March 19, 2021, 12:20am

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:

github.com

ServiceStack/servicestack-client/blob/master/src/index.ts#L3-L9


declare let require:Function;
function nodeRequire() {
    //node require(), dynamic access to fix web ng aot build
    return typeof process === 'undefined' ? null : require;
}
let R = nodeRequire();
if (R) R('cross-fetch/polyfill');

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

github.com

ServiceStack/servicestack-client/blob/v1.0.48/src/index.ts#L1


import 'fetch-everywhere';


export interface IReturnVoid {
    createResponse();
}
export interface IReturn<T> {
    createResponse(): T;
}
export class ResponseStatus {
    public constructor(init?:Partial<ResponseStatus>) { Object.assign(this, init); }
    errorCode: string;

Steps to reproduce:

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

mythz · March 19, 2021, 3:43am

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.

Beej · April 4, 2021, 2:09am

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){}

mythz · April 4, 2021, 10:47am

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?

Beej · April 4, 2021, 4:22pm

./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?

mythz · April 4, 2021, 4:18pm

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

Beej · April 4, 2021, 4:26pm

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

Beej · April 4, 2021, 4:39pm

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

Beej · April 4, 2021, 4:46pm

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;
    }
}

mythz · April 4, 2021, 5:07pm

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.