Exports from .tsx and .jsx files are seemingly ignored (i.e. how to auto-import Next.js components?).

[NextReactionary]

I've been trying to set this plugin up for Next.js with Typescript, but I've ran into a wall of sorts: while importing functions from .js and .ts files works perfectly, anything contained in a .jsx or .tsx file is in no way represented by the d.ts file -- be it a "normal" function or a component.

What I'm trying to achieve is, above all, auto component importing. Is this supported by the plugin?

My config is nothing special, but just in case:

/** @type {import('next').NextConfig} */
const nextConfig = {

    reactStrictMode: true,

    webpack: (config, options) => {
        config.plugins.push(
            require("unplugin-auto-import/webpack")({
                dirs: [
                    ...require("fast-glob").sync(["./src/**"], {onlyDirectories: true})
                ],
                eslintrc: {
                    enabled: true
                }
            })
        )

        return config
    }
}

module.exports = nextConfig

The plugin works great otherwise, so many thanks for your authorship!

[antfu]

Can you share a minimal reproduction? I am not sure what you are trying to achieve.

[NextReactionary]

https://stackblitz.com/edit/nextjs-if3mn6?file=pages/index.js

As you can see, the sum(a, b) and product(a, b) functions exported from pages/numberTools.js can be used without explicitly importing them, exactly like expected. However, you will find that if you uncomment the uses of lowercase(s) and uppercase(s) (exported from pages/stringTools.jsx), the program will refuse to run because of the missing imports.

In this example, you could of course just put every function in a simple .js file, but -- as you can imagine -- this ceases to be an option once you want to implicitly import Jsx components. I hope this example helps.

[azaleta]

A 'pure' jsx/tsx file contains only [function/const] code block, this isn't a common usecase. So move them to a js/ts file, it will work. If you are think of auto-import components in jsx/tsx, this is out of scope. try to use unplugin-vue-components

[NextReactionary]

A 'pure' jsx/tsx file contains only [function/const] code block, this isn't a common usecase. So move them to a js/ts file, it will work.

I'm aware, but I wanted to keep parity with the working plain .js example.

If you are think of auto-import components in jsx/tsx, this is out of scope. try to use unplugin-vue-components

Ahh, I see -- it seems that I am looking for a feature outside the scope of this plugin. I'm not planning to move over to Vue, so consider my issue resolved. Thanks for your time!