Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Typescript is not compiled #918

Open
3 tasks done
Aloento opened this issue Apr 11, 2022 · 7 comments
Open
3 tasks done

Typescript is not compiled #918

Aloento opened this issue Apr 11, 2022 · 7 comments
Labels
bug Something isn't working

Comments

@Aloento
Copy link

Aloento commented Apr 11, 2022 •
edited

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:

  • wmr or wmr start (development)
  • wmr serve
  • wmr build (production)

Desktop (please complete the following information):

  • Node Version: 17
  • WMR Version: newest

Additional context
Does this mean we need to enable @rollup/plugin-typescript ourselves?
@Aloento Aloento added the bug Something isn't working label Apr 11, 2022
@rschristian
Copy link
Member

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 Aloento closed this as completed Apr 11, 2022
@Aloento
Copy link
Author

Aloento commented Apr 11, 2022

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

@rschristian
Copy link
Member

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

@Aloento
Copy link
Author

Aloento commented Apr 11, 2022

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

In tsconfig.json

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

then Invalid specifier: @/something

@Aloento Aloento reopened this Apr 11, 2022
@rschristian
Copy link
Member

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
Copy link
Author

Aloento commented Apr 12, 2022

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
Copy link
Member

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug Something isn't working
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@Aloento @rschristian