React-virtualized: Couldn't find preset "./.babelrc.js" relative to directory "/node_modules/react-virtualized"

[razius]

I get the following error while trying to compile with the latest version (9.19.0).

ERROR in ./node_modules/react-virtualized/dist/commonjs/AutoSizer/index.js Module build failed: Error: Couldn't find preset "./.babelrc.js" relative to directory "/unisport/storefront/node_modules/react-virtualized" at /unisport/storefront/node_modules/babel-core/lib/transformation/file/options/option-manager.js:293:19 at Array.map (<anonymous>) at OptionManager.resolvePresets (/unisport/storefront/node_modules/babel-core/lib/transformation/file/options/option-manager.js:275:20) at OptionManager.mergePresets (/unisport/storefront/node_modules/babel-core/lib/transformation/file/options/option-manager.js:264:10) at OptionManager.mergeOptions (/unisport/storefront/node_modules/babel-core/lib/transformation/file/options/option-manager.js:249:14) at OptionManager.init (/unisport/storefront/node_modules/babel-core/lib/transformation/file/options/option-manager.js:368:12) at File.initOptions (/unisport/storefront/node_modules/babel-core/lib/transformation/file/index.js:212:65) at new File (/unisport/storefront/node_modules/babel-core/lib/transformation/file/index.js:135:24) at Pipeline.transform (/unisport/storefront/node_modules/babel-core/lib/transformation/pipeline.js:46:16) at transpile (/unisport/storefront/node_modules/babel-loader/lib/index.js:50:20) at Object.module.exports (/unisport/storefront/node_modules/babel-loader/lib/index.js:173:20) @ ./node_modules/react-virtualized-select/dist/commonjs/VirtualizedSelect/VirtualizedSelect.js 41:17-69 @ ./node_modules/react-virtualized-select/dist/commonjs/VirtualizedSelect/index.js @ ./node_modules/react-virtualized-select/dist/commonjs/index.js

[TrySound]

@razius

{
  test: /\.js$/,
  exclude: /node_modules/, // add this line
  loader: 'babel-loader'
}

[razius]

@TrySound , thank you. I didn't know about this.

Feel silly now :)

[GlebDolzhikov]

I have the same issue during the running tests in jest. Any suggestions?

[TrySound]

@GlebDolzhikov same answer. Do not transpile node_modules

[logeshpaul]

@TrySound I had the same issue, adding that line resolved the issue. Thanks for posting 👍

[GlebDolzhikov]

But as i understand it's a part of webpack config? My test environment doesn't use webpack, i try to add transformIgnorePatterns to jest.config - in vain

[TrySound]

Just skip this option.
transformIgnorePatterns [array]
Default: ["/node_modules/"]

[GlebDolzhikov]

doesn't work for me, finish it up by fixed "react-virtualized": "9.18.5",

[TrySound]

@GlebDolzhikov Could you create reproducing repository?

[GlebDolzhikov]

Will try when I have some spare time;)

[geminiyellow]

same error.

and i set include src only.

ref: https://github.com/bvaughn/react-virtualized/issues/1112#issuecomment-389755939

[TrySound]

@geminiyellow Show config

[anlesk]

Faced with the same error. The proposed solution for excluding node_modules folder is not working for me - I have several dependencies that are not being transpiled for non-es6 usage.

So I ended up having the configuration like this:

{
  test: /\.js$/,
  exclude: [
    /node_modules[\\/]react-virtualized/,
  ],
  loader: 'babel-loader',
}

[zgriesinger]

I had this issue while running Jest tests, but it was my fault so I'm leaving it here for anyone else who has the same issue.

I am locked to an earlier version of React (15.x) and thereby an old version of react-virtualized

To shrink our bundle we used the method pointed out here https://github.com/bvaughn/react-virtualized/issues/427#issuecomment-252440849 and imported react-virtualized like:

import { MultiGrid } from 'react-virtualized/dist/es/MultiGrid';

But this caused this error to happen with Jest, once I changed the import to:

import { MultiGrid } from 'react-virtualized/dist/commonjs/MultiGrid';

The problem went away and was being properly transpiled

[TrySound]

