`npm run build` does not work out of the box

[aldeka]

If I create a test app with npx create-component-lib myproj, then attempt to run npm run build without making any changes to the code generated by create-component-lib / create-react-app, I get this error:

$ npm run build
npm ERR! path /Users/ktolva/Code/package.json
npm ERR! code ENOENT
npm ERR! errno -2
npm ERR! syscall open
npm ERR! enoent ENOENT: no such file or directory, open '/Users/ktolva/Code/package.json'
npm ERR! enoent This is related to npm not being able to find a file.
npm ERR! enoent

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/ktolva/.npm/_logs/2019-01-24T21_22_02_797Z-debug.log
agaetis:Code ktolva$ cd testproj
agaetis:testproj ktolva$ npm run build

> [email protected] build /Users/ktolva/Code/testproj
> rimraf dist && NODE_ENV=production babel src/lib --out-dir dist --copy-files --ignore __tests__,spec.js,test.js,__snapshots__

ReferenceError: [BABEL] src/lib/TextInput.js: Unknown option: /Users/ktolva/Code/testproj/node_modules/babel-preset-react-app/index.js.overrides. Check out http://babeljs.io/docs/usage/options/ for more information about options.

A common cause of this error is the presence of a configuration options object without the corresponding preset name. Example:

Invalid:
  `{ presets: [{option: value}] }`
Valid:
  `{ presets: [['presetName', {option: value}]] }`

For more detailed information on preset configuration, please see https://babeljs.io/docs/en/plugins#pluginpresets-options. (While processing preset: "/Users/ktolva/Code/testproj/node_modules/babel-preset-react-app/index.js")
    at Logger.error (/Users/ktolva/Code/testproj/node_modules/babel-core/lib/transformation/file/logger.js:41:11)
    at OptionManager.mergeOptions (/Users/ktolva/Code/testproj/node_modules/babel-core/lib/transformation/file/options/option-manager.js:226:20)
    at /Users/ktolva/Code/testproj/node_modules/babel-core/lib/transformation/file/options/option-manager.js:265:14
    at /Users/ktolva/Code/testproj/node_modules/babel-core/lib/transformation/file/options/option-manager.js:323:22
    at Array.map (<anonymous>)
    at OptionManager.resolvePresets (/Users/ktolva/Code/testproj/node_modules/babel-core/lib/transformation/file/options/option-manager.js:275:20)
    at OptionManager.mergePresets (/Users/ktolva/Code/testproj/node_modules/babel-core/lib/transformation/file/options/option-manager.js:264:10)
    at OptionManager.mergeOptions (/Users/ktolva/Code/testproj/node_modules/babel-core/lib/transformation/file/options/option-manager.js:249:14)
    at OptionManager.init (/Users/ktolva/Code/testproj/node_modules/babel-core/lib/transformation/file/options/option-manager.js:368:12)
    at File.initOptions (/Users/ktolva/Code/testproj/node_modules/babel-core/lib/transformation/file/index.js:212:65)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] build: `rimraf dist && NODE_ENV=production babel src/lib --out-dir dist --copy-files --ignore __tests__,spec.js,test.js,__snapshots__`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/ktolva/.npm/_logs/2019-01-24T21_22_12_648Z-debug.log

If I look at the .babelrc file that was generated by create-component-lib, it consists of { "presets": [["react-app", { "absoluteRuntime": false }]] } This appears to be the correct formatting mentioned by the error message.

npm start does work normally. If I leave the dev server running while I run npm run build I still get the same error.

I do not know how to proceed from here.

Running on OSX 10.14. Node version v10.15.0. I can provide the package.json I have, but it hasn't been edited at all.

[ericsvendsen]

Seems to be a duplicate of #1

[aldeka]

Possibly, but none of the remediations mentioned in the thread for #1 worked for me.

[ericsvendsen]

@aldeka interesting. I was seeing the same error you're seeing. Then I noticed that this comment had the same error as well. So I adjusted my devDependencies as suggested, and now all is well.

[aldeka]

After running the command in that comment (npm i react react-dom react-scripts @babel/core @babel/cli @babel/preset-react rimraf --save-dev), npm run build on an otherwise unchanged create-component-lib project results in:

> [email protected] build /Users/ktolva/Code/testproj
> rimraf dist && NODE_ENV=production babel src/lib --out-dir dist --copy-files --ignore __tests__,spec.js,test.js,__snapshots__

