Unable to import SchemaField : Uncaught ReferenceError: Cannot access '__WEBPACK_DEFAULT_EXPORT__' before initialization

[ljwagerfield]

tl;dr

Cyclic dependency error prevents the importing of SchemaField with Webpack 5.

SchemaField.js -> utils.js -> fields/index.js -> SchemaField.js

(Sokra mentions the error below is what you'll receive when you have a cyclic dependency in Webpack.)

(#2341 looks related.)

Description

The following code in a Webpack 5 project:

import SchemaField from "@rjsf/core/lib/components/fields/SchemaField";

Results in the following error:

Uncaught ReferenceError: Cannot access '__WEBPACK_DEFAULT_EXPORT__' before initialization
    at Module.default (browser.vendors.js:1923)
    at Module../node_modules/@rjsf/core/lib/components/fields/index.js (index.js:20)
    at __webpack_require__ (bootstrap:21)
    at fn (hot module replacement:61)
    at Module../node_modules/@rjsf/core/lib/utils.js (browser.vendors.js:4372)
    at __webpack_require__ (bootstrap:21)
    at fn (hot module replacement:61)
    at Module../node_modules/@rjsf/core/lib/components/fields/SchemaField.js (browser.vendors.js:1930)
    at __webpack_require__ (bootstrap:21)
    at fn (hot module replacement:61)

Code from stack trace

browser.vendors.js:1923 lines 1914 to 1930:

/***/ "./node_modules/@rjsf/core/lib/components/fields/SchemaField.js":
/*!**********************************************************************!*\
  !*** ./node_modules/@rjsf/core/lib/components/fields/SchemaField.js ***!
  \**********************************************************************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {

"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
/* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__)
/* harmony export */ });
/* harmony import */ var _IconButton__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../IconButton */ "./node_modules/@rjsf/core/lib/components/IconButton.js");
/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! react */ "./node_modules/react/index.js");
/* harmony import */ var prop_types__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! prop-types */ "./node_modules/prop-types/index.js");
/* harmony import */ var prop_types__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(prop_types__WEBPACK_IMPORTED_MODULE_2__);
/* harmony import */ var _types__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../../types */ "./node_modules/@rjsf/core/lib/types.js");
/* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../../utils */ "./node_modules/@rjsf/core/lib/utils.js");

browser.vendors.js:1923 lines 4312 to 4374:

