@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,
};

Uh oh!

Typescript not working #1251

Description

Metadata

Metadata

Assignees

Labels

Projects

Milestone

Relationships

Development

Issue actions