What is the right way to use local resolve (like typescript paths)?

[Tallyb]

What is the suggested way to resolve paths like tsconfig options:

{
"baseUrl": ".",
"paths": {
   "bar": ["packages/bar"]
}
}

Adding babel plugin modules resolver with the above paths causing it to resolve to something like node_modules/packages/bar. I could not find a way to configure the transform paths plugin to ignore those.

[hqjs]

Can you please check this plugin https://github.com/hqjs/babel-plugin-transform-name-imports it might be what you are looking for. The other option that might be helpful - vue way to resolve packages from the root by adding @/ before package name e.g. @/path/from/the/root. If none of this solve the issue I would be glad to help with the plugin.

[Tallyb]

Hi, Not sure how I can add a plugin that is already included in the server. https://github.com/hqjs/hq/blob/master/compilers/js.mjs#L51 Or if there is a way to configure an already added plugin Also, from looking at the documentation it seems to be pointing to node_modules/... which is not where our code is.

we have also tried the babel-plugin-module-resolver (which is not included) with this configuration: { "plugins": [ ["module-resolver", { "root": ".", "alias": { "bar": "packages/bar", "foo" : "packages/foo" } }] ] } However, the js compiler is translating import {something} from 'bar into import * as _ref8 from node_modules/packages/bar.

This is a very common case, I think for larger projects that need unbundling support

[hqjs]

You can include plugin that is already there with different configuration (it needs to be installed to your project), but this plugin indeed points to node_modules/ (I can enhance it and add root parameter that will be node_modules/ by default).

Looking at babel-plugin-module-resolver it seems like it should work, but configuration should be as follow:

{
  "plugins": [
    ["module-resolver", {
      "root": ".",
      "alias": {
        "bar": "/packages/bar",
        "foo" : "/packages/foo"
      }
    }]
  ]
}

Notice / before package paths.

Talking about problem in general to get rid of long relative imports ../../../../../../foo/bar it is possible to resolve packages from the root folder by using absolute imports /foo/bar or vue style imports @/foo/bar.

[hqjs]

In case it won't help - please try "root": "/" as well. And if it fails - ping me, I will modify hq plugin so it will accept root parameter that will solve your case.

[Tallyb]

Tried root with "." "./" and "/" and they do not work. Also I had to change the above to

"bar/*": "/packages/bar/*",

[hqjs]

I tried babel-plugin-module-resolver with minimal configuration and it works. It does not support wildcards as far as I see.

In your case it should be:

{
  "plugins": [
    ["module-resolver", {
      "root": "/",
      "alias": {
        "bar": "/packages/bar",
        "foo" : "/packages/foo"
      }
    }]
  ]
}

So bar will be resolved to /packages/bar and foo to /packages/foo.

I can create a separate plugin that does wildcard resolution, but it would have to be configured trough .babelrc.

[hqjs]

@Tallyb do you want me to help with the plugin? The syntax would be:

{
  "plugins": [
    ["hq-module-resolver", {
      "foo": "/packages/foo", // Exact resolution
      "bar/*": "/packages/bar", // Wildcard resolution excluding bar itself bar -/-> packages/bar
      "baz/a": "lodash", // Exact resolution for compound path that transforms into bare import
      "baz/b/*": "/src/b" // Wildcard resolution for compound path
    }]
  ]
}

[Tallyb]

Is this a new plugin that I should install or is it included?

[hqjs]

This is a plugin that I should code first and then you will have to install it.

[Tallyb]

That sounds interesting. However, I am wondering if exposing the configuration for https://github.com/hqjs/babel-plugin-transform-paths to remove node_modules should do the trick.

[hqjs]

It's a bit different problem, I'd rather go with a new plugin to keep things simple. It won't be included by default as it is impossible to predict which aliases you will come up with, but should be easy to install and include trough .babelrc

[Tallyb]

Sounds good

[hqjs]

Aaand it's done. Let me catch a breath and I'll release it.

[hqjs]

Please give this plugin a try https://github.com/hqjs/babel-plugin-resolve-modules

NOTE: I slightly change the syntax. Details are on the plugin page.

[hqjs]

@Tallyb Did you try it? Does it work for you?

[Tallyb]

@hqjs - sorry. Did not have the time yet. Will get to it in the coming days.

[Tallyb]

It seems that the problem is in an earlier stage:

<!-- index.html -->
 <script src="main.ts"></script>

//main.ts
import { setupConfig } from '@shared/stencil'; 

//.babelrc
    "plugins": [
      ["@hqjs/babel-plugin-resolve-modules", {
        "resolve": {
            "design-system-loader": "/design-system/stencil/dist/loader/index.mjs",
            "@shared/stencil/*": "/design-system/stencil/*",
...more here

however - when looking at the main.ts uploaded in the browser I see :

//main.js
let setupConfig;
import * as _ref5 from "/node_modules/@shared/stencil";

[hqjs]

Config is wrong. Try without additional '*'

//.babelrc
{
    "plugins": [
      ["@hqjs/babel-plugin-resolve-modules", {
        "resolve": {
            "design-system-loader": "/design-system/stencil/dist/loader/index.mjs",
            "@shared/stencil/*": "/design-system/stencil/", // No star here
            ...
       }]
  ]
}

[hqjs]

Ah and /* won't transform the exact match as it does not end with /. I would recommend to add these lines to resolve option

"@shared/stencil/*": "/design-system/stencil/", // Pattern transformation for everything starts with @shared/stencil/
"@shared/stencil": "/design-system/stencil" // Exact transformation for @shared/stencil itself

So you will have both exact and pattern transformations.

Alternatively you can achieve the same behaviour with only one pattern, but it is much less safe

"@shared/stencil*": "/design-system/stencil

It will transform @shared/stencilA to /design-system/stencilA which might be not what you need.

[Tallyb]

I am not sure this is the plugin that results the error. It seems like the node_modules is added before this plugin. Maybe in the https://www.npmjs.com/package/@hqjs/babel-plugin-transform-paths?

[hqjs]

It is wrong config for sure, your .babelrc plugins are the first that are applied. You can find the right config above.

[Tallyb]

Ok, seems to be fixing it. That is cool. Now to the next errors. BTW - I think you should add documentation... Happy to help.

[hqjs]

Just let me know if you need a help.

You are very welcome to make a PR for documentation to plugin pages, hq README or website.

My idea was that 99% of the time it requires no configuration and for the rest 1% the documentation should be on the plugin side so there is nothing to be documented. But I would be really glad if someone can help to cover all the pitfalls. May be set of examples for popular frameworks could come in help. What do you think?

[Tallyb]

I think 99% of the time is optimistic. projects come in all shapes and forms, and this is not yet field proven. We are experiencing few more issues.

[Tallyb]

Closing this as the initial problem seems to be solved

[hqjs]

True, yet still many and many projects are just standard React and need no extra tuning. Anyway your help with documentation/examples will be appreciated. And thanks for all the effort, I will try to help as much as I can.