question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Modules resolved absolutely against `src` are treated as external: support TS Paths aliases

See original GitHub issue

Followup to #89 and #87.

Current Behavior

Running tsdx create initializes a tsconfig.json with absolute module resolution relative to the src directory. I have VS Code configured to prefer absolute paths if possible when importing modules, so if I have a module like…

src/foo.ts

export const foo = () => 'bar';

And I type

foo()

and hit Tab, VS Code will add the following import:

import { foo } from 'foo';

This is valid and properly resolved by Typescript. However, if I compile my library, the current Rollup behavior assumes that foo is an external module and doesn’t include it in the bundle.

Expected behavior

I would expect my local modules to be included in my bundle regardless of whether I imported them using ‘absolute’ resolution as above,

OR

I would expect tsdx to not initialize tsconfig.json with resolution rules which would lead me to believe importing modules relative to src is a valid thing to do.

Suggested solution(s)

Either fix the external modules rules to properly understand local src-based resolution, or remove the default src resolution rules from tsconfig.json to avoid confusing users.

Additional context

I probably hit this more often than most because I have configured my editor to prefer absolute path resolutions if available.

Your environment

Software Version(s)
TSDX 0.5.7
TypeScript 3.4.3
Browser N/A
npm/Yarn NPM 6.2.0
Operating System Windows 10

Issue Analytics

  • State:open
  • Created 4 years ago
  • Reactions:16
  • Comments:34 (3 by maintainers)

github_iconTop GitHub Comments

6reactions
ankitcommented, May 16, 2022

Since using babel-plugin-module-resolver does not actually correctly transform the generated *.d.ts, I was able to create a workaround (customizing tsdx.config.js) to use ts-transform-paths and ttypescript

// https://github.com/zerkalica/zerollup/tree/master/packages/ts-transform-paths
const ttypescript = require('ttypescript');
const typescript = require('rollup-plugin-typescript2');

module.exports = {
  rollup(config, options) {
    const rpt2Plugin = config.plugins.find(p => p.name === 'rpt2');
    const rpt2PluginIndex = config.plugins.indexOf(rpt2Plugin);

    const tsconfigPath = options.tsconfig || 'tsconfig.json';

    // borrowed from https://github.com/facebook/create-react-app/pull/7248
    const tsconfigJSON = ttypescript.readConfigFile(
      tsconfigPath,
      ttypescript.sys.readFile
    ).config;

    const tsCompilerOptions = ttypescript.parseJsonConfigFileContent(
      tsconfigJSON,
      ttypescript.sys,
      './'
    ).options;

    const customRPT2Plugin = typescript({
      typescript: ttypescript,
      tsconfig: options.tsconfig,
      tsconfigDefaults: {
        exclude: [
          // all TS test files, regardless whether co-located or in test/ etc
          '**/*.spec.ts',
          '**/*.test.ts',
          '**/*.spec.tsx',
          '**/*.test.tsx',
          // TS defaults below
          'node_modules',
          'bower_components',
          'jspm_packages',
          'dist',
        ],
        compilerOptions: {
          sourceMap: true,
          declaration: true,
          jsx: 'react',
        },
      },
      tsconfigOverride: {
        compilerOptions: {
          // TS -> esnext, then leave the rest to babel-preset-env
          target: 'esnext',
          // don't output declarations more than once
          ...(!options.writeMeta
            ? { declaration: false, declarationMap: false }
            : {}),
        },
      },
      check: !options.transpileOnly && options.writeMeta,
      useTsconfigDeclarationDir: Boolean(
        tsCompilerOptions && tsCompilerOptions.declarationDir
      ),
    });

    config.plugins.splice(rpt2PluginIndex, 1, customRPT2Plugin);
    return config;
  },
};

I am still debating if this is maintainable (I do really like the aliases), but thought I would post here in case someone has a better approach.

5reactions
ivanjonascommented, Jan 29, 2021

Since using babel-plugin-module-resolver does not actually correctly transform the generated *.d.ts, I was able to create a workaround (customizing tsdx.config.js) to use ts-transform-paths and ttypescript

This was a great solution. Thank you @ankit. The key for me was to discover that the code above is only half of the equation. The other half is that tsconfig.json needs a compilerOptions.plugins entry for @zerollup/ts-transform-paths. Docs reference.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Documentation - Module Resolution - TypeScript
Module imports are resolved differently based on whether the module reference is relative or non-relative. A relative import is one that starts with...
Read more >
reactjs - TS Config nested alias for absolute path not working
I think this could be improved on by harmonizing the aliases between the .eslintrc and vite.config so aliases only need to be defined...
Read more >
Typescript — How to solve the problem with unresolved path ...
So, let's see how it behaves. Check the index. js in the output (build) folder — Now, the path is resolved from alias...
Read more >
Typescript – How to solve the problem with unresolved path ...
Setting up path aliases in the tsconfig.json file is really a nice ... src/app/modules/myfunction.ts file containing the function which is ...
Read more >
rollup.js
Importing CommonJS · Publishing ES Modules ... generates an absolute path for <currentdir>/src/some-external-file.js external: [fileURLToPath(new ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found