Fails to resolve dependencies with webpack aliases

[shiro]

Environment

• Linaria version: 1.3.3
• Bundler (+ version): 4.44.1
• Node.js version: 13
• OS: alpine linux (docker)

Description

I tried setting up linaria with my webpack setup and it works well for the most part.
When importing with relative paths there is no problem, however I'm using absolute imports and import aliases in my webpack project.

Reproducible Demo

In my typescript file I can successfully import relative paths:

import {style} from "../style/styleUtilTS";

But it fails with absolute paths:

import {style} from "style/styleUtilTS";

Here is my webpack resolver configuration:

module.exports.pathResolver = {
    extensions: [".tsx", ".ts", ".jsx", ".mjs", ".js", ".json", ".graphql"],
    roots: [path.resolve(__dirname, path.resolve(__dirname, "src"))], // I added this line because of linaria but it still does not work
    plugins: [new TsconfigPathsPlugin({ configFile: path.join(appRoot, "tsconfig.json") })]
};

Most settings are obtained from my tsconfig.json file through a plugin (which linaria does not support right?).
I tried setting the roots in the resolver to point to the src directory but linaria still throws:

SyntaxError: /opt/app/src/Some/Component.tsx: An error occurred when evaluating the expression: Can't resolve 'style/styleUtilTS' in '/opt/app/src/Some'. Make sure you are not using a browser or Node specific API.

After reading through relevant issues I added babel-plugin-module-resolver so my loader rules look like this:

            {
                test: /\.tsx?$/,
                include: path.join(appRoot, "src"),
                exclude: /node_modules/,
                use: [
                    {
                        loader: "babel-loader",
                        options: {
                            presets: [
                                "@babel/preset-env",
                                "@babel/preset-react",
                                ["@babel/preset-typescript", { onlyRemoveTypeImports: true }],
                            ],
                            babelrc: false,
                            configFile: false,
                            plugins: [
                                isDevelopment && require.resolve("react-refresh/babel"),
                                "@loadable/babel-plugin",
                                "@babel/plugin-proposal-optional-chaining",
                            ].filter(Boolean),
                        },
                    },
                    {
                        loader: "linaria/loader",
                        options: {
                            sourceMap: isDevelopment,
                            babelOptions: { plugins: [["module-resolver", { "root": ["./src"] }]] }
                        },
                    },
                ],
            },

But I still get the same import error, it does not seem to change anything.

Only linaria related imports are affected. As long as the imports linaria uses are all relative other imports can still use webpack resolve logic and it works.

Ideally linaria webpack loader would be able to use the webpack config resolver (including plugins) to resolve paths the same way as webpack does. (its a webpack loader after all!)
If this breaks imports for standalone babel projects (which do not use the webpack loader but rather the babel loader) it probably means some import logic should be refactored and abstracted, but I'm not familiar with how linaria does things so I won't speculate further :P

Thanks for the help and the amazing work on linaria, it's much appreciated!

Edit:

I managed to make it work by either specifying the extension explicitly in the import or by adding relevant extensions to the config:

["babel-plugin-module-resolver", { "root": ["/opt/app/src"], extensions: [".tsx"], }]

However IMO this is really just a workaround and a webpack loader should work with the webpack configuration out of the box using webpack resolvers.

[geakstr]

The same for me. Can't figure out how to make it work even with babel-plugin-module-resolver. Also I would prefer to not use babel at all.

[geakstr]

I have next webpack rule to handle code

{
  test: /\.tsx?$/,
  exclude: /node_modules/,
  use: [
    { loader: "babel-loader" },
    {
      loader: "@linaria/webpack-loader",
      options: {
        sourceMap: isDev,
        extension: ".css",
        babelOptions: {
          plugins: [
            [
              "module-resolver",
              {
                cwd: "babelrc",
                root: ["./src/"],
                alias: {
                  "~/": ".",
                },
                extensions: [".tsx", ".ts", ".jsx", ".js"],
              },
            ],
          ],
        },
      },
    },
    { loader: "ts-loader" },
  ],
}

And babel config

module.exports = {
  presets: [
    "@babel/env",
    "@babel/preset-typescript",
    "@babel/preset-react",
    "@linaria",
  ],
  plugins: [
    "@babel/proposal-optional-chaining",
    "@babel/proposal-nullish-coalescing-operator",
  ],
};

All linaria packages are 3.0.0-beta.1

Error is

Error: prjct/src/features/calendar/Day/Day.styles.ts: An unexpected runtime error occurred during dependencies evaluation: 
prjct/node_modules/@linaria/webpack5-loader/node_modules/enhanced-resolve/lib/Resolver.js:246
                if (err) throw err;
                         ^

Error: Can't resolve '~/features/theme/colors' in 'prjct/src/features/calendar/Day'
    at finishWithoutResolve (prjct/node_modules/@linaria/webpack5-loader/node_modules/enhanced-resolve/lib/Resolver.js:293:18)
    ```

[geakstr]

Found here #630 the mentioning that linaria only supports module aliasing via @babel-plugin-module-resolver and webpack aliases I used tsconfig-paths-webpack-plugin for autosetup aliases. Tried to change resolve section of webpack config from plugins: [new TsconfigPathsPlugin()], to alias: { "~": path.resolve(__dirname, "./src/") } (just manually repeated alias from tsconfig) and aliased imports works for linaria now!

[Anber]

Looks like it was fixed in #830