importing components using index.jsx

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?

[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.

[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