/***/ "./node_modules/@rjsf/core/lib/utils.js":
/*!**********************************************!*\
  !*** ./node_modules/@rjsf/core/lib/utils.js ***!
  \**********************************************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {

"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
/* harmony export */   "ADDITIONAL_PROPERTY_FLAG": () => (/* binding */ ADDITIONAL_PROPERTY_FLAG),
/* harmony export */   "canExpand": () => (/* binding */ canExpand),
/* harmony export */   "getDefaultRegistry": () => (/* binding */ getDefaultRegistry),
/* harmony export */   "getSchemaType": () => (/* binding */ getSchemaType),
/* harmony export */   "getWidget": () => (/* binding */ getWidget),
/* harmony export */   "hasWidget": () => (/* binding */ hasWidget),
/* harmony export */   "getDefaultFormState": () => (/* binding */ getDefaultFormState),
/* harmony export */   "mergeDefaultsWithFormData": () => (/* binding */ mergeDefaultsWithFormData),
/* harmony export */   "getUiOptions": () => (/* binding */ getUiOptions),
/* harmony export */   "getDisplayLabel": () => (/* binding */ getDisplayLabel),
/* harmony export */   "isObject": () => (/* binding */ isObject),
/* harmony export */   "mergeObjects": () => (/* binding */ mergeObjects),
/* harmony export */   "asNumber": () => (/* binding */ asNumber),
/* harmony export */   "orderProperties": () => (/* binding */ orderProperties),
/* harmony export */   "isConstant": () => (/* binding */ isConstant),
/* harmony export */   "toConstant": () => (/* binding */ toConstant),
/* harmony export */   "isSelect": () => (/* binding */ isSelect),
/* harmony export */   "isMultiSelect": () => (/* binding */ isMultiSelect),
/* harmony export */   "isFilesArray": () => (/* binding */ isFilesArray),
/* harmony export */   "isFixedItems": () => (/* binding */ isFixedItems),
/* harmony export */   "allowAdditionalItems": () => (/* binding */ allowAdditionalItems),
/* harmony export */   "optionsList": () => (/* binding */ optionsList),
/* harmony export */   "findSchemaDefinition": () => (/* binding */ findSchemaDefinition),
/* harmony export */   "guessType": () => (/* binding */ guessType),
/* harmony export */   "stubExistingAdditionalProperties": () => (/* binding */ stubExistingAdditionalProperties),
/* harmony export */   "resolveSchema": () => (/* binding */ resolveSchema),
/* harmony export */   "retrieveSchema": () => (/* binding */ retrieveSchema),
/* harmony export */   "mergeSchemas": () => (/* binding */ mergeSchemas),
/* harmony export */   "deepEquals": () => (/* binding */ deepEquals),
/* harmony export */   "shouldRender": () => (/* binding */ shouldRender),
/* harmony export */   "toIdSchema": () => (/* binding */ toIdSchema),
/* harmony export */   "toPathSchema": () => (/* binding */ toPathSchema),
/* harmony export */   "parseDateString": () => (/* binding */ parseDateString),
/* harmony export */   "toDateString": () => (/* binding */ toDateString),
/* harmony export */   "utcToLocal": () => (/* binding */ utcToLocal),
/* harmony export */   "localToUTC": () => (/* binding */ localToUTC),
/* harmony export */   "pad": () => (/* binding */ pad),
/* harmony export */   "dataURItoBlob": () => (/* binding */ dataURItoBlob),
/* harmony export */   "rangeSpec": () => (/* binding */ rangeSpec),
/* harmony export */   "getMatchingOption": () => (/* binding */ getMatchingOption),
/* harmony export */   "schemaRequiresTrueValue": () => (/* binding */ schemaRequiresTrueValue)
/* harmony export */ });
/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "./node_modules/react/index.js");
/* harmony import */ var react_is__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! react-is */ "./node_modules/@rjsf/core/node_modules/react-is/index.js");
/* harmony import */ var json_schema_merge_allof__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! json-schema-merge-allof */ "./node_modules/json-schema-merge-allof/src/index.js");
/* harmony import */ var json_schema_merge_allof__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(json_schema_merge_allof__WEBPACK_IMPORTED_MODULE_2__);
/* harmony import */ var core_js_pure_features_array_fill__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! core-js-pure/features/array/fill */ "./node_modules/core-js-pure/features/array/fill.js");
/* harmony import */ var core_js_pure_features_array_fill__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(core_js_pure_features_array_fill__WEBPACK_IMPORTED_MODULE_3__);
/* harmony import */ var lodash_union__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! lodash/union */ "./node_modules/lodash/union.js");
/* harmony import */ var lodash_union__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(lodash_union__WEBPACK_IMPORTED_MODULE_4__);
/* harmony import */ var jsonpointer__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! jsonpointer */ "./node_modules/jsonpointer/jsonpointer.js");
/* harmony import */ var _components_fields__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./components/fields */ "./node_modules/@rjsf/core/lib/components/fields/index.js");
/* harmony import */ var _components_widgets__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ./components/widgets */ "./node_modules/@rjsf/core/lib/components/widgets/index.js");
/* harmony import */ var _validate__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ./validate */ "./node_modules/@rjsf/core/lib/validate.js");

@rjsf/core/lib/components/fields/index.js lines 1 to 25:

import ArrayField from "./ArrayField";
import BooleanField from "./BooleanField";
import DescriptionField from "./DescriptionField";
import MultiSchemaField from "./MultiSchemaField";
import NumberField from "./NumberField";
import ObjectField from "./ObjectField";
import SchemaField from "./SchemaField";
import StringField from "./StringField";
import TitleField from "./TitleField";
import NullField from "./NullField";
import UnsupportedField from "./UnsupportedField";
export default {
  AnyOfField: MultiSchemaField,
  ArrayField: ArrayField,
  BooleanField: BooleanField,
  DescriptionField: DescriptionField,
  NumberField: NumberField,
  ObjectField: ObjectField,
  OneOfField: MultiSchemaField,
  SchemaField: SchemaField,
  StringField: StringField,
  TitleField: TitleField,
  NullField: NullField,
  UnsupportedField: UnsupportedField
};

Expected behaviour

I expect to be able to import SchemaField when using webpack.

Actual behaviour

I receive the above-mentioned error.

Version

"@rjsf/core": "3.0.0"
"webpack": "5.24.1"

[ljwagerfield]

A workaround I've found is to use:

// @ts-expect-error
import fields from "@rjsf/core/lib/components/fields";
const { SchemaField } = fields;

[kfox112]

I've also encountered this issue and can confirm the workaround worked for me. Thanks @ljwagerfield!

[heath-freenome]

Fixed in the v5 beta, see the 5.x migration guide