Typescript IDE Auto imports from dist not src

user_3673022 0
Viewed 1800

I'm currently working on a project that is a Typescript Monorepo.

The folder structure looks something like this:

Clients
├- tsconfig.json
└- Packages
   ├- Core
   | ├- tsconfig.json
   | ├-┬ src
   | | └- MyModule.ts
   | └-┬ dist
   |   ├- MyModule.js
   |   └- MyModule.d.ts
   └┬ Web
    ├- tsconfig.json
    └-┬ src
      └- WebComponent.tsx

core/src contains my module where core/dist contains my build.
When I auto-import a module on web/src/WebComponent.tsx it auto-imports as @myApp/dist/MyModule instead of @myApp/src/MyModule.

This is what my TSConfig paths look like (in the root folder):

"baseUrl": "./",
"paths": {
    "@myApp/core/src/*": ["./packages/core/src/*"],
 }

I also tried this:

"baseUrl": "./",
"paths": {
    "@myApp/core/*": ["./packages/core/*"],
}

This doesn't seem to be an IDE Issue as we have people on the team working with both VSCode and Webstorm, both groups of users experience this bug.

EDIT:
If you are also experiencing this issue I have written a temporary fix however a proper solution would be much appreciated!

yarnpkg npm visual-studio-code typescript webstorm
2 Answers

I am not sure this will fully resolve your issue, but I will leave it here nonetheless. I am only able to reproduce the issue on Webstorm, and not Visual Studio Code. If this does not resolve your issue, leave a comment and I will investigate further.

TypeScript Configuration: tsconfig.json

You can try modifying your tsconfig.jsons to explicitly exclude the dist folder using the exclude flag (on the same JSON level as include), documented under TypeScript's TSConfig Reference documentation.

Adding the following configuration entry

   "exclude": ["dist/**/*"]

should indicate the directory should not be imported from in IDEs. However, this seems to work on Visual Studio Code, but is not respected by Webstorm (addressed in the following section). I am not 100% sure why Visual Studio Code is deciding to try and import files outside of files mentioned in includes. If this is not working for you on Visual Studio Code, I will need more details to make a reproduction.

WebStorm (or any other JetBrains IDE)

There are two solutions:

  • Project-specific: On any JetBrains IDE, you can mark a directory as "excluded" (e.g. dist directory) by opening the context-menu (right clicking, by default) and clicking Mark Directory as | Excluded.
  • Globally: Under File | Settings | Editor | File Types, you can add another entry under Ignore Files and Folders for dist.

Note: This will prevent the IDE from displaying any "sources" from the excluded directory (e.g. dist) as a suggestion. If the identifier is unambiguous, it will correctly import it without a further prompt.

Unfortunately, this appears to require manual interaction from a developer after initializing the project - I was unable to find if you could specify an exclusion rule within a VCS repository and have the settings automatically applied when initializing the project in the IDE.

user_143521610

The solution we ended up coming too was to write an ESLint rule which highlights the dist import and replaces it with src on an eslint --fix command.

Here is what we did

Structure:

Clients
├- tsconfig.json
├- .eslintrc.js (UPDATED!)
├- package.json (UPDATED!)
├- eslint (NEW!)
|  ├- index.js (NEW!)
|  └- package.json (NEW!)
└- Packages
   ├- Core
   | ├- tsconfig.json
   | ├-┬ src
   | | └- MyModule.ts
   | └-┬ dist
   |   ├- MyModule.js
   |   └- MyModule.d.ts
   └┬ Web
    ├- tsconfig.json
    └-┬ src
      └- WebComponent.tsx

eslint/package.json:

{
  "name": "eslint-plugin-myApp",
  "version": "1.0.0",
  "main": "index.js"
}

eslint/index.js:
This custom rule parses imports and replaces dist with src if it matches a patern

module.exports.rules = {
  'no-dist-imports': (context) => ({
    ImportDeclaration: (node) => {
      const path = node.source.raw.toString();
      if (path.includes('@myApp/core/dist')) {
        const fixedImport = node.source.raw.replace('dist', 'src');
        context.report({
          node: node.source,
          message: `Importing from dist`,
          fix(fixer) {
            return fixer.replaceText(node.source, fixedImport);
          },
        });
      }
    },
  }),
};

.eslintrc.js (Added the following)

module.exports = {
  plugins: [
    'myApp',
  ],
  rules: {
    'myApp/no-dist-imports': 'error',
  },
};

package.json (Added the following)

{
  "name": "myApp",
  "devDependencies": {
      "eslint-plugin-myApp": "file:./eslint",
  }
}

It's not the perfect solution however it works for the team. If any dist imports somehow make it past the IDE's lint on save feature we have a script lint before push. dist imports no longer make it into our PR's.

If there is a better solution (That fixes the imports preferably :P) please let us know!

user_36730220
Related