Breaks the development process

[pankajpatel]

If there are not paths recognized, this package breaks the development workflow.

IMO, the paths should be console logged and not throw error if empty. Empty paths object or no paths object should still be valid configuration

https://github.com/davestewart/alias-hq/blob/master/src/index.js#L68

throw new Error('The loaded paths appear to be empty')

[davestewart]

Hey Pankaj,

Thanks for the issue.

Yeah, I'm reviewing the loading process at the moment actually

In what situation would an empty path configuration be a real world scenario?

I guess if someone was using the library for the first time, and had not yet configured the system.

Have you come up against this problem, or are you just speculating?

[davestewart]

Thought about this, and I think you're right.

Say someone wanted to set a project up in advance, and have the end user add aliases when they were ready?

I'll get this implemented with the next minor release.

Thanks for raising it!

[pankajpatel]

Actually for me it is a weird scenario, I am trying to use it through the tsconfig.json though paths are getting removed automatically

[davestewart]

Hmm... did you google that error?

• Using the tsconfig file to configure the alias does not take effect facebook/create-react-app#8909

There's a comment which seems to describe a fix:

• Using the tsconfig file to configure the alias does not take effect facebook/create-react-app#8909 (comment)

Is this relevant to your issue? Can you check and report back?

If so, perhaps I can update the docs to help future travellers.

Thanks :)

[pankajpatel]

Yes this definitely prevents from the mentioned error. Though the configs for alias-hq are getting messed up.

The loaded paths appear to be empty
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

[davestewart]

OK, that makes sense. The lib will load from the file without paths.

Can you try this?

aliases.load('tsconfig.base.json').get('webpack')

[davestewart]

It looks like this "base" tsconfig thing is supported for various environments anyway:

• https://www.typescriptlang.org/docs/handbook/tsconfig-json.html#tsconfig-bases

Therefore, considering adding code which looks for, loads, and checks for compilerOptions.paths in turn for:

[
  'jsconfig.json',
  'tsconfig.base.json',
  'tsconfig.json',
]

That would mean you could go back to just:

aliases.get('webpack')

Thoughts?

[pankajpatel]

Yeah it works with aliases.load('tsconfig.base.json').get('webpack') and aliases.load('tsconfig.base.json').get('jest')

So its good to add tsconfig.base.json in the default places to look for config

[davestewart]

OK, got that code working.

I should definitely add this to the docs, so based on the advice in the contributing docs, what should I write?

What project type is this, etc?

Cheers :)

[pankajpatel]

I am a bit confused with the question:
I used alias-hq in React Project with TS: https://github.com/pankajpatel/currency-exchange

Can you please elaborate the questions; I can try to answer them here or open a PR ;)

BTW, I like the need to have parts, I will be happy to add them to alias-hq :)

[davestewart]

Hey! Sorry - had to take a call.

So my question was relating to your use case, and how I would describe this in the documentation.

So I know:

• it's a React app
• it doesn't like the paths config
• we need to use the tsconfig.base.json setup with extends

I don't know:

• is this specific to create react app ?

So I need to document that – for example:

---

React

With React, and create react app you may need a slightly different tsconfig setup as documented here.

If the normal setup doesn't work:

1. create a new file tsconfig.base.json
2. in this file, add the setup as documented above
3. in your tsconfig.json add this node to the root: "extends": "tsconfig.base.json"

You should then be able to work with Webpack as normal:

// webpack.config.js
import aliases from 'alias-hq'

module.exports = {
  resolve: {
    alias: aliases.get('webpack')
  }
}

---

Does that make sense?

If you can make some suggestions if I have missed something, or I can just PR the code and this example, then mention you and we can go from there.

[pankajpatel]

Yeah it is correct partially

Create React App doesn't like external configs, thats why we need to use tools like https://github.com/timarney/react-app-rewired

and config can become:

// config-overrides.js

const aliases = require('alias-hq')

module.exports = {
  // The Webpack config to use when compiling your react app for development or production.
  webpack: function(config, env) {
    return {
      ...config,
      resolve: {
        ...(config.resolve || {}),
        alias: {
          ...(config.resolve.alias || {}),
          ...aliases.load('tsconfig.base.json').get('webpack')
        }
      }
    }
  },
  // The Jest config to use when running your jest tests - note that the normal rewires do not
  // work here.
  jest: function(config) {
    config.moduleNameMapper = {
      ...(config.moduleNameMapper || {}),
      ...aliases.load('tsconfig.base.json').get('jest')
    }
    return config;
  }
}

[davestewart]

Gotcha!

So:

• we do need the "base" config file
• when I push the changes, we will only need ...aliases.get('webpack')

I note your comment about rewires. Can you explain? Feel free to post a link if easier!

[pankajpatel]

yes.

---

Using with Create React App

Create React App does lot of heavy lifting for you. This means that you can not add any configuration to App created with Create React App until you run npm|yarn run eject

Other ways to solve this is to use some third party plugins like timarney/react-app-rewired

Considering that you don't want to run eject on your CRA app, you can use timarney/react-app-rewired and create config-overrides.js with following code to make it work smoothly

// config-overrides.js
const aliases = require('alias-hq')

module.exports = {
  // The Webpack config to use when compiling your react app for development or production.
  webpack: function(config, env) {
    return {
      ...config,
      resolve: {
        ...(config.resolve || {}),
        alias: {
          ...(config.resolve.alias || {}),
          ...aliases.get('webpack')
        }
      }
    }
  },
  // The Jest config to use when running your jest tests - note that the normal rewires do not
  // work here.
  jest: function(config) {
    return {
      ...config,
      moduleNameMapper: {
        ...(config.moduleNameMapper || {}),
        ...aliases.get('jest')
      }
    }
  }
}

You also need to modify your tsconfig if you are using React with TypeScript

You need to make a copy of tsconfig.json as tsconfig.base.json and add your path configurations there. So it should look like:

// tsconfig.base.json
{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react",
    "baseUrl": "./src",
    "paths": {
      "@components/*": ["components/*"],
      "@reducers/*": ["reducers/*"],
      "@helpers/*": ["helpers/*"]
    }
  },
  "include": [
    "src"
  ]
}

And finally your tsconfig.json will look like the following:

// tsconfig.json
{
  "extends": "./tsconfig.base.json",
  "compilerOptions": {}
}

[davestewart]

OK, just span up two demos here using npx create-react-app and:

1. ejected and tweaked the webpack config
2. configured using react-app-rewired

Both worked!

In the interest of simplifying things, in both configs, it looks like config.resolve.alias is always defined, so the config can simply be Object.assign(config.resolve.alias, hq.get('webpack'))

However, I couldn't get breakpoints to fire on the jest node... am I missing something?

I am not that fussed about documenting getting Jest to work in React, as I'm sure people who are at that level will have figured it out.

Thoughts?

[davestewart]

Am also going to publish working demos for each platform (vue, react, etc) I think.

[davestewart]

Fixed in 3.x

[pankajpatel]

For jest, I also don't have much knowledge on complex how-tos. Let's leave it like this for now, I am sure we will come across the stuff while using it.