a need to disable propTypes removal for some node modules

[wt]

Hey there. I have a node_module that is using the propTypes in order to detect which properties or owned by a particular component. Until that problem can be dealt with in a better, I need to stop the babel-plugin-transform-react-remove-prop-types plugin from running on those modules. I did some extensive looking, and it seems that the babel-preset-gatsby does not expose an option for setting the ignoreFilenames attr on the babel-plugin-transform-react-remove-prop-types plugin.

The following hack does what I want:

✗ diff -u node_modules/babel-preset-gatsby/index.js.old node_modules/babel-preset-gatsby/index.js
--- node_modules/babel-preset-gatsby/index.js.old	2022-09-09 14:49:00.000000000 -0700
+++ node_modules/babel-preset-gatsby/index.js	2022-09-09 14:48:32.000000000 -0700
@@ -99,6 +99,7 @@
       loose: true
     }], IS_TEST && resolve(`babel-plugin-dynamic-import-node`), stage === `build-javascript` && [// Remove PropTypes from production build
     resolve(`babel-plugin-transform-react-remove-prop-types`), {
+      ignoreFilenames: ["node_modules/some_module"],
       removeImport: true
     }]].filter(Boolean)
   };

Obviously, having to change a core gatsby module like this is not great.

I've tried the following without success:

exports.onCreateBabelConfig = ({ actions, stage, reporter }) => {
  // Don't remove propTypes since some module uses them in weird ways
  actions.setBabelPlugin({
    name: `babel-plugin-transform-react-remove-prop-types`,
    options: {
      ignoreFilenames: ['node_modules/some_module'],
    }
  })
}

However, plugins are applied before presets, and the presets in babel-preset-gatsby override the options for that plugin. I am wondering. Would it be possible to expose the ignoreFilenames as an option that can be set on the babel-preset-gatsby module. Something that could be applied something like this would be great:

exports.onCreateBabelConfig = ({ actions, stage, reporter }) => {
  // Don't remove propTypes since some module uses them in weird ways
  actions.setBabelPreset({
    name: 'babel-preset-gatsby',
    options: {
      name: `babel-plugin-transform-react-remove-prop-types-opts`,
      options: {
        ignoreFilenames: ['node_modules/some_module'],
      }
    }
  })
}

[LekoArts]

Hi!

Have you tried using actions.setBabelPreset?
https://www.gatsbyjs.com/docs/reference/config-files/actions/#setBabelPreset

This calls this here:

gatsby/packages/gatsby/src/redux/actions/public.js

Lines 1186 to 1207 in 1a8c5d5

	actions.setBabelPreset = (config: Object, plugin?: ?Plugin = null) => {
	// Validate
	let name = `The plugin "${plugin.name}"`
	if (plugin.name === `default-site-plugin`) {
	name = `Your site's "gatsby-node.js"`
	}
	if (!config.name) {
	console.log(`${name} must set the name of the Babel preset`)
	console.log(JSON.stringify(config, null, 4))
	if (isNotTestEnv) {
	process.exit(1)
	}
	}
	if (!config.options) {
	config.options = {}
	}
	return {
	type: `SET_BABEL_PRESET`,
	plugin,
	payload: config,
	}
	}

Which subsequently calls this here:
https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby/src/redux/reducers/babelrc.ts#L73-L99

It uses lodash merge (https://lodash.com/docs/4.17.15#merge) so you should be able to override the option in the preset. Also wrap your actions.setBabelPreset call with a check on the stage

stage === "build-javascript"

[wt]

I haven't found a way to override the plugin settings in the babel preset. I haven't found a way to get babel to allow changing the plugin config for a plugin in the preset.

I fought with this first a while before adding the option to the preset. I setBabelPreset and setBabelPlugin in many different forms. I also tried manually creating a .babelrc and wasn't able to override the plugin config.

FWIW, I have also found 0 examples of overriding plugin options of a preset with babel. This is the closest thing I found: https://stackoverflow.com/questions/52353395/how-to-overwrite-babels-preset-plugin-options

The answer states that babel doesn't support those types of overrides. FWIW, I haven't found any way to do that either. There is also a issue in the babel tracker that has the same info as that link.

I really don't think it's possible to override the options for a plugin in a preset.

Given that, I need something to turn that plugin off.

[wt]

FWIW, I did try using the following options among others:

  actions.setBabelPlugin({
    name: `babel-plugin-transform-react-remove-prop-types`,
    options: {
      ignoreFilenames: ['node_modules'],
    }
  })

  actions.setBabelPreset({
    name: `babel-preset-gatsby`,
    options: {
      plugins: [
        'babel-plugin-transform-react-remove-prop-types', { ignoreFilenames: ['node_modules']},
      ]
    }
  })

Both didn't work.

[wt]

And here's the .babelrc that I tried:

{ 
  presets: [
    "babel-preset-gatsby",
  ],  
  overrides: [
    {   
      plugins: [
         ["babel-plugin-transform-react-remove-prop-types", { "ignoreFilenames": ["node_modules"] }]
      ],  
    }   
  ],  
}

[wt]

As it stands, this issue is a blocker for my using gatsby for production work right now. I have submitted a proposed change to at least provide a workaround until we can fix our libraries to operate without propTypes at #36586.

[LekoArts]

Hi!

We've looked at this again and yes, indeed, your PR would be necessary to be able to override this. However, we won't merge it as allowing this would be a huge anti-pattern and we don't want to allow that.

Please use https://www.npmjs.com/package/patch-package until you can fix the root cause of your issue.

[wt]

Not providing a way to work with this antipattern (which I agree is a huge antipattern in terms of quality) will prevent me from using gatsby at all for this project, which is a real bummer. I'm asking for a way to workaround the issue until we can do the work needed to change all the components that use the antipattern (which is not small). I suspect I am not the only person that this would benefit. I guess I will have to find another solution, maybe Next.js or something. This is literally the only thing stopping me from using gatsby. FWIW, I would love to not need this workaround, but the fixes to our libs are not small and getting the changes in will take a long time.

Is there any way we can allow this config workaround for the minority of cases that need it? I made sure to default to not enabling the workaround as I agree with you about the antipattern. I just think that there are cases where this will deter usage of gatsby for something that has a pretty simple temporary workaround.

FWIW, I do appreciate the opinionated nature of gatsby in having this turned on by default. I think it results in higher quality code. However, I am not in direct control of the libs that use the anti-pattern and would like a way to use gatsby without having to change a large codebase that I don't control.

Can you think of anything else that we could do that would be acceptable to you and not force me to maintain a fork of gatsby in order to use it?

[LekoArts]

You don‘t have to maintain a fork, with patch-package you commit one file and it‘s done. The preset itself rarely changes so you should be good until you fix your root issue

[wt]

Thanks for the pointer. I will give that a shot.

[wt]

After giving the patch-package option a try, I just ported everything to next.js. I really wanted to use gatsby for this.