@zgriesinger es output will be bundled with less noise in the output bundle. To solve the issue with jest you can use jest mocking

jest.mock('react-virtualized/dist/es/MultiGrid', () =>
  require('react-virtualized/dist/commonjs/MultiGrid')
)

[zgriesinger]

Worked perfectly thanks!

[reginagarkin]

getting the same error as above:

Error: Couldn't find preset "./.babelrc.js" relative to directory "/Users/myFolder/ui/build/vneraapp/js/vendor/react-virtualized"
    at /Users/myFolder/ui/node_modules/babel-core/lib/transformation/file/options/option-manager.js:293:19
    at Array.map (<anonymous>)
    at OptionManager.resolvePresets (/Users/myFolder/ui/node_modules/babel-core/lib/transformation/file/options/option-manager.js:275:20)
    at OptionManager.mergePresets (/Users/myFolder/ui/node_modules/babel-core/lib/transformation/file/options/option-manager.js:264:10)
    at OptionManager.mergeOptions (/Users/myFolder/ui/node_modules/babel-core/lib/transformation/file/options/option-manager.js:249:14)
    at OptionManager.init (/Users/myFolder/ui/node_modules/babel-core/lib/transformation/file/options/option-manager.js:368:12)
    at File.initOptions (/Users/myFolder/ui/node_modules/babel-core/lib/transformation/file/index.js:212:65)
    at new File (/Users/myFolder/ui/node_modules/babel-core/lib/transformation/file/index.js:135:24)
    at Pipeline.transform (/Users/myFolder/ui/node_modules/babel-core/lib/transformation/pipeline.js:46:16)
    at DestroyableTransform._transform (/Users/myFolder/ui/node_modules/gulp-babel/index.js:36:22)
Emitted 'error' event at:
    at DestroyableTransform.onerror (/Users/myFolder/ui/node_modules/vinyl-fs/node_modules/readable-stream/lib/_stream_readable.js:558:12)
    at DestroyableTransform.emit (events.js:182:13)
    at DestroyableTransform._transform (/Users/myFolder/ui/node_modules/gulp-babel/index.js:54:9)
    at DestroyableTransform.Transform._read (/Users/myFolder/ui/node_modules/through2/node_modules/readable-stream/lib/_stream_transform.js:184:10)
    at DestroyableTransform.Readable.read (/Users/myFolder/ui/node_modules/through2/node_modules/readable-stream/lib/_stream_readable.js:443:10)
    at flow (/Users/myFolder/ui/node_modules/through2/node_modules/readable-stream/lib/_stream_readable.js:813:34)
    at DestroyableTransform.<anonymous> (/Users/myFolder/ui/node_modules/through2/node_modules/readable-stream/lib/_stream_readable.js:683:7)
    at DestroyableTransform.emit (events.js:182:13)
    at onwriteDrain (/Users/myFolder/ui/node_modules/vinyl-fs/node_modules/readable-stream/lib/_stream_writable.js:300:12)
    at afterWrite (/Users/myFolder/ui/node_modules/vinyl-fs/node_modules/readable-stream/lib/_stream_writable.js:288:5)

and webpack is setup this way too:

test: /\.jsx?$/,
exclude: /node_modules/,

What's causing this issue?

[AlexMold]

You can add this option in package.json in root of your project to exclude your libraries like react-virtualized

Example:
"jest": { "setupFiles": [ "./config/jest.setup.js" ], "transformIgnorePatterns": [ "/!node_modules\\/lodash-es/", "/!node_modules\\/react-virtualized/" ] }

[AlexMold]

This alternative of jest.mock

[IanVS]

Re: https://github.com/bvaughn/react-virtualized/issues/1112#issuecomment-408435446, is it necessary to mock these in every one of my tests which are failing? Or is there a better way to do this globally?

[adamdicarlo]

This seems like a bug to me.

Being as react-virtualized ships an es build, and points to it via its package.json module and jsnext:main keys, it should also ship its babelrc.js file.

I'm not sure what use the es build is with the babel config being broken.

The reason it's particularly broken is because react-virtualized's package.json has this stanza:

  "babel": {
    "presets": [
      "./.babelrc.js"
    ]
  },