CODEWITHSUNDEEP
javascriptreactjs
marcos souza
marcos souza

Reputation: 761

How to use jsx files in an app created by create-react-app (without run "npm run eject")?

Currently I can only use .js files, in case I try to use .jsx, this will cause an error. Here's the problem: I usually use code formatters, and writing jsx and formatting in js files, causes the code to be completely out of order, also causing syntax errors.

I am new to React, so I do not know how to configure to use jsx files, at least in other than the main files (index.js).

I've seen about the eject script, but there seem to be some drawbacks in using this.

Is there any solution for using jsx files without running "npm run eject"?

EDIT: The error is something like, "Could not import XXX file from filename.js", that is, when I try to import from a filename.jsx file, it searches only for filename.js files, and as there is no file. js, I can not care.

EDIT2: As said in a comment, just reboot the server, and I think I was changing from js to jsx when the server was already running, now I've changed and rebooted and it seems to be working

Upvotes: 12

Views: 7922

Answers (1)

ramirozap
ramirozap

Reputation: 1459

.jsx works out of the box with create react app.

You are changing the extensions while the server is running, so the server thinks that you are referencing a file that does not exist anymore since it resolves the file as .js initially and keeps that extension. It is like deleting a file and trying to import it--the same error is displayed.

Reboot the server and everything should work as expected.

Upvotes: 34

Related Questions