CODEWITHSUNDEEP
typescriptnpmvisual-studio-codewebstormyarnpkg
pfych
pfych

Reputation: 928

Typescript IDE Auto imports from dist not src

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!

Upvotes: 4

Views: 4370

Answers (3)

Yunus Emre
Yunus Emre

Reputation: 419

I also faced with the same issue and solved it with a different chnage:

The package.json had "main", "types", and "files" properties like this:

{
  "main": "dist/index.js",
  "types": "dist/index.d.js",
  "files": ["dist"],
}

The final thing that I add to make it work was defining the "typings" property:

  "typings": "dist/index",

With this change; the IDE's I tried started to import from the package again instead of package/dist path.

Upvotes: 0

pfych
pfych

Reputation: 928

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!

Upvotes: 3

concision
concision

Reputation: 6387

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.

Upvotes: 5

Related Questions