Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

`DefinePlugin` does not work if `loader` modifies the code

See original GitHub issue

Pre-determined plugin/loader order causes bugs in my application:

I have a custom babel plugin which modifies code.
This causes DefinePlugin to fail because it seems to operate on babel output, not input, code. It thus cannot recognize what to replace in the code.

How can I tell DefinePlugin to run before babel-loader?

I don’t see any configuration option for that. Not sure, if that is an oversight, or if there is a way to fix this at all?

I setup a repository that illustrates the issue: https://github.com/Domiii/webpack-plugin-order-test

PS: I am not sure if this a bug or a feature request or something else.

Issue Analytics

State:
Created 2 years ago
Comments:5 (3 by maintainers)

Top GitHub Comments

1reaction

Domiiicommented, Jun 2, 2021

@alexander-akait, thank you for your feedback!

I guess the string-replace-loader would be preferrable, seeing how it is a lot more widely used 😃

0reactions

alexander-akaitcommented, Jun 2, 2021

Answered. My recommendation - create simple loader and replace values using RegExp, as I said earlier, unfortunately this is not possible to DefinePlugin before loaders (I’ll correct myself, this is theoretically possible if you only use stage 4), but in your case you are using babel so your code can be in any stage, even more you can use experimental syntax that may never be part of ECMA and here is the main problem, we can’t parse this syntax.

Other solution - https://github.com/jean-smaug/babel-plugin-search-and-replace

Feel free to feedback

Top Results From Across the Web

webpack.DefinePlugin - unable to get any substitution to work

My actual use case is far more complex, but the problem I am experiencing is demonstrated via the following minimal code and configuration....

Environment Variables - SurviveJS

Sometimes a part of your code should execute only during development. ... Webpack's DefinePlugin enables replacing free variables so that you can convert...

Adding a Custom webpack Config - Gatsby

When Gatsby creates its webpack config, this function will be called allowing you to modify the default webpack config using webpack-merge.

DefinePlugin | webpack

The DefinePlugin replaces variables in your code with other values or expressions at compile time. This can be useful for allowing different behavior ......

How to Customize Your Angular Build With Webpack

Webpack is not limited to simply bundling source files. ... Webpack module loaders are able to parse different file types.