Unable to import With Webpacker and Typescript

[jonathanlinford]

Jodit Version: 4.2.10 Browser: All OS: Max/Linux Is React App: True

Code I encounter the following error when trying to import into my typescript/webpacker project: Wabpack version: 4.46.0

ERROR in ./app/javascript/components/application/halda-design-system/inputs/ControlledWysiwygWithLabel.tsx 84:38-49
"export 'default' (imported as 'JoditEditor') was not found in 'jodit-react'
    at HarmonyImportSpecifierDependency._getErrors (/Users/jonny/ws/round-robin/node_modules/webpack/lib/dependencies/HarmonyImportSpecifierDependency.js:109:11)
    at HarmonyImportSpecifierDependency.getErrors (/Users/jonny/ws/round-robin/node_modules/webpack/lib/dependencies/HarmonyImportSpecifierDependency.js:68:16)
    at Compilation.reportDependencyErrorsAndWarnings (/Users/jonny/ws/round-robin/node_modules/webpack/lib/Compilation.js:1463:22)
    at /Users/jonny/ws/round-robin/node_modules/webpack/lib/Compilation.js:1258:10
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/jonny/ws/round-robin/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:15:1)
    at AsyncSeriesHook.lazyCompileHook (/Users/jonny/ws/round-robin/node_modules/tapable/lib/Hook.js:154:20)
    at Compilation.finish (/Users/jonny/ws/round-robin/node_modules/webpack/lib/Compilation.js:1253:28)
    at /Users/jonny/ws/round-robin/node_modules/webpack/lib/Compiler.js:672:17
    at _done (eval at create (/Users/jonny/ws/round-robin/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:9:1)
    at eval (eval at create (/Users/jonny/ws/round-robin/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:80:22)

import React, { ReactElement, useState, useRef } from 'react';
import { useController } from 'react-hook-form';
import ModalWrapper from '../../shared/modals/ModalWrapper';
import JoditEditor from 'jodit-react';

interface ControlledWysiwygWithLabelProps {
  id: string;
  labelClass?: string;
  labelText?: string;
  sublabelHtml?: string;
  init?: any;
  formInputName: string;
  formControl: any;
  defaultValue: any;
  inputRef?: any;
  onClick?: () => void;
  onFocus?: () => void;
  onBlur?: (e: unknown) => void
}

const ControlledWysiwygWithLabel = ({
  id,
  labelClass = 'block text-sm font-medium text-gray-700',
  labelText,
  sublabelHtml,
  init = {},
  formInputName,
  formControl,
  defaultValue,
  inputRef,
  onClick,
  onFocus,
  onBlur,
}: ControlledWysiwygWithLabelProps): ReactElement => {
  const { field: { onChange, value } } = useController({
    name: formInputName,
    control: formControl,
    defaultValue,
  });

  const editor = useRef(null);

  const config = {
    readonly: false // all options from https://xdsoft.net/jodit/doc/
  }

  const handleEditorChange = (newValue: string) => {
    onChange(newValue);
    if (inputRef && typeof inputRef.current !== 'undefined' && inputRef.current !== null) {
      inputRef.current.value = newValue;
    }
  };

  // const [isFullScreen, setIsFullScreen] = useState(false);
  return (
    <>
      {labelText && (
        <>
          <label htmlFor={formInputName} className={labelClass}>
            {labelText}
          </label>
        </>
      )}
      {sublabelHtml && (
        <div className="py-2 text-xs italic text-gray-500">
          {sublabelHtml}
        </div>
      )}
      <div className="mt-1">
        <JoditEditor
          ref={editor}
          value={value}
          config={config}
          onBlur={handleEditorChange} // preferred to use only this option to update the content for performance reasons
          onChange={handleEditorChange}
        />
      </div>
    </>
  );
};

export default ControlledWysiwygWithLabel;

Expected behavior: Imports and is usable

Actual behavior: Seems to import fine from the ide (vscode) perspective, but as I run webpacker, I get the following error:

ERROR in ./app/javascript/components/application/halda-design-system/inputs/ControlledWysiwygWithLabel.tsx 84:38-49
"export 'default' (imported as 'JoditEditor') was not found in 'jodit-react'
    at HarmonyImportSpecifierDependency._getErrors (/Users/jonny/ws/round-robin/node_modules/webpack/lib/dependencies/HarmonyImportSpecifierDependency.js:109:11)
    at HarmonyImportSpecifierDependency.getErrors (/Users/jonny/ws/round-robin/node_modules/webpack/lib/dependencies/HarmonyImportSpecifierDependency.js:68:16)
    at Compilation.reportDependencyErrorsAndWarnings (/Users/jonny/ws/round-robin/node_modules/webpack/lib/Compilation.js:1463:22)
    at /Users/jonny/ws/round-robin/node_modules/webpack/lib/Compilation.js:1258:10
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/jonny/ws/round-robin/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:15:1)
    at AsyncSeriesHook.lazyCompileHook (/Users/jonny/ws/round-robin/node_modules/tapable/lib/Hook.js:154:20)
    at Compilation.finish (/Users/jonny/ws/round-robin/node_modules/webpack/lib/Compilation.js:1253:28)
    at /Users/jonny/ws/round-robin/node_modules/webpack/lib/Compiler.js:672:17
    at _done (eval at create (/Users/jonny/ws/round-robin/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:9:1)
    at eval (eval at create (/Users/jonny/ws/round-robin/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:80:22)
ℹ ｢wdm｣: Failed to compile.

[jonathanlinford]

Wrong repo