Create-react-app: Webpack alias II

[5angel]

I need to alias different packages in production and development builds, what do?

[gaearon]

Can you provide more info?

[5angel]

Let's say I have a package named protocol, it exports non-minified index.js. Now, for production build I grab index.min.js, and in webpack it's done by making alias['protocol'] = 'protocol/index.min.js'. Is it possible to replicate this behavior in CRA? Or should I do something different?

[Timer]

Your packages/imports get minified automatically when building the production bundle.

It's generally considered poor practice to include already minified / bundled code.

[5angel]

@Timer sigh yeah and it's also bad at minifing complex code. We use closure compiler for those parts, it produces twice as smaller bundle.

And that brings us to the original question: how can I pass an alias for a package?

[Timer]

You can't alias a package without ejecting, sorry!
You might be able to use a require like so: const pkg = require(process.env.NODE_ENV === 'production' ? 'foo': 'bar');

[gaearon]

Yes, I think that's the easiest way.

The observation about GCC is interesting. Maybe we need a package json entry for already minified code that would tell the minifier to stay away. Or a comment begin/end pair. This is a more general problem that doesn't just affect CRA but others too. I'm curious if you can dig up earlier discussions because I bet somebody brought this up with Uglify before.

[sandys]

hi guys,
i have another usecase for aliases - for importing config files (where you have things like AWS keys, etc).
my config file is a json and that is what im trying to use everywhere.
If I use webpack aliases - I can set the correct config file ("prod.js" or "staging.js") and i can import this in any component using "import CONFIG from CONFIGFILE). Here CONFIGFILE is the alias.

can this be done in any other way ?

[josmardias]

@sandys
Do this solves your problem?
https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-development-environment-variables-in-env

I don't think you should import config files anyway. Use environment variables for that, than you'll have some good options to solve this production vs development time issue.

If you don't like .env, are not willing to switch to environment variables, still really want to import config file, try something like const pkg = require(process.env.NODE_ENV === 'production' ? 'foo': 'bar'); as suggested by @Timer

[Timer]

I'll close this as there's been no more interest in it, please let me know if someone wants to find those discussions with Uglify or webpack about already minified code.

[moodysalem]

I need to use webpack aliases so I can include modules that have Joi schemas and replace the joi they import with joi-browser

Is there any workaround for this use case?

I can't just use joi because it includes hoek which is not transpiled to es5

[Timer]

You can try the 2.0 beta that compiles dependencies.

[moodysalem]

That's still not quite what I want because even if that works there's a significant difference in file size between the joi-browser dependency and joi

https://github.com/jeffbski/joi-browser#discussion

[Timer]

Best scenario is to use this behavior, then: https://github.com/facebook/create-react-app/issues/2821#issuecomment-316531292

[moodysalem]

That also doesn’t work because the dependency is required in a separate module. Is this use case really not worth supporting? Browserify uses aliases defined in package.json and that seems like a simple enough solution (read package.json to get webpack aliases)

I'd be happy enough to implement that if it'd be accepted

[Timer]

This isn't something we want to support.
How about opening an issue with the module that requires joi and asking them for a way to toggle between them?

[moodysalem]

How would the module developer support it (in this case me) besides releasing two packages, one that depends on joi-browser and the other that depends on joi? Coding process.env checks in the module is bizarre (it might be equal to 'PRODUCTION' in a server node environment for example, and cause the server to load joi-browser)

The real issue is with joi not being targeted for browsers, but not having any workaround without ejecting makes it a pretty tough situation for the developer. I would rather copy paste the code from the module than eject (that's what I did in the meantime)

Are there not other valuable use cases for having aliases? Generally having browser optimized versions of transitive dependencies seems like a desirable feature to support, and it doesn't seem that hard to support either

[Timer]

You're right in saying that joi isn't targeted for browsers, but this rarely ever happens which is why we don't want to support it -- people will use it to do other complex/confusing things.

The module developer could import joi-browser through files exposed via module, and joi via main [this uses the assumption that no one uses webpack to bundle Node code].

Why can't the package developer switch to a lighter weight version of joi (joi-browser even for Node)? Sorry, I don't have much context here.