{ Error: Cannot find module 'babel-preset-env' from '/Users/ktolva/Code/testproj'
- Did you mean "@babel/env"?
    at Function.module.exports [as sync] (/Users/ktolva/Code/testproj/node_modules/resolve/lib/sync.js:58:15)
    at resolveStandardizedName (/Users/ktolva/Code/testproj/node_modules/@babel/core/lib/config/files/plugins.js:101:31)
    at resolvePreset (/Users/ktolva/Code/testproj/node_modules/@babel/core/lib/config/files/plugins.js:58:10)
    at loadPreset (/Users/ktolva/Code/testproj/node_modules/@babel/core/lib/config/files/plugins.js:77:20)
    at createDescriptor (/Users/ktolva/Code/testproj/node_modules/@babel/core/lib/config/config-descriptors.js:154:9)
    at items.map (/Users/ktolva/Code/testproj/node_modules/@babel/core/lib/config/config-descriptors.js:109:50)
    at Array.map (<anonymous>)
    at createDescriptors (/Users/ktolva/Code/testproj/node_modules/@babel/core/lib/config/config-descriptors.js:109:29)
    at createPresetDescriptors (/Users/ktolva/Code/testproj/node_modules/@babel/core/lib/config/config-descriptors.js:101:10)
    at presets (/Users/ktolva/Code/testproj/node_modules/@babel/core/lib/config/config-descriptors.js:47:19) code: 'MODULE_NOT_FOUND' }

Based on that error, I ran npm install --save-dev babel-preset-env, then tried building again. Then I got this error:

> [email protected] build /Users/ktolva/Code/testproj
> rimraf dist && NODE_ENV=production babel src/lib --out-dir dist --copy-files --ignore __tests__,spec.js,test.js,__snapshots__

TypeError: Cannot read property 'bindings' of null
    at Scope.moveBindingTo (/Users/ktolva/Code/testproj/node_modules/@babel/traverse/lib/scope/index.js:867:13)
    at convertBlockScopedToVar (/Users/ktolva/Code/testproj/node_modules/babel-plugin-transform-es2015-block-scoping/lib/index.js:139:13)
    at PluginPass.VariableDeclaration (/Users/ktolva/Code/testproj/node_modules/babel-plugin-transform-es2015-block-scoping/lib/index.js:26:9)
    at newFn (/Users/ktolva/Code/testproj/node_modules/@babel/traverse/lib/visitors.js:193:21)
    at NodePath._call (/Users/ktolva/Code/testproj/node_modules/@babel/traverse/lib/path/context.js:53:20)
    at NodePath.call (/Users/ktolva/Code/testproj/node_modules/@babel/traverse/lib/path/context.js:40:17)
    at NodePath.visit (/Users/ktolva/Code/testproj/node_modules/@babel/traverse/lib/path/context.js:88:12)
    at TraversalContext.visitQueue (/Users/ktolva/Code/testproj/node_modules/@babel/traverse/lib/context.js:118:16)
    at TraversalContext.visitMultiple (/Users/ktolva/Code/testproj/node_modules/@babel/traverse/lib/context.js:85:17)
    at TraversalContext.visit (/Users/ktolva/Code/testproj/node_modules/@babel/traverse/lib/context.js:144:19)

which has no obvious remediation. :/

[0livare]

I encountered this same error. I worked around it by just scrapping babel-preset-react-app and using @babel/preset-env and @babel/preset-react directly. See this commit for more info:

yarn add --dev @babel/cli @babel/core @babel/preset-env @babel/preset-react

// package.json

     "build-examples": "react-scripts build",
     "test": "react-scripts test --env=jsdom",
     "eject": "react-scripts eject",
-    "build": "rimraf dist && NODE_ENV=production babel src/lib --out-dir dist --copy-files --ignore __tests__,spec.js,test.js,__snapshots__"
+    "prebuild": "rimraf dist",
+    "build": "NODE_ENV=production babel src/lib --out-dir dist --copy-files"
   },
   "devDependencies": {
-    "babel-cli": "^6.26.0",
+    "@babel/cli": "^7.2.3",
+    "@babel/core": "^7.3.4",
+    "@babel/preset-env": "^7.3.4",
+    "@babel/preset-react": "^7.0.0",
     "babel-preset-react-app": "^7.0.2",
     "react": "^16.8.4",
     "react-dom": "^16.8.4",

// .babelrc

-{ "presets": [["react-app", { "absoluteRuntime": false }]] }
+{
+  "presets": [
+    "@babel/preset-react",
+    ["@babel/preset-env", { "useBuiltIns": "entry" }]
+  ]
+}

My entire devDependencies is:

  "devDependencies": {
    "@babel/cli": "^7.2.3",
    "@babel/core": "^7.3.4",
    "@babel/preset-env": "^7.3.4",
    "@babel/preset-react": "^7.0.0",
    "babel-preset-react-app": "^7.0.2",
    "react": "^16.8.4",
    "react-dom": "^16.8.4",
    "react-scripts": "^2.1.8",
    "rimraf": "^2.6.3"
  }

[IlyaAgarishev]

@zposten Thank you. That worked for me !

[johnfiorilla-refundlabs]

Thanks @zposten, I had a similar issue and your comment helped me to find my own solution, which was initializing .babelrc with:

{
  "presets": ["@babel/preset-env", "@babel/preset-react"],
  "plugins": ["@babel/plugin-proposal-class-properties"]
}