How to prevent collapseWhitespace in create-react-app

Question

I have run into issue related to How to avoid JSX component from condensing when React.js rendering it? . I would like to find a way how to avoid using {' '} . I have red somewhere that changing collapseWhitespace to false in webpack could resolve it. Is it achievable?

Answer 1

Inside JSX create-react-app will not collapse any white space, so

<p>Hello   World - Hello{'   '}World</p>

will result in:

<p>Hello   World - Hello   World</p>

However, the browser will usually collapse these white spaces into a single one. To prevent this set the 'white-space' css property like this:

<p style={{ whiteSpace: 'pre' }}>Hello   World - Hello{'   '}World</p>

The collapseWhitespace property exists for HTML minification as part of the html-webpack-plugin. This property is true for CRA and will minify the contents of public/index.html . In order to disable it you would have to eject .

See: cra-webpack-config