jodit / jodit/jodit-react

Type errors: Unable to build SSR project

Open
#96 1 comment 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
TypeScript
Stars
406
Forks
131
Avg merge
2h 32m
Merged PRs (30d)
2

Description

In my project there was a need for an editor that also supported image uploads. I evaluated several and ultimately decided on Jodit since it ticked to all my requirements and the file package size was relatively small.

Unfortunately i am finding problems during the build where the following errors show up:

Failed to compile.
ERROR in /Users/arunmenon/Sites/pwa/sivadasanamenon/node_modules/jodit/src/core/storage/engines/memory-storage-provider.ts(22,10):
TS2352: Conversion of type 'T' to type 'void | R' may be a mistake because neither type sufficiently overlaps with the other. If this was intentional, convert the expression to 'unknown' first.
  Type 'T' is not comparable to type 'R'.
    'R' could be instantiated with an arbitrary type which could be unrelated to 'T'.

/Users/arunmenon/Sites/pwa/sivadasanamenon/node_modules/jodit/src/modules/toolbar/collection/editor-collection.ts
ERROR in /Users/arunmenon/Sites/pwa/sivadasanamenon/node_modules/jodit/src/modules/toolbar/collection/editor-collection.ts(24,4):
TS2322: Type 'boolean | void' is not assignable to type 'boolean'.
  Type 'void' is not assignable to type 'boolean'.

/Users/arunmenon/Sites/pwa/sivadasanamenon/node_modules/jodit/src/modules/toolbar/collection/editor-collection.ts
ERROR in /Users/arunmenon/Sites/pwa/sivadasanamenon/node_modules/jodit/src/modules/toolbar/collection/editor-collection.ts(40,4):
TS2322: Type 'boolean | void' is not assignable to type 'boolean'.
  Type 'void' is not assignable to type 'boolean'.

/Users/arunmenon/Sites/pwa/sivadasanamenon/node_modules/jodit/src/modules/uploader/uploader.ts
ERROR in /Users/arunmenon/Sites/pwa/sivadasanamenon/node_modules/jodit/src/modules/uploader/uploader.ts(225,27):
TS2345: Argument of type 'this | this["jodit"]' is not assignable to parameter of type 'IViewBased<IViewOptions>'.
  Type 'this' is not assignable to type 'IViewBased<IViewOptions>'.
    Type 'Uploader' is missing the following properties from type 'IViewBased<IViewOptions>': isView, id, basePath, isLocked, and 18 more.

/Users/arunmenon/Sites/pwa/sivadasanamenon/node_modules/jodit/src/core/helpers/color/color-to-hex.ts
ERROR in /Users/arunmenon/Sites/pwa/sivadasanamenon/node_modules/jodit/src/core/helpers/color/color-to-hex.ts(44,9):
no-bitwise: Forbidden bitwise operation

/Users/arunmenon/Sites/pwa/sivadasanamenon/node_modules/jodit/src/core/helpers/color/color-to-hex.ts
ERROR in /Users/arunmenon/Sites/pwa/sivadasanamenon/node_modules/jodit/src/core/helpers/color/color-to-hex.ts(44,17):
no-bitwise: Forbidden bitwise operation

/Users/arunmenon/Sites/pwa/sivadasanamenon/node_modules/jodit/src/core/helpers/color/color-to-hex.ts
ERROR in /Users/arunmenon/Sites/pwa/sivadasanamenon/node_modules/jodit/src/core/helpers/color/color-to-hex.ts(44,32):
no-bitwise: Forbidden bitwise operation

To get past the build i go to each of the effected files and add a //@ts-nocheck at the top of the file which works, but of course it is a temporary fix which gets over-written during the project lifecycle unless i patch the files via some patching mechanism like pack-package

My tsconfig:

{
    "compilerOptions": {
      "types": [],
      "allowJs": true,
      "allowUnreachableCode": false,
      "noFallthroughCasesInSwitch": true,
      "allowSyntheticDefaultImports": true,
      "downlevelIteration": true,
      "esModuleInterop": true,
      "forceConsistentCasingInFileNames": true,
      "jsx": "react",
      "lib": ["es6", "es2015", "es2017", "dom"],
      "module": "esnext",
      "moduleResolution": "Node",
      "noImplicitAny": false,
      "noImplicitReturns": false,
      "noImplicitThis": false,
      "noUnusedLocals": false,
      "sourceMap": true,
      "strictNullChecks": false,
      "strict": false,
      "pretty": false,
      "suppressImplicitAnyIndexErrors": true,
      "skipLibCheck": true,
      "target": "es2016",
    },
    "exclude": [
      "node_modules",
      "./node_modules/jodit/**/*.ts",
      "build",
      "scripts",
      "functions",
      "resources",
      "acceptance-tests",
      "webpack",
      "jest",
      "razzle.config.js",
      "node_modules/jodit/src/core/storage/engines/memory-storage-provider.ts",
      "node_modules/jodit/src/modules/toolbar/collection/editor-collection.ts",
      "node_modules/jodit/src/modules/uploader/uploader.ts",
      "node_modules/jodit/src/core/helpers/color/color-to-hex.ts",
      "./src/common/JoditEditor.tsx",
      "./src/common/Test.tsx",
    ],
    "include": [
      "./src/client/**/*.ts*",
      "./src/server/**/*.ts*",
      "./src/common/**/*.ts*",
      "./src/index.ts"
    ],
    "types": ["typePatches", "node", "webpack-env"]
  }
  

(i also tried referencing the effected ts files directly in the exclude, just in case but looks like it doesn't work).

I initially didn't have an include property but i added it during one of my debug attempts.

Also, FYI, Since it is an SSR project i did get a few window related errors initially. I somehow got past them(without modifying the source) by having Jodit run only on the client via dynamic import:


import React, {useState, useRef, useEffect} from 'react';
 
 let JoditEditor: any;
    const   config = {
    zIndex: 0,
    readonly: false,
    activeButtonsInReadOnly: ['source', 'fullsize', 'print', 'about'],
    toolbarButtonSize: 'middle',
    theme: 'default',
    enableDragAndDropFileToEditor: true,
    saveModeInCookie: false,
    spellcheck: true,
    editorCssClass: false,
    triggerChangeEvent: true,
   // height: 220,
    direction: 'ltr',
    language: 'en',
    debugLanguage: false,
    i18n: 'en',
    tabIndex: -1,
    toolbar: true,
    enter: 'P',
    useSplitMode: false,
    colorPickerDefaultTab: 'background',
    imageDefaultWidth: 100,
    removeButtons: ['source', 'fullsize', 'about', 'outdent', 'indent', 'video', 'print', 'table', 'fontsize', 'superscript', 'subscript', 'file', 'cut', 'selectall'],
    disablePlugins: ['paste', 'stat'],
    events: {},
    textIcons: false,
        uploader: {
            url: 'https://url_to_handler ',
            withCredentials: false,
            filesVariableName: (e) => "Files",
            isSuccess: (resp) => resp,
            process: (resp) => ({
                files: resp.data.files,
                path: resp.data.path,
                baseurl: resp.data.baseurl,
                error: resp.data.error,
                message: resp.data.message
            }),
            defaultHandlerSuccess: function (data) {
                var i, field = 'files';                      
                if (data[field] && data[field].length) {
                    for (i = 0; i < data[field].length; i += 1) {
                        // this.selection.insertImage(data.baseurl + data[field][i]);
                        this.selection.insertImage(data.path);
                    }
                }
            },
        },
    placeholder: '',
    showXPathInStatusbar: false
  };

const Test = ({}) => {
    const editor = useRef(null)
    const [content, setContent] = useState('');
    const [isLoaded, setIsLoaded] = useState(false);
    useEffect(()=>{
        import('jodit-react').then(res=>{
         JoditEditor = res.default;
         setIsLoaded(true)l
        });
    },[]);
    const config1 = {
        readonly: false 
    }
    if(!isLoaded){
        return null;
    }
    //console.log(typeof content)
    return (
            <JoditEditor
            	ref={editor}
                value={content}
                config={config}
            tabIndex={1} // tabIndex of textarea
           // onBlur={newContent => setContent(newContent)} // preferred to use only this option to update the content for performance reasons
                onChange={newContent => {
                    // setContent(newContent)
                }}
            />
        );
}

EDIT: In my tslint.json i added the following entry for the 'Forbidden bitwise operation' issue:

"no-bitwise": true,
This resolves 3(all in 'color-to-hex.ts') of the initial 7 errors.

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by reproducing the SSR build and inspect the reported files: memory-storage-provider.ts, editor-collection.ts, uploader.ts, and color-to-hex.ts. Compare the diagnostics with the project's TypeScript and TSLint configuration. Done means the Jodit React integration builds for SSR without the listed type or lint errors, while client-only loading still works.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
build-system, frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.