v2_dev build not parsing JSX in javascript #7051

brentmjohnson · 2023-08-03T15:50:08Z

What version of Remix are you using?

1.19.1

Are all your remix dependencies & dev-dependencies using the same version?

Yes

Steps to Reproduce

see https://github.com/brentmjohnson/remixQuickStart for reproducible example.

init new project from template npx create-remix@latest --template https://github.com/remix-run/remix/tree/main/templates/express ./ --no-typescript

notice tsx files are still created instead of js

replace the following files with valid js versions:

app/routes/_index.tsx
app/entry.client.tsx
app/entry.server.tsx
app/root.tsx

npm run build succeeds:

$ npm run build

> build
> remix build

 info  building... (NODE_ENV=production)
 info  built (240ms)

npm run dev fails:

$ npm run dev

> dev
> remix dev --manual -c "node server.js"


 💿  remix dev

 info  building...
✘ [ERROR] Expected ">" but found "/"

    app/entry.client.js:23:20:
      23 │       <RemixBrowser />
         │                     ^
         ╵                     >


✘ [ERROR] Expected ">" but found "lang"

    app/root.js:55:15:
      55 │   return <html lang="en">
         │                ~~~~
         ╵                >


✘ [ERROR] Expected ">" but found "style"

    app/routes/_index.js:30:14:
      30 │   return <div style={{
         │               ~~~~~
         ╵               >

Expected Behavior

remix dev build occurring in v2_dev should succeed like remix production build

Actual Behavior

remix dev build occurring in v2_dev fails

The text was updated successfully, but these errors were encountered:

brophdawg11 · 2023-08-04T10:51:22Z

I'm not sure what happened in your case, but npx create-remix@latest --template https://github.com/remix-run/remix/tree/main/templates/express ./ --no-typescript does not generate TS files when I run it.

The error you're seeing is because you renamed the files to .js instead of .jsx. It should work if you change those to .jsx.

brentmjohnson · 2023-08-04T15:18:04Z

Fair to mark this as not planned, but it is a breaking change from v2_dev: false and differs from remix build which was confusing to me at least.

Note that esbuild does support jsx in js: https://esbuild.github.io/content-types/#jsx

In my case, I have a pre remix build step for babel to transpile the ts/tsx to support relay macros. Previously babel was leaving the jsx unmodified in the js output as it seems preferable to have remix build do all react specific transforms. The workaround for now was to go ahead and have babel transform that jsx rather than remix.

Let me know if jsx in js support is reconsidered for v2_dev.

jaschaio · 2023-08-09T05:34:33Z

I run into the same issue. It's definitely a breaking change not mentioned in the documentation. @brentmjohnson did you find any suitable workaround beside renaming hundreds of files from .js to .jsx?

jaschaio · 2023-08-09T05:39:07Z

I also wonder why it differs between remix build and remix dev where the former works and the latter fails with the above errors.

jaschaio · 2023-08-09T06:06:26Z

Looks like the reason it differs between remix build and remix dev is due to the hmr plugin.

I suspect the @babel/plugin-syntax-jsx is the one actually causing trouble https://github.com/remix-run/remix/blob/main/packages/remix-dev/compiler/js/plugins/hmr.ts#L166

jaschaio · 2023-08-09T08:38:44Z

Or might be caused by @babel/preset-typescript. I tried the isTXS and allExtensions options but continue to get the same rror.

jaschaio · 2023-08-09T08:56:24Z

Ok, even simpler. This change in line https://github.com/remix-run/remix/blob/main/packages/remix-dev/compiler/js/plugins/hmr.ts#L142 works for me:

--- a/node_modules/@remix-run/dev/dist/compiler/js/plugins/hmr.js
+++ b/node_modules/@remix-run/dev/dist/compiler/js/plugins/hmr.js
@@ -161,7 +161,7 @@ declare global {
             sourceCode,
             output: {
               contents: resultCode,
-              loader: args.path.endsWith("x") ? "tsx" : "ts",
+              loader: "tsx",
               resolveDir: path__namespace.dirname(args.path)
             }
           };

pcattori · 2023-08-09T15:10:52Z

Fixed by #7112

brentmjohnson · 2023-08-09T16:05:45Z

I run into the same issue. It's definitely a breaking change not mentioned in the documentation. @brentmjohnson did you find any suitable workaround beside renaming hundreds of files from .js to .jsx?

@jaschaio, just for reference and for those using babel for pre-transpile before remix build there were 2 ways to address something like this as a workaround in case something similar comes up:

add --keep-file-extension to your babel cli call where the output directory is your remix build directory (./app). this allows remix to continue to perform the react / jsx transform.
add the following to your babel.config.json plugins. this instructs babel to perform the react / jsx transform:

[
  "@babel/plugin-transform-react-jsx",
  {
    "runtime": "automatic"
  }
]

github-actions · 2023-08-10T07:07:16Z

🤖 Hello there,

We just published version v0.0.0-nightly-b1149bb-20230810 which involves this issue. If you'd like to take it for a test run please try it out and let us know what you think!

Thanks!

brentmjohnson added the bug:unverified label Aug 3, 2023

brophdawg11 added this to v2 Aug 3, 2023

brophdawg11 assigned pcattori Aug 3, 2023

brophdawg11 moved this to Backlog in v2 Aug 3, 2023

brophdawg11 closed this as not planned Won't fix, can't repro, duplicate, stale Aug 4, 2023

brophdawg11 assigned brophdawg11 and unassigned pcattori Aug 4, 2023

brophdawg11 moved this from Backlog to Closed in v2 Aug 4, 2023

pcattori reopened this Aug 7, 2023

pcattori assigned pcattori and unassigned brophdawg11 Aug 7, 2023

MichaelDeBoey moved this from Closed to Backlog in v2 Aug 7, 2023

brophdawg11 added the package:dev label Aug 8, 2023

pcattori mentioned this issue Aug 9, 2023

fix(dev): allow jsx in js files during hmr #7112

Merged

pcattori linked a pull request Aug 9, 2023 that will close this issue

fix(dev): allow jsx in js files during hmr #7112

Merged

pcattori moved this from Backlog to PR in v2 Aug 9, 2023

pcattori closed this as completed Aug 9, 2023

pcattori moved this from PR to Closed in v2 Aug 9, 2023

pcattori mentioned this issue Aug 30, 2023

v2pre ts bug, not happy with typed const arrow functions #7295

Closed

1 task

MichaelDeBoey moved this from Closed to Merged in v2 Aug 30, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

v2_dev build not parsing JSX in javascript #7051

v2_dev build not parsing JSX in javascript #7051

brentmjohnson commented Aug 3, 2023 •

edited

Loading

brophdawg11 commented Aug 4, 2023

brentmjohnson commented Aug 4, 2023

jaschaio commented Aug 9, 2023

jaschaio commented Aug 9, 2023

jaschaio commented Aug 9, 2023

jaschaio commented Aug 9, 2023 •

edited

Loading

jaschaio commented Aug 9, 2023

pcattori commented Aug 9, 2023

brentmjohnson commented Aug 9, 2023

github-actions bot commented Aug 10, 2023

v2_dev build not parsing JSX in javascript #7051

v2_dev build not parsing JSX in javascript #7051

Comments

brentmjohnson commented Aug 3, 2023 • edited Loading

What version of Remix are you using?

Are all your remix dependencies & dev-dependencies using the same version?

Steps to Reproduce

Expected Behavior

Actual Behavior

brophdawg11 commented Aug 4, 2023

brentmjohnson commented Aug 4, 2023

jaschaio commented Aug 9, 2023

jaschaio commented Aug 9, 2023

jaschaio commented Aug 9, 2023

jaschaio commented Aug 9, 2023 • edited Loading

jaschaio commented Aug 9, 2023

pcattori commented Aug 9, 2023

brentmjohnson commented Aug 9, 2023

github-actions bot commented Aug 10, 2023

brentmjohnson commented Aug 3, 2023 •

edited

Loading

jaschaio commented Aug 9, 2023 •

edited

Loading