Plugin Config

[AlexKrupko]

What does the bug relate to?

• Plugin's core
• Debugger

Describe the bug

Hi there,

I have the following files in the project in ./src/utils:

• util1.ts

function util1() { /* .... */}
export default util1;

• util2.ts

function util2() { /* .... */}
export default util2;

• index.ts

export {default as util1} from './util1';
export {default as util2} from './util2';

Then it's imported with import {util1} from 'utils'; in other files.

I've tried this config -

EntryShakingPlugin({
    targets: [
        {
            glob: 'src/utils/*.ts',
        }
    ],
}),

But I got an error Uncaught SyntaxError: The requested module '/src/utils/index.ts' does not provide an export named 'util1'. And it really doesn't provide util1 because index.ts is empty.

To Reproduce

What am I doing wrong? Is it possible to use this plugin on my file/import/export file structure?

Vite version

5.4.11

Additional context

No response

[Dschungelabenteuer]

Hey!

    targets: [
        {
            glob: 'src/utils/*.ts',
        }
    ],

When using this glob pattern, you're actually telling this plugin that all three files (util1.ts, util2.ts and the index.ts are entry files. Which ends up with a circular resolution of cleaned-up files.

What you're probably looking to achieve here is to solely set the utils/index.ts as an entry file (not the other two files) so that whenever you import util1 from utils/index.ts in some random file, it actually resolves to utils/util1.ts instead of involving that index.ts which would also cause utils/util2.ts to be processed).

Using the following config should get you on the right track:

    targets: [
        {
            glob: 'src/utils/index.ts',
        }
    ],

Please let me know :)

[Dschungelabenteuer]

When using this glob pattern, you're actually telling this plugin that all three files (util1.ts, util2.ts and the index.ts are entry files. Which ends up with a circular resolution of cleaned-up files.

That being said, while my above suggestion is likely to help in your scenario, this shouldn't fail like that and the original (aka non-cleaned-up) version of util1.ts should be loaded instead of the cleaned-up one. I actually have a bunch of examples based on cross-entries scenarii so this still is worth investigating! Thank's for reporting!

[AlexKrupko]

Hi @Dschungelabenteuer,
Thank you for the quick answer.
Actually, I tried setting up only the index file as entry point with glob: 'src/utils/index.ts',, but it didn't help and I got again the error - The requested module '/src/utils/index.ts' does not provide an export named 'util1'...
Also I went through your examples, tried a lot of different variants, but unfortunately I didn't get a working config.

[Dschungelabenteuer]

Here's a simple example using the information you provided!

• the entry point is set here
• the utils folder is here
• and the util1 is imported and used here

Hopefully this helps spot any difference between both your scenario and my repro attempt?

EDIT:

The requested module '/src/utils/index.ts' does not provide an export named 'util1'...

Also, just for the record, if you're having that error after specifically setting index.ts as an entry file, this would suggest that the file you're importing util1 into is probably not being transformed by this plugin! Perhaps have you set some other config options such as ignorePatterns or overridden default extensions?

[AlexKrupko]

@Dschungelabenteuer, no, I don't have any other config options except targets.

But, I've found the reason why it doesn't work. There is only one difference between my code and your example.
You use relative paths for imports, but we use the vite-tsconfig-paths in our project. We have "baseUrl": "./src", in tsconfig and import utils like import {util1} from 'utils';
I tried to change it to relative path ../utils and it works as expected.

Is there an option to config the baseUrl in your plugin? Or any other way to do it?

[Dschungelabenteuer]

Is there an option to config the baseUrl in your plugin? Or any other way to do it?

Unfortunately it 100% relies on Vite's own resolvers: they do all the path resolution work and this plugin never actually interacts with the tsconfig.json configuration by itself! Would you mind sharing the whole tsconfig.json file if possible (and TypeScript version just to be sure)?

[AlexKrupko]

Here is our tsconfig.app.json. TS version 5.6 / 5.7

{
    "compilerOptions": {
        "baseUrl": "./src",

        "target": "ES2020",
        "useDefineForClassFields": true,
        "lib": ["ES2023", "DOM", "DOM.Iterable"],
        "module": "ESNext",
        "skipLibCheck": true,

        /* Bundler mode */
        "moduleResolution": "bundler",
        "allowImportingTsExtensions": false, // disallow file extensions in imports
        "allowSyntheticDefaultImports": true,
        "isolatedModules": true,
        "moduleDetection": "force",
        "noEmit": true,
        "jsx": "react-jsx",
        "incremental": true,

        /* Linting */
        "strict": true,
        "noUnusedLocals": true,
        "noUnusedParameters": true,
        "noFallthroughCasesInSwitch": true,
        "useUnknownInCatchVariables": true,
        "verbatimModuleSyntax": true // require `type` keyword for imports
    },
    "include": ["src"],
    "exclude": ["dist", "node_modules", "public"],
}

[AlexKrupko]

I solved the issue above by adding an alias:

        resolve: {
            alias: {
                utils: '/src/utils',
                hooks: '/src/hooks',
                // .....
            },
        },

But next we have more difficult structure with components:

• src/components
  • Component1
    • Component1.tsx - export const something = ''; export default Component1;
    • index.ts - export {default, something} from './Component1';
  • index.ts - export * from './Component1'; export {default as Component1} from './Component1';

And, it's imported with import {Component1} from 'components';

I tried the glob pattern with wildcard ./src/components/**/index.ts and alias templates: '/src/templates',. But unfortunately, it doesn't replace the paths correctly...
I get an error Uncaught ReferenceError: Component1 is not defined because the import is just removed from the file.

[Dschungelabenteuer]

Hey! I'm sorry I couldn't look into it further last week. I've been trying to reproduce the issue for while now and didn't get any result. Are you using by any chance some metaframework? Would it be possible for you to set up a simple repro?

[AlexKrupko]

Hi @Dschungelabenteuer,
No, we don't use any metaframework on the project. I've created a simple project to demonstrate our file structure - https://stackblitz.com/edit/vitejs-vite-lwuyr4vf?file=src%2FApp.tsx,vite.config.ts

Unfortunately, I couldn't make your plugin to work on our structure. So, I've used your code as an example to write my own simple vite plugin. It works as expected and reduces the amount of loaded files from ~790 to ~360.
I also added it to the project above. Maybe this will help you somehow to understand the problem and improve your plugin.

[Dschungelabenteuer]

Hi Alexander! I'm sorry you couldn't make it work out-of-the-box, but I'm glad you came up with a working solution and that this plugin still helped a little bit in some way :) Also, thank you for still taking the time to set up that repro, much appreciated! 🙏

I'll definitely dig into it soon!