Heads up: Breaks under typescript 4.7 RC's module: node16

[simonbuchan]

Thought I would mention this as a discussion first, instead of an issue, as this might be better as typescript feedback, rather than (or in addition to) a fix here, so I wanted to get a feel for what's up here first, especially as solid has some interesting interactions here (e.g. SSR import conditions).

Essentially the issue is that Typescript 4.7 adds the "module": "node16" option, which aims to match the node-native ESM support. As part of this, it now also implements the exports package field, and uses that in preference to the top-level main, and particular to this issue, it uses a new types import condition instead of the top level types, not only if there is a types condition present, but if there is an exports field present at all (e.g. it errors or uses the default condition, replacing the extension with .d.ts, AFAICT?)

The issue here is that since solid, like many existing packages out there, uses a separate types output dir, typescript resolves paths like solid-js/web to solid-js/web/dist/server.js, and doesn't find a sibling .d.ts:

Example config, errors

// tsconfig.json
{
  "compilerOptions": {
    "noEmit": true,
    "module": "node16",
    "strict": true,
    "jsx": "preserve",
    "jsxImportSource": "solid-js"
  },
  "include": [
    "src"
  ],
}

// src/index.tsx
import { render } from "solid-js/web";

function App() {
    return <div>Hello, world!</div>;
}

render(App, document.getElementById("app")!);

src/index.tsx:1:24 - error TS7016: Could not find a declaration file for module 'solid-js/web'. 'C:/code/personal/test-webpack-app/node_modules/solid-js/web/dist/server.js' implicitly has an 'any' type.
  Try `npm i --save-dev @types/solid-js` if it exists or add a new declaration (.d.ts) file containing `declare module 'solid-js/web';`

1 import { render } from "solid-js/web";
                         ~~~~~~~~~~~~~~

src/index.tsx:4:12 - error TS7026: JSX element implicitly has type 'any' because no interface 'JSX.IntrinsicElements' exists.

4     return <div>Hello, world!</div>;
             ~~~~~

src/index.tsx:4:12 - error TS2307: Cannot find module 'solid-js/jsx-runtime' or its corresponding type declarations.

4     return <div>Hello, world!</div>;
             ~~~~~~~~~~~~~~~~~~~~~~~~

src/index.tsx:4:30 - error TS7026: JSX element implicitly has type 'any' because no interface 'JSX.IntrinsicElements' exists.

4     return <div>Hello, world!</div>;
                               ~~~~~~

You can also see that typescript will by default find the node condition, serving the ../dist/server.js rather than the seemingly intended ../dist/dev.js - that seems like a problem too, as you don't have a way to override the import conditions typescript uses.

[simonbuchan]

Here's the relevant announcement post section: https://devblogs.microsoft.com/typescript/announcing-typescript-4-7-rc/#esm-nodejs

[lxsmnsyc]

Need to bump this. Adding "types" to "package.json" somehow allows solid-js to be resolved. The new problem, however, is when using solid-js again.