[bug] .cjsx is not okay. Error message says it should be renamed to .cjsx

[LarsArtmann]

Unexpected error after running build from package.json

package.json

{
    "name": "@nobletary/ui",
    "version": "0.1.0",
    "type": "module",
    "exports": {
        "./client": {
            "types": "./dist/client.d.ts",
            "import": "./dist/client.jsx",
            "require": "./dist/client.cjsx"
        },
        "./server": {
            "types": "./dist/server.d.ts",
            "import": "./dist/server.jsx",
            "require": "./dist/server.cjsx"
        }
    },
    "private": true,
    "main": "dist/client.cjsx",
    "module": "dist/client.jsx",
    "types": "dist/client.d.ts",
    "scripts": {
        "check-update": "upd -n",
        "auto-update": "upd",
        "build": "tsup && (mv dist/client.js dist/client.jsx ; mv dist/client.cjs dist/client.cjsx ; mv dist/client.cjs.map dist/client.cjsx.map ; mv dist/server.js dist/server.jsx ; mv dist/server.cjs dist/server.cjsx ; mv dist/server.cjs.map dist/server.cjsx.map) && publint",
        "graphs": "pnpm run graph:init && pnpm run graph:analyse && pnpm run \"/^graph:folder:.*/\"",
        "graph:init": "mkdir -p \"graph\"",
        "graph:analyse": "depcruise -v -T json ./* ./**/* -f ./graph/results.json",
        "graph:folder:dot": "depcruise-fmt -T dot graph/results.json | dot -T svg > graph/folder-dot.svg",
        "graph:folder:archi": "depcruise-fmt -T archi graph/results.json | dot -T svg > graph/folder-archi.svg",
        "graph:folder:err-html": "depcruise-fmt -T err-html --exit-code graph/results.json > graph/folder-err.html",
        "graph:folder:markdown": "depcruise-fmt -T markdown --exit-code graph/results.json > graph/folder.md"
    },
    "peerDependencies": {
        "@formkit/auto-animate": "0.8.0",
        "@headlessui/react": "1.7.17",
        "@heroicons/react": "2.0.18",
        "@nobletary/data": "workspace:*",
        "@nobletary/types": "workspace:*",
        "@nobletary/utils": "workspace:*",
        "canvas-confetti": "1.6.0",
        "client-only": "0.0.1",
        "country-flag-icons": "1.5.7",
        "next": "13.5.2",
        "react": "18.2.0",
        "use-google-maps-script": "0.1.2",
        "use-places-autocomplete": "4.0.1",
        "usehooks-ts": "2.9.1",
        "zod": "3.22.2"
    },
    "devDependencies": {
        "@nx/js": "16.9.0",
        "@nx/linter": "16.9.0",
        "@nx/react": "16.9.0",
        "@types/google.maps": "3.54.1",
        "publint": "0.2.2",
        "typescript": "5.2.2",
        "upd": "2.9.5"
    }
}

// tsup.config.ts
import {defineConfig} from 'tsup'

// noinspection JSUnusedGlobalSymbols
export default defineConfig({
    entry: [
        "src/client.tsx",
        "src/server.tsx",
    ],
    format: ['cjs', 'esm'],
    splitting: false,
    sourcemap: true,
    clean: true,
    dts: true,
    esbuildPlugins: [],
    esbuildOptions(options, context) {
        options.jsx = "preserve"
        //options.outExtension = {'.js': '.jsx'}
    },
})

[LarsArtmann]

Removing

"main": "dist/client.cjsx",

in package.json

made the warning disappear.

[bluwy]

I think this could go two ways:

1. Acknowledging .cjsx and .mjsx as valid extensions and parse CJS and ESM respectively. (Currently publint doesn't recognize the x variant)
2. Forbid .cjsx and .mjsx (Because TypeScript don't support it either: https://github.com/microsoft/TypeScript/issues/44442)

I'm not really sure which you're implying 😅 But my hunch tells me to go with no2, because AFAIA there's isn't an environment that supports .cjsx and .mjsx? But I could be wrong. Any bundler that supports .jsx today can already make it interop in either CJS and ESM environments. There's also a historical use of .cjsx to mean the CoffeeScript flavour of JSX.

[LarsArtmann]

Thank you @bluwy the article (https://github.com/microsoft/TypeScript/issues/44442) is helpfull.

I think this could go two ways:

1. Acknowledging .cjsx and .mjsx as valid extensions and parse CJS and ESM respectively. (Currently publint doesn't recognize the x variant)
2. Forbid .cjsx and .mjsx (Because TypeScript don't support it either: Design Meeting Notes, 6/4/2021 microsoft/TypeScript#44442)

I'm not really sure which you're implying 😅 But my hunch tells me to go with no2, because AFAIA there's isn't an environment that supports .cjsx and .mjsx? But I could be wrong. Any bundler that supports .jsx today can already make it interop in either CJS and ESM environments. There's also a historical use of .cjsx to mean the CoffeeScript flavour of JSX.

[LarsArtmann]

Maybe we should implement a better error message?

[bluwy]

Yeah we need a better error message here. I think I'll go with no2 to fix this.