Linaria: Tsconfig paths not working

[jascodes]

My Linaria version is current tsconfig path is not working.

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

So if I do

`import { DDConst } from '@/components/drop_down/drop_down_constants'

I get

 margin: 0px 25px 0px 15px;
  13 |   /* fill: #975099; */
> 14 |   fill: ${DDConst.primaryColor};
     |           ^^^^^^^^^^^^^^^^^^^^
  15 |   /* fill: ; */
  16 |   height: 16px;
  17 |   width: 16px;

Relative import fixes it.

import { DDConst } from './drop_down_constants'

[jayu]

Hi @jascodes ! Can you provide a repository with minimal reproduction? It is not working because Babel has no idea about custom paths that are defined in tsconfig, but I'm curious your use-case because usually people do no build project with just typescript. There is a similar problem with Jest and module Mapper #531 and I'm trying to decide how to solve it

[jascodes]

https://github.com/jascodes/yobetit

Here you go...

[jayu]

@jascodes I took a look on your setup and currently what you can do to support aliased paths is to use one of those plugins that I found instead of gatsby-plugin-tsconfig-paths.
https://www.gatsbyjs.org/packages/gatsby-alias-imports/
https://www.gatsbyjs.org/packages/gatsby-plugin-alias-imports/
They claim to work based on webpack aliases, so it should work with linaria, since we support webpack aliases.

I suggest keeping this issue open because it will give me more overview of how many different problems with modules aliasing people have and I will try to figure out a solution for that.

[jascodes]

Interesting, will try that out.

[jascodes]

@jayu I am using gatsby-plugin-tsconfig-paths which states it plugin into webpack. So in theory linaria should work with this?

PS: Having paths in tsconfig allow other IDE extensions such as autoimport to work properly

[OrcaXS]

@jayu I've met similar problem integrating linaria with next.js + typescript.

tsconfig.json (hacky):

    "baseUrl": "./src",
    "paths": {
      "~": ["./"],
      "~/*": ["./*"],
    },

pages/index.tsx:

import { colors } from '../colors'; // works
// import { colors } from 'colors'; // doesn't work
// import { colors } from '~/colors'; // doesn't work either

import Component from '../component'; // works
// import Component from 'component'; // works
// import Component from '~/component'; // works

const Box = styled.div`
  color: ${colors.white};
`;
...

Only relative import could let linaria successfully find the module.

I've tried babel-plugin-module-resolver or appending something like config.resolve.alias['~'] = path.join(__dirname, 'src') to next.config.js, but they don't seem to be working, unfortunately.

Here's the reproduction repo: https://github.com/OrcaXS/linaria-next-js-path-alias-repro

[TMaszko]

@jascodes linaria currently takes into account only modules and alias from resolve option from webpack compilation options(It does include modifications from loaders that has run before). Unfortunately gatsby-plugin-tsconfig-paths is using under the hood tsconfig-paths-webpack-plugin which is used as a custom plugin to resolve which linaria doesn't support at the moment. Thats why plugins suggested by @jayu will work ;)

[jayu]

Closing for the same reason as described in https://github.com/callstack/linaria/issues/531#issuecomment-644755300