Type errors: Unable to build SSR project
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
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- 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