Closed pankajpatel closed 3 years ago
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?
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!
Actually for me it is a weird scenario, I am trying to use it through the tsconfig.json
though paths are getting removed automatically
Hmm... did you google that error?
There's a comment which seems to describe a fix:
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 :)
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.
OK, that makes sense. The lib will load from the file without paths.
Can you try this?
aliases.load('tsconfig.base.json').get('webpack')
It looks like this "base" tsconfig thing is supported for various environments anyway:
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?
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
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 :)
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 :)
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:
paths
configtsconfig.base.json
setup with extends
I don't know:
create react app
?So I need to document that – for example:
With React, and create react app
you may need a slightly different tsconfig
setup as documented here.
If the normal setup doesn't work:
tsconfig.base.json
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.
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;
}
}
Gotcha!
So:
...aliases.get('webpack')
I note your comment about rewires. Can you explain? Feel free to post a link if easier!
yes.
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": {}
}
OK, just span up two demos here using npx create-react-app
and:
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?
Am also going to publish working demos for each platform (vue, react, etc) I think.
Fixed in 3.x
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.
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