React - Webpack v4 issue

General
1

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:

json-forms-web-pack-error
json-forms-web-pack-error1711×410 29.6 KB

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

2

Hi!

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.

3

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: [
    'react-hot-loader/babel',
    'babel-plugin-dynamic-import-node',
    '@babel/plugin-syntax-dynamic-import',
    '@babel/plugin-syntax-import-meta',
    '@babel/plugin-proposal-class-properties',
    '@babel/plugin-proposal-json-strings',
    ['@babel/plugin-proposal-decorators', { legacy: true }],
    '@babel/plugin-proposal-function-sent',
    '@babel/plugin-proposal-export-namespace-from',
    '@babel/plugin-proposal-numeric-separator',
    '@babel/plugin-proposal-throw-expressions',
    '@babel/plugin-proposal-export-default-from',
    '@babel/plugin-proposal-logical-assignment-operators',
    '@babel/plugin-proposal-optional-chaining',
    ['@babel/plugin-proposal-pipeline-operator', { proposal: 'minimal' }],
    '@babel/plugin-proposal-nullish-coalescing-operator',
    '@babel/plugin-proposal-do-expressions',
    '@babel/plugin-proposal-function-bind',
  ],
  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

4

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.

5

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

1 Like