search

preactjs / wmr

👩‍🚀 The tiny all-in-one development tool for modern web apps.
https://wmr.dev/
MIT License
4.92k stars 109 forks source link

Typescript is not compiled #918

Open Aloento opened 2 years ago

Aloento commented 2 years ago

Describe the bug yarn create wmr rename public\index.js to public\index.tsx 

- export async function prerender(data) {
+ export async function prerender(data: JSX.IntrinsicAttributes) {
    return await ssr(<App {...data} />);
}

then:

500 ./public\index.js - Unexpected token (./index.js:27:37)

  25 | hydrate(<App />);
  26 |
> 27 | export async function prerender(data: JSX.IntrinsicAttributes) {
     |                                     ^
  28 |   return await ssr(<App {...data} />);
  29 | }

Bug occurs with:

Desktop (please complete the following information):

Additional context Does this mean we need to enable @rollup/plugin-typescript ourselves?

rschristian commented 2 years ago

You haven't updated the path in your HTML file.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>WMR App</title>
        <meta name="description" content="WMR App" />
        <meta name="viewport" content="width=device-width,initial-scale=1" />
        <link rel="icon" href="data:" />
-       <link rel="modulepreload" as="script" href="/index.js" />
+       <link rel="modulepreload" as="script" href="/index.tsx" />
        <link rel="stylesheet" href="/style.css" />
    </head>
    <body>
-       <script type="module" src="/index.js"></script>
+       <script type="module" src="/index.tsx"></script>
    </body>
</html>

I imagine this is a symptom of TS's wonky file resolution, in that you can use import ... from 'Foo.js' when Foo.ts is what actually exists on the file system.

Aloento commented 2 years ago

Thank you!!! And maybe mentioned this in your document.

rschristian commented 2 years ago

Building would cause an error as the script source cannot be found. I think I can probably port that over to dev.

Aloento commented 2 years ago

Oh and there's another bug. typescript-paths not working.

In tsconfig.json

"compilerOptions": {
    "paths": {
      "@/*": ["./*"]
    },
  },

then Invalid specifier: @/something

rschristian commented 2 years ago

Not a bug, just a feature that hasn't yet been released. #875 has been merged in, though.

Use aliases in your wmr.config instead. https://wmr.dev/docs/configuration#aliasing-and-path-mappings

Aloento commented 2 years ago

Not a bug, just a feature that hasn't yet been released. #875 has been merged in, though.

Use aliases in your wmr.config instead. https://wmr.dev/docs/configuration#aliasing-and-path-mappings

One problem with this method is that it does not fill in the filename and extension name.

For example: We have /App/index.tsx Then use it as import App from "/App" After compile: import App from "/App/index.js" Everything is fine.

But if I use aliases like import App from "@/App" Then, after compiling: import App from "/App" It's the wrong path.

rschristian commented 2 years ago

Interesting. @ does have some special meaning, so that could present an issue, but I'm also having an issue with using ~ which is in our docs. I'll look into this soon, thanks for bringing it up.