Typescript not working
amiut opened this issue · 6 comments
Hi thanks for this great devkit
seems like it's not compatible with fork-ts-checker-webpack-plugin
package, i tried downgrading fork-ts-checker-webpack-plugin
to version ^5
but still no chance,
I would appreciate it if you upgrade dependancies
@Rados51 Tried that also but it doesn't work.
I tried a lot of versions but they keep breaking with different error messages.
@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?
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
@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,
};
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