React - Webpack v4 issue

Hello, I’m having this issue when trying to implement the JsonForms component. I’m currently experiencing an issue where the Form does not render & I get an error in the console from Webpack saying I need an appropriate loader to handle this file:

Please help as I’ve tried adding a loader to resolve this issue but that has not worked


We are distributing our code in the latest ECMA standard so your build tooling is required to understand the used syntax.

For example the older create-react-app (<v5) tooling did not support this out of the box and required adding the babel plugins @babel/plugin-proposal-optional-chaining and @babel/plugin-proposal-nullish-coalescing-operator plugins.

Hey thanks for the quick response!

Oddly enough I do use the babel plugins you mention below:

My babel.config.js file is as follows:

 module.exports = {
  env: { test: { plugins: ['dynamic-import-node'] } },
  plugins: [
    ['@babel/plugin-proposal-decorators', { legacy: true }],
    ['@babel/plugin-proposal-pipeline-operator', { proposal: 'minimal' }],
  presets: ['@babel/preset-env', '@babel/preset-react'],

However I’m still presented with the error from my original post. Not too sure if I am missing something

In your webpack config, is the babel-loader configured to handle all Javascript files? For example you might only use it for your source files but not for dependencies.

this worked for me, thanks! I just needed find a way to include only the JSON forms dependencies - thanks alot!

1 Like