Couldn't find preset "react-app" relative to directory

[MichaelSu1983]

Today I generated the flow client using "javascript-flowtyped" for a swagger file. I found the generated client was fine, but I encounter this problem below when running a unit test.

Couldn't find preset "react-app" relative to directory "/Users/msu/xxxxx/node_modules/@custom/swaggergen-flow-client-testing"

  at node_modules/babel-core/lib/transformation/file/options/option-manager.js:293:19
      at Array.map (<anonymous>)
  at OptionManager.resolvePresets (node_modules/babel-core/lib/transformation/file/options/option-manager.js:275:20)
  at OptionManager.mergePresets (node_modules/babel-core/lib/transformation/file/options/option-manager.js:264:10)
  at OptionManager.mergeOptions (node_modules/babel-core/lib/transformation/file/options/option-manager.js:249:14)
  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)

So, do you happen to know how to fix the above issue? I did a search and found a article about it https://javascriptplayground.com/npm-flowjs-javascript/, seems it is related to the library published in NPM should be precompiled beforehand. I could not get it right.

Seems the babel setting in the generated client has set below, which could be the culprit, but not sure why it is set to "react-app".

/.babelrc

{ "presets": ["react-app"], "plugins": ["transform-flow-strip-types"] }

Look forward to your reply.

Cheers,

Michael

[MichaelSu1983]

@jaypea I saw you are the author for flow client. do you have any idea?

[cnx-bot]

@MichaelSu1983 did you run npm install in the directory of the generated client? and in order to use it as a library you would need to run npm build as well which generates vanilla es5 javascript.

[MichaelSu1983]

@cnx-bot, thanks for your reply. I did run those scripts. I am able to generate the client. But our production code uses env, http://babeljs.io/docs/en/env/, I always have "Couldn't find preset "react-app" relative to directory " error when I run a test.

npm install export NODE_ENV="production" npm install rimraf -g npm install babel-preset-react-app -g npm run build

[jaypea]

@MichaelSu1983 how do you use the generated client sdk? as a dependency in your production code using npm? or do you copy it directly into your production repo?

if you install the babel preset globally, your local babel installation wouldn't find it and just give you the error message.

i would recommend to put the generated client sdk in its own repository. make sure to check in all generated files from npm build as well. in your production code simply add the client repo as depedency using npm install --save https://github.com/:user/:clientSdkRepo#:TagOrGithash

you can use it like any other library now and does not interfere with the babel setup in your production code.

[MichaelSu1983]

@jaypea Thanks very much for your reply. I run the client generator to generated the client code, then npm install, and npm run build, and then npm publish it to NPM private repo.

In production code, I define the version in package.json to use it as a normal library. Everything works fine. But the product code has a unit test. It always failed as below. ` Running NODE_ENV=development BABEL_ENV=node jest --config jest.config.js /test.js FAIL /test.js ● Test suite failed to run

Couldn't find preset "react-app" relative to directory "/Users/msu/product-repo"

  at node_modules/babel-core/lib/transformation/file/options/option-manager.js:293:19
      at Array.map (<anonymous>)
  at OptionManager.resolvePresets (node_modules/babel-core/lib/transformation/file/options/option-manager.js:275:20)
  at OptionManager.mergePresets (node_modules/babel-core/lib/transformation/file/options/option-manager.js:264:10)
  at OptionManager.mergeOptions (node_modules/babel-core/lib/transformation/file/options/option-manager.js:249:14)
  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)

Test Suites: 1 failed, 1 total Tests: 0 total Snapshots: 0 total Time: 0.745s `

Then I tried to npm install babel-preset-react-app in the production code. It always failed with the missing of NODE_ENV or BABEL_ENV, even if I export them as values -NODE_ENV=development BABEL_ENV=node.

Usingbabel-preset-react-apprequires that you specifyNODE_ENVorBABEL_ENV` environment variables. Valid values are "development", "test", and "production". Instead, received: "node". (While processing preset: "/Users/msu/product-repo/node_modules/babel-preset-react-app/index.js")

  at create (node_modules/babel-preset-react-app/create.js:11:11)
  at Object.<anonymous> (node_modules/babel-preset-react-app/index.js:19:18)
  at node_modules/babel-core/lib/transformation/file/options/option-manager.js:296:17

`

=================== Product Pseudo Code: ` import { DefaultApi, Configuration, type ConfigurationParameters, type SidebarConfiguration, } from '@private/swaggergen-flow-client-testing';

const fetchSidebarConfigNEW = ( baseUrl: string, pageType: 'settings', projectKey: string, containerType: string, ): Promise => { const configPara: ConfigurationParameters = { basePath: baseUrl, }; const config = new Configuration(configPara); return DefaultApi( config, ).GetSideBarClientMethod( pageType, projectKey, containerType, ); };

export default fetchSidebarConfigNEW;

`

Unit Test ` import getSidebarConfiguration from './index';

const baseUrl = 'https://abc.test.com';

describe('getSidebarConfiguration', () => { it('should fetch sidebar configuration', () => { getSidebarConfiguration(baseUrl, { projectKey: 'XYZ', }); }); }); `

[MichaelSu1983]

I figured this out. It was because jest still looks for .babelrc for transpiling inside the generated client repo. So the fix is to ignore the babel config file for publishing.