Preact-cli: importing components using index.jsx

[br4nnigan]

The issue is so simple I spare a codepen.

I can import a component pointing to the directory only when there is a testComponent/index.js like this:
import TestComponent from 'components/testComponent';

However this fails when the file has a jsx suffix instead of js: testComponent/index.jsx. Error message:
no such file or directory, open '.\src\components\test\index.js'
The jsx file is ignored, looking for a js file.

Is this intended?

Furthermore, I can import a file not named index like testComponent/test.js like this:
import Test from 'components/testComponent/test';

I cannot however import the "index" like this:
import Test from 'components/testComponent/index';

The error message is, surprise, no such file or directory, open '.\src\components\testComponent/index.jsx'. Now he's looking for a jsx file and ignores the js file.

So, conclusio, if I want to use jsx accross the board in my project, I have to point to index files explicitly using the file name?

[JoviDeCroock]

Hey it seems like this issue is meant for preact-cli, transferring it now.

[DamianRivas]

I _just_ ran into the same issue! Hopefully someone clarifies this soon.

[rschristian]

Sorry, gotta be that guy and ask for some sort of demo.

Taking the default Preact template and changing the file extension of the Header component to .jsx doesn't cause issues, at least on my system, when it apparently should according to your comments.

components/app.js imports the Header like the following: import Header from './header'; Changing ./header/index.js to ./header/index.jsx seems to have absolutely no impact on the import, so I can't reproduce.

Same goes for the second issue. Copying ./header/index.jsx into ./header/index-two.jsx, I can import it just fine with ./header/index-two.

Can you post what CLI version you're using, and it wouldn't hurt to add OS and Node versions either. I've seen you've posted the latter two on a different issue, but adding them here would help so others don't need to go looking if I can't help you solve this.

[reznord]

Hey @br4nnigan @DamianRivas I am not able to replicate the bug.

Here is a demo (reznord/cli-import-bug-demo) which I created with default template for reference purposes.

Here I am importing the header component using import Header from './header/index' (reznord/cli-import-bug-demo/blob/master/src/components/app.js#L4).

And here (reznord/cli-import-bug-demo/blob/master/src/components/app.js#L7) I am importing the route using import Home from '../routes/home/home' where the component is with a .jsx extension.

Feel free to re-open if you are still facing the same issue.

[br4nnigan]

@reznord

Here I am importing the header component using import Header from './header/index' (reznord/cli-import-bug-demo/blob/master/src/components/app.js#L4).

I said in my post that the only way to import jsx files is this method, but that was just theory, who would want to do it like that?

Nor would I want to use home/home, i'd want to import it using an index.jsx file and the directory name only, like it is commonly used and works with .js files. Js and Jsx must be interchangable. It must be possible to create a new project from template, change nothing but the suffix from Js to Jsx

[DamianRivas]

Actually it works for me too. I'm not sure what I did wrong the first time, but I recently changed my filenames from the standard MyComponent/index.js to MyComponent/index.jsx and they imported just fine with import MyComponent from "components/MyComponent"

And you can see here that webpack is configured for it by default:

https://github.com/preactjs/preact-cli/blob/77e515daaa9df46d6bcf88eea321eac362b2f14b/packages/cli/lib/lib/webpack/webpack-base-config.js#L122

[rschristian]

@br4nnigan

This is probably a bug with your individual system. I always run my imports that way and never had any issues, at least none that I can remember.

I saw on a different thread you used Windows and Node v13 but I can't reproduce your issue running a CI build on Windows 10 with Node v13.x.

It could be an issue due to an old Preact CLI version, what are you currently using?

[br4nnigan]

I just reproduced it again. Created fresh project from default template, started server, changed home/index.js to jsx

Build failed!

× ERROR ./routes/home/index.js
Module build failed (from ../node_modules/babel-loader/lib/index.js):
Error: ENOENT: no such file or directory, open '.\src\routes\home\index.js'

preact-cli 2.2.1
windows 10
Node 13.8.0

[rschristian]

I just reproduced it again. Created fresh project from default template, started server, changed home/index.js to jsx

Build failed!

× ERROR ./routes/home/index.js
Module build failed (from ../node_modules/babel-loader/lib/index.js):
Error: ENOENT: no such file or directory, open '.\src\routes\home\index.js'

preact-cli 2.2.1
windows 10
Node 13.8.0

Firstly, don't change the file extension of the entry point while the server is running. It doesn't expect that to happen. However, if you restart the dev server, it shouldn't have any issue resolving.

Edit: If I'm not mistaken, while the error will present itself in your terminal while running the server, using the app doesn't seem to be impacted by this.

Secondly, are you actually using Preact-cli v2.2.1? The template should come with 3.0.0-rc.