What changes should be made to make it work with custom webpack config.

[shubhamdeodia]

Is there any specific guide to make it work with custom webpack config.

When I tried it is just tries to find the bundle.js on the keycloak domain and gives 404 error.

Any suggestion, how can I fix it or using create-react-app is absolutely essential ?

[garronej]

Hi @shubhamdeodia,

This tool assumes you are bundling your app with Webpack (tested with 4.44.2) . It assumes there is a build/ directory at the root of your react project directory containing an index.html file and a build/static/ directory generated by webpack.

ref

To be honest I haven't tested it outside of CRA but in theory if those conditions are met it should work.
What is absolutely mandatory is for it to be an SPA.

[shubhamdeodia]

@garronej

When I use create-react-app, the output in login.ftl is

<script src="${url.resourcesPath}/build/static/js/main.0f9069ba.chunk.js">

but when I use custom webpack config, the output is

<script defer="" src="static/js/bundle.62a50c2a96c578a95c88.bundle.js"></script>

any idea what might be causing this. why in my case generated theme is missing ${url.resourcesPath}

[garronej]

Maybe if I can see the repo...

[shubhamdeodia]

@garronej : This issue got resolved, I just needed to add publicPath: '/' to my webpack config.

But I am running into another issue,

Uncaught ReferenceError: browser is not defined
    at Object.51211 (useEvt.js:32)
    at n (deepmerge.js:5)
    at Object.17330 (index.js:11)
    at n (deepmerge.js:5)
    at Object.34580 (useGlobalState.js:25)
    at n (deepmerge.js:5)
    at Object.20753 (useKcLanguageTag.js:4)
    at n (deepmerge.js:5)
    at Object.58840 (kcContextMocks.js:42)
    at n (deepmerge.js:5)

I am using webpack 5 and for some reason it is just not able to find browser and process env, even after using env plugin.

[garronej]

Ok.I think I can solve that

[shubhamdeodia]

@garronej : Really appreciate that.

[garronej]

I dont understand... there is no mention of browser on line 32 of useEvt.js...?
Do you have an idea? can you confirm that you are using evt version: 2.0.0-beta.38 ?

[garronej]

Does it craches at runtime or when building?

[shubhamdeodia]

@garronej

It crashes during runtime, and that browser issue came after I tried to fix this one.

var isWindows = process.platform === 'win32';

[garronej]

ok that makes a lot more sence

[garronej]

This error should be fixed in 4.2.2

[garronej]

@shubhamdeodia is it though?

[shubhamdeodia]

@garronej Aplogise for my last comment, that was an issue in my code.

I will test and see if env variables are working fine now.

[garronej]

Ok no problem, let me know if you need help.

[shubhamdeodia]

It works fine, we can close this ticket, Thanks for all the help.

[ddubrava]

@garronej

Hi! What about these errors (Uncaught ReferenceError: process is not defined)?

I adjusted webpack.DefinePlugin

plugins: [
  new DefinePlugin({
    'process.env.PUBLIC_URL': JSON.stringify('/'),
  }),
]

But now it throws 404, since it tries to get src_login_KcApp_tsx.bundle.js from http://localhost:8080/ instead of http://localhost:8080/resources/mg9u1/login/keycloak-theme/build/.

If I set it to JSON.stringify(''), the same issue load script:40 GET http://localhost:8080/9047.bundle.js net::ERR_ABORTED 404 (Not Found).