UncaughtError: React is not defined; when using fragment shorthand <> and importing from "react"

[ppozniak]

Describe the issue Application in production mode crashes when shorthand fragment <> is used and there is named import from "react"

Issue:

import { useState } from 'react'; // Note: Not importing React itself

// render function
<> // <== UncaughtError: React is not defined
  <div>
    Hello
  </div> 
</>

This is fixed by using <Fragment/> or/and probably importing React, but I don't think that's an expected behaviour.

Issue does not occur locally and build passes successfully

---

I'm using your typescript boilerplate with custom webpack config:

// webpack.config.prod.js
const {
  createWebpackConfigForProduction,
} = require('@commercetools-frontend/mc-scripts/webpack');
const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');

// Create the default config
const config = createWebpackConfigForProduction();

config.resolve.plugins = (config.resolve.plugins || []).concat([
  new TsconfigPathsPlugin(),
]);

// Export the config
module.exports = config;

[emmenko]

Hi @ppozniak 👋

Sorry for the late reply.

I'm not sure what the issue might be, so you would need to do some debugging. For example, does the error occur also when removing the custom webpack config?

In the typescript starter template we do use <> and we don't get any error, so I would assume that it's not an issue with the base setup.

https://github.com/commercetools/merchant-center-application-kit/blob/98a698148f38fce1808e85ba64e571f17842749c/application-templates/starter-typescript/src/components/welcome/welcome.tsx#L19

Let us know if you need further assistance.

[github-actions[bot]]

This issue has been marked as 'stale' due to its inactivity for the last 14 days. Please, add a new comment to keep the conversation going; otherwise, the issue will be closed in two weeks.

[github-actions[bot]]

This issue has been closed due to its inactivity for the last month. Please, feel free to reopen it and add a new comment in case you think the problem has not been resolved.