ReferenceError: Unknown plugin "replace-require"

[jcurtis]

I'm getting an error about a missing babel plugin. I didn't think it would get hung up on nested .babelrc files?

My test:

import React from 'react';
import { Switch } from 'react-native';
import renderer from 'react-test-renderer';
import 'jest-snapshots-svg';

test('renders the Switch component', () => {
  const component = renderer.create(<Switch />).toJSON();
  expect(component).toMatchSnapshot();
  expect(component).toMatchSVGSnapshot(480, 640);
});

Relevant part of my package.json:

	"devDependencies": {
		"babel-preset-react-native": "4.0.0",
		"jest": "^22.0.4",
		"jest-snapshots-svg": "^0.0.24",
		"react-test-renderer": "16.0.0"
	}

My .babelrc:

{
  "presets": ["react-native"]
}

The error:

 FAIL  __tests__/svg.js
  ● Test suite failed to run

    ReferenceError: Unknown plugin "replace-require" specified in "<path_to_my_project>/node_modules/yoga-layout/.babelrc" at 1, attempted to resolve relative to "<path_to_my_project>/node_modules/yoga-layout"

      at node_modules/babel-core/lib/transformation/file/options/option-manager.js:180:17
          at Array.map (<anonymous>)
      at Function.normalisePlugins (node_modules/babel-core/lib/transformation/file/options/option-manager.js:158:20)
      at OptionManager.mergeOptions (node_modules/babel-core/lib/transformation/file/options/option-manager.js:234:36)
      at OptionManager.init (node_modules/babel-core/lib/transformation/file/options/option-manager.js:368:12)
      at File.initOptions (node_modules/babel-core/lib/transformation/file/index.js:212:65)
      at new File (node_modules/babel-core/lib/transformation/file/index.js:135:24)
      at Pipeline.transform (node_modules/babel-core/lib/transformation/pipeline.js:46:16)

[jacobp100]

Could you check if there’s a babelrc file in node_modules/yoga-layout?

[orta]

maybe in the babel config somewhere we can ignore node module's babelrcs?

[jcurtis]

@jacobp100 Yes there is

{
  "presets": ["stage-3", "es2015"],
  "plugins": [
    "transform-flow-strip-types",
    [
      "replace-require",
      {
        "fs": "{}",
        "path": "{}"
      }
    ]
  ]
}

https://github.com/facebook/yoga/blob/master/javascript/.babelrc

[jcurtis]

@orta From what I understand this will be the default behavior in babel v7 but I can't find a way to configure it to do that with babel v6 right now...

I am curious how this is working for everyone else that's using babel 6 though since yoga-layout is part of this package dependency tree.

[jacobp100]

I think we need a yoga-prebuilt package, which just contains the build output from yoga. I'll try and work on this at some point.

But until I've done this, this bug lies with yoga.

[jcurtis]

Ah maybe a quick fix would be to add their .babelrc to their .npmignore?

[jacobp100]

:+1: or just manually delete it in your node modules

[jcurtis]

Ok so after I delete node_modules/yoga-layout/.babelrc I get:

ReferenceError: Unknown plugin "add-module-exports" specified in "<path_to_my_project>/node_modules/string-pixel-width/.babelrc" at 0, attempted to
 resolve relative to "<path_to_my_project>/node_modules/string-pixel-width"

And then after I delete that one I am able to use toMatchSVGSnapshot 🎆

[jacobp100]

Weird. Try updating jest-snapshots-svg. We removed that dependency when we refactored the text layout.

[jcurtis]

I have the latest (0.0.24). It looks like the change you're referring to hasn't been released yet: https://github.com/jest-community/jest-snapshots-svg/commit/d9035a2f4848cfe240ed508cf8ebab414bc936ba#diff-b9cfc7f2cdf78a7f4b91a753d10865a2

[ACoolmanBigHealth]

FYI I installed with the above commit and got the same error:

yarn add https://github.com/jest-community/jest-snapshots-svg.git#d9035a2f4848cfe240ed508cf8ebab414bc936ba