0

Is it possible that in my config I have chosen to serve the react package for specific files with the .jsx extension.

Now I have react imported for both .js and .jsx, but can I restrict it only for .jsx files

new webpack.ProvidePlugin({
    "React": "react",
}),
arma73
  • 98
  • 7
  • Importing React many times throughout in your webpack build will not import React many times - it will only be imported once. If you need this to reduce your bundle size then it doesn't make sense.. but if it's just to prevent React from being defined globally in your file then I guess it makes sense – Ari Seyhun Jan 01 '21 at 08:04
  • @Acidic9 Thank you for your attention to my question. You emphasized correctly, I need this to encapsulate the module from the global scope, and at the same time severely restrict the use of react in the project only for .jsx files, and do not import it every time. [sorry for my bad English, I'm still learning it :) ] – arma73 Jan 01 '21 at 10:46

1 Answers1

1

This is currently not possible using the webpack ProviderPlugin.

As a temporary solution, you could modify the ProviderPlugin in node_modules/webpack/lib/ProviderPlugin.js and add the following code below lines 56 and 47:

parser.hooks.expression.for(name).tap("ProvidePlugin", expr => {
  if (name === 'React' && !parser.state.current.resource.endsWith('.jsx')) {
    return true;
  }

  // ...
});

You could even fork the plugin and publish it under your NPM account as a modified version.

Ari Seyhun
  • 11,506
  • 16
  • 62
  • 109
  • thanks for the answer. Tried it as you said and it worked for me. Necessarily if there is time I will follow your advice :). – arma73 Jan 01 '21 at 20:08