JSON Forms breaking when build gets deployed

Hello, I’m having this issue where it seems like JSONForms is causing a minification issue(I think) when a the build gets deployed to our Dev environment & we get the following error in the console

^ this is why I think it could be a minification problem since the file its complaining about seems to be minified however I disabled the minification & the problem still persists

Note: I catered for the transpiling of the library in Webpack & its working locally but breaks when it build gets deployed into Dev environment & when I run the Dev build locally there is also no problem

Hi @alexj,

I don’t have sufficient information to help you here. We’re not aware of any minification issues with JSON Forms.

To assist you better, could you please provide more details? Specifically:

  1. The exact error messages you’re seeing in the console.
  2. Your Webpack configuration and any relevant build scripts.
  3. Details about your development environment
  4. Which packages and versions of JSON Forms you are using

Can you confirm that removing JSON Forms from your code avoids this issue?

Hey @sdirix

  1. This is the current error I’m getting in the console & its seems to be coming from this minified file

    when I click on the file & the path of where this error is coming from I see the error is on this line

(** Insert error on line 8 from minified main.js **)
^ I can’t insert more than one embedded image

  1. This is my current webpack config with the build steps I’m using
  • Webpack config (webpack.config.prod.js)
/* eslint-disable import/no-extraneous-dependencies */
const path = require('path');
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
const webpack = require('webpack');

const join = path.join.bind(null, __dirname, '..');

module.exports = {
  context: join('src'),
  mode: 'production',
  devtool: false,
  entry: ['../src/core/vendor.js'],
  optimization: {
    minimize: true,
    minimizer: [
      new UglifyJSPlugin({
        uglifyOptions: {
          mangle: {
            safari10: true,
          },
        },
      }),
    ],
  },
  module: {
    rules: [
      {
        exclude: [/node_modules\/(?!(@jsonforms)\/).*/, /\.test\.jsx?$/],
        test: /\.(js|jsx)$/,
        use: [{ loader: 'babel-loader' }],
      },
    ],
  },
  output: {
    filename: 'vendor.js',
    library: 'vendor',
    path: join('build'),
    publicPath: '/',
  },
  resolve: {
    extensions: ['.js', '.jsx'],
    modules: ['node_modules', 'src'],
  },
  plugins: [
    new webpack.DllPlugin({
      path: join('build', 'vendor-manifest.json'),
      name: 'vendor',
      context: join('build'),
    }),
  ],
};
  • Webpack config (webpack.config.prod.dll.js)
/* eslint-disable import/no-extraneous-dependencies */
const path = require('path');
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
const webpack = require('webpack');

const join = path.join.bind(null, __dirname, '..');

module.exports = {
  context: join('src'),
  mode: 'production',
  devtool: false,
  entry: ['../src/core/vendor.js'],
  optimization: {
    minimize: true,
    minimizer: [
      new UglifyJSPlugin({
        uglifyOptions: {
          mangle: {
            safari10: true,
          },
        },
      }),
    ],
  },
  module: {
    rules: [
      {
        exclude: [/node_modules\/(?!(@jsonforms)\/).*/, /\.test\.jsx?$/],
        test: /\.(js|jsx)$/,
        use: [{ loader: 'babel-loader' }],
      },
    ],
  },
  output: {
    filename: 'vendor.js',
    library: 'vendor',
    path: join('build'),
    publicPath: '/',
  },
  resolve: {
    extensions: ['.js', '.jsx'],
    modules: ['node_modules', 'src'],
  },
  plugins: [
    new webpack.DllPlugin({
      path: join('build', 'vendor-manifest.json'),
      name: 'vendor',
      context: join('build'),
    }),
  ],
};
  • for the build script I’m using npm run build which runs the following
    "build": "npm run webpack:vendor:prod && npm run webpack:prod",
    "webpack:vendor:prod": "NODE_ENV=production webpack --config=./.webpack/webpack.config.prod.dll.js"
    "webpack:prod": "webpack --config=./.webpack/webpack.config.prod.js",
  1. Dev environment details
  • node version: v16.19.1
  • npm version: 8.19.3
  • command used to install dependencies: npm install --legacy-peer-deps
  • not sure if you need other details about Dev environment (if so please let me know)
  1. The packages I’m using are from the JSON forms tutorial which I found here & their versions are as follows:
    "@jsonforms/core": "^3.1.0",
    "@jsonforms/react": "^3.1.0",
    "@jsonforms/material-renderers": "^3.1.0",
    "@mui/material": "^5.14.18",    
    "@mui/icons-material": "^5.14.19",
    "@mui/x-date-pickers": "^5.0.20",
    "@emotion/react": "^11.11.1",
    "@emotion/styled": "^11.11.0",

I’ll confirm for you that its JSON Forms that is causing this issue

error on line 8 from minified main.js

UPDATE:

I’ve commented out the JSON Forms component <JsonForms ... /> & I no longer see that error thats breaking the site

@sdirix have you been able to reproduce this error or any issue resembling the above ?

Hi @alexj,

I tried to reproduce the error within the JSON Forms React seed, however I was not able to do so, i.e. there JSON Forms works as expected.

I then remove the dependencies as they are declared in the seed and used the one specified above, i.e.

    "@jsonforms/core": "^3.1.0",
    "@jsonforms/react": "^3.1.0",
    "@jsonforms/material-renderers": "^3.1.0",
    "@mui/material": "^5.14.18",    
    "@mui/icons-material": "^5.14.19",
    "@mui/x-date-pickers": "^5.0.20",
    "@emotion/react": "^11.11.1",
    "@emotion/styled": "^11.11.0",

npm install errored immediately because of mismatching peer dependencies. I was only able to continue the test by enforcing --legacy-peer-deps which is not a good sign.

The build then went trough however the app is crashing with something like TypeError: m is not a function. That’s not the same error as you are experiencing but still not good obviously.

So I would recommend aligning the dependencies so they fit together. You can find the JSON Forms React seed dependencies here and the React Material renderer set peerDependency declarations here (for the latest prerelease).

Hey @sdirix

I’ve aligned the dependencies with what is currently in the JSON Forms React see & I’m still experiencing the same error.

Hi @alexj,

If you like you can push an example which does not work for you somewhere with build instructions and I try it on my side. I don’t know what is going wrong for you.