Typescript not working

[amiut]

Typescript not working

[Rados51]

@amiut use fork-ts-checker-webpack-plugin version 6.5.0

"If you depend on Webpack 4, TypeScript 2.7 - 3.5.3 or ESLint feature, please use version 6 of the plugin."

[amiut]

@Rados51 Tried that also but it doesn't work.
I tried a lot of versions but they keep breaking with different error messages.

[Rados51]

@amiut There might be different issues as I use wpack.io daily. Can you share package.json and the error with fork-ts-checker-webpack-plugin v6.5.0?

[amiut]

Before posting the problem here, i tried to re-install from scratch with default configuration.
with default installation ("fork-ts-checker-webpack-plugin": "^7.2.1") i get the following error:

 please review the following errors 

  ❯  TypeError: Class extends value undefined is not a constructor or null




error Command failed with exit code 1.

And when i downgrade both fork-ts-checker-webpack-plugin and typescript to specified versions i get this error:

and finally process exits:

error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

@Rados51 could you please share with me version of typescript, fork-ts-checker-webpack-plugin, @wpackio/scripts, @wpackio/entrypoint you are using which are working

[Rados51]

@amiut
package.json
"@wpackio/entrypoint": "^6.4.0"

"devDependencies": {
    "@babel/plugin-transform-react-display-name": "^7.16.7",
    "@typescript-eslint/eslint-plugin": "^5.12.1",
    "@typescript-eslint/parser": "^5.12.1",
    "@wpackio/scripts": "^6.4.0",
    "babel-plugin-transform-react-remove-prop-types": "^0.4.24",
    "cssnano": "^5.0.17",
    "eslint": "^8.10.0",
    "eslint-config-prettier": "^8.4.0",
    "eslint-plugin-prettier": "^4.0.0",
    "eslint-plugin-react": "^7.29.2",
    "fork-ts-checker-webpack-plugin": "6.5.0",
    "postcss": "^8.4.7",
    "prettier": "^2.5.1",
    "sass": "^1.49.9",
    "typescript": "^4.5.5",
}

jsconfig.json

{
    "compilerOptions": {
    "checkJs": false,
    "resolveJsonModule": true,
    "moduleResolution": "node",
    "target": "esnext",
    "module": "esnext",
    "jsx": "react",
    "baseUrl": "src",
    "paths": { "@/*": ["./*"]  }
    },
    "exclude": ["dist", "node_modules", "build", ".vscode", "coverage", ".npm", ".yarn"],
    "typeAcquisition": {
    "enable": true,
    "include": ["react", "react-dom", "jest", "testing-library__jest-dom"]
    }
}

tsconfig.json

{
    "compilerOptions": {
    "target": "esnext",
    "lib": ["dom", "esnext"],
    "jsx": "preserve",
    "module": "esnext",
    "rootDir": "./src",
    "baseUrl": "./",
    "paths": {  "@/*": ["src/*"] },
    "resolveJsonModule": true,
    "allowJs": true,
    "checkJs": false,
    "declaration": true,
    "declarationMap": false,
    "emitDeclarationOnly": true,
    "sourceMap": false,
    "preserveSymlinks": true,
    "forceConsistentCasingInFileNames": true,
    "strict": true,
    "noImplicitAny": true,
    "strictNullChecks": true,
    "skipLibCheck": true,
    "outDir": "types",
    "moduleResolution": "node",
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true,
    "isolatedModules": true
    },
    "include": ["src/**/*"],
    "exclude": ["node_modules"]
}

wpackio.project.js (stripped some parts)

const path = require("path");

module.exports = {
    appName: "appname",
    type: "plugin",
    slug: "appname",
    files: [{
        name: "app",
        entry: {
            main: ["./src/index.js"],
        },
        hasTypeScript: true,
        typeWatchFiles: ["src/*.{ts,tsx}", "src/**/*.{ts,tsx}"],
        webpackConfig: (config, merge, appDir, isDev) => {
            const customRule = {
                devtool: isDev ? "eval" : "false",
                // ? this was added due to framer-motion 5+ bug
                module: {
                    rules: [{
                        type: "javascript/auto",
                        test: /\.mjs$/,
                        include: /node_modules/,
                    }, ],
                },
                optimization: {
                    splitChunks: {
                        chunks: "all",
                        cacheGroups: {
                            commons: {
                                test: /[\\/]node_modules[\\/]/,
                                // cacheGroupKey here is `commons` as the key of the cacheGroup
                                name(module, chunks, cacheGroupKey) {
                                    if (isDev) return "vendors";
                                    const moduleFileName = module
                                        .identifier()
                                        .split("/")
                                        .reduceRight((item) => item);
                                    const allChunksNames = chunks.map((item) => item.name).join("-");
                                    return `${cacheGroupKey}-${allChunksNames}-${moduleFileName}`;
                                },
                                chunks: "all",
                                minSize: 0,
                            },
                        },
                    },
                },
            };
            return merge(config, customRule);
        },
    }, ],
    jsBabelOverride: (defaults) => ({
        ...defaults,
        plugins: ["@babel/plugin-transform-react-display-name", "transform-react-remove-prop-types"],
    }),
    outputPath: "dist",
    hasReact: true,
    useReactJsxRuntime: true,
    disableReactRefresh: false,
    hasSass: true,
    hasLess: false,
    hasFlow: false,
    alias: {
        "@": path.resolve(__dirname, "src")
    },
    errorOverlay: false,
    optimizeSplitChunks: false,
};

[amiut]

Thanks for your effort @Rados51 but it doesn't work with your config too, this is kinda weird, the same error pops up:

node_modules/@wpackio/scripts/lib/dev-utils/typescriptFormatter.js:44
  return [messageColor.bold(`${issueOrigins[origin]} ${severity.toLowerCase()} in `) + fileAndNumberColor(`${file.replace(cwd, '.')}(${location.start.line},${location.start.column})`) + messageColor(':'), `${message}  ${messageColor.underline(`TS${code}`)}`, '', frame].join(_os.default.EOL);

The problem seems to be somehow related to error/warning formatter