Can we just use the .js extension instead of .jsx?

[mjr]

I tried to use it, but I had some problems and I was unsure if the remix allows us to do this:

app/components/button.js
app/routes/index.js
app/entry.server.js
app/entry.client.js
app/root.js

[Girish21]

No, I guess, since Remix uses esbuild as the compiler. And, esbuild requires the file extension to be jsx or tsx

[mjr]

Oh ok, thanks.

[mjackson]

Yes, you can use either .js or .jsx (or .ts or .tsx if you're using TypeScript). They all should be supported.

[mjr]

So can you help understand this problem i'm having?

Basically what I did was create a project using npx create-remix@latest and then rename the files root.jsx, entry.client.jsx, entry.server.jsx and routes/index.jsx to .js

https://codesandbox.io/s/goofy-kapitsa-8v7en

[pazguille]

Hi @mjr, @mjackson

The problem is a missing configuration of loader in routes.ts file.

If I add the loaders works fine.

  let result = await esbuild__namespace.build({
    entryPoints: [path__namespace.resolve(config.appDirectory, config.routes[routeId].file)],
    platform: "neutral",
    format: "esm",
    metafile: true,
    write: false,
    logLevel: "silent",
    loader: { '.js': 'jsx' }, // Here!
    plugins: [mdx.mdxPlugin(config)]
  });