Build script doesn't copy all files with babel - build

Question

I want to create, for the first time, a npm package from a react component. I'm following this tutorial here
But when I try the build script, I have some error. Because I'm working on windows/vscode powershell terminal, I changed rm-rf to del/s/q/f and installed cross-env.
"build": "del/s/q/f dist && cross-env NODE_ENV=production babel src/lib --out-dir dist --copy-files"
Now it partially worked but many files are missing in dist folder.
Here is the error msg
ReferenceError: [BABEL] src\lib\components\DatePicker.jsx: Unknown option: C:\Users\romai\Workspace\Openclassrooms\Frontend\HRNet\hrnet_react_datepicker\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: "C:\\Users\\romai\\Workspace\\Openclassrooms\\Frontend\\HRNet\\hrnet_react_datepicker\\node_modules\\babel-preset-react-app\\index.js")
at Logger.error (C:\Users\romai\Workspace\Openclassrooms\Frontend\HRNet\hrnet_react_datepicker\node_modules\babel-core\lib\transformation\file\logger.js:41:11)
at OptionManager.mergeOptions (C:\Users\romai\Workspace\Openclassrooms\Frontend\HRNet\hrnet_react_datepicker\node_modules\babel-core\lib\transformation\file\options\option-manager.js:226:20)
at C:\Users\romai\Workspace\Openclassrooms\Frontend\HRNet\hrnet_react_datepicker\node_modules\babel-core\lib\transformation\file\options\option-manager.js:265:14
at C:\Users\romai\Workspace\Openclassrooms\Frontend\HRNet\hrnet_react_datepicker\node_modules\babel-core\lib\transformation\file\options\option-manager.js:323:22
at Array.map (<anonymous>)
at OptionManager.resolvePresets (C:\Users\romai\Workspace\Openclassrooms\Frontend\HRNet\hrnet_react_datepicker\node_modules\babel-core\lib\transformation\file\options\option-manager.js:275:20)
at OptionManager.mergePresets (C:\Users\romai\Workspace\Openclassrooms\Frontend\HRNet\hrnet_react_datepicker\node_modules\babel-core\lib\transformation\file\options\option-manager.js:264:10)
at OptionManager.mergeOptions (C:\Users\romai\Workspace\Openclassrooms\Frontend\HRNet\hrnet_react_datepicker\node_modules\babel-core\lib\transformation\file\options\option-manager.js:249:14)
at OptionManager.init (C:\Users\romai\Workspace\Openclassrooms\Frontend\HRNet\hrnet_react_datepicker\node_modules\babel-core\lib\transformation\file\options\option-manager.js:368:12)
at File.initOptions (C:\Users\romai\Workspace\Openclassrooms\Frontend\HRNet\hrnet_react_datepicker\node_modules\babel-core\lib\transformation\file\index.js:212:65)
The terminal process "C:\WINDOWS\System32\WindowsPowerShell\v1.0\powershell.exe -Command npm run build" terminated with exit code: 1.
Here is the src structure
Here is my current builded dist folder
.babelrc
{
"presets": [
["react-app", { "absoluteRuntime": false }]
]
}
Actual package.json
{
"name": "xxx",
"version": "1.0.0",
"main": "dist/index.js",
"module": "dist/index.js",
"files": [
"dist",
"README.md"
],
"private": false,
"description": "datepicker component for personnal openclassrooms hrnet project",
"repository": {
"type": "git",
"url": "git+https://github.com/xxx"
},
"scripts": {
"start": "react-scripts start",
"build": "del/s/q/f dist && cross-env NODE_ENV=production babel src/lib --out-dir dist --copy-files",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"babel-cli": "^6.26.0",
"babel-preset-react-app": "^10.0.1",
"cross-env": "^7.0.3",
"sass": "^1.49.9"
},
"dependencies": {
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-scripts": "5.0.0"
}
}
Thanks in advance

Answer 1

I got the same error and decided to debug. This debugging lead me to create.js in node_modules/babel-preset-react-app, which contains "overrides". This is the key that is being rejected. Commenting that part out gives the following error:
Error: Requires Babel "^7.0.0-0", but was loaded with "6.26.3". If you are sure you have a compatible version of #babel/core, it is likely that something in your build process is loading the wrong version. Inspect the stack trace of this error to look for the first entry that doesn't mention "#babel/core" or "babel-core" to see what is calling Babel. (While processing preset: "blabla/frontend/shared/node_modules/babel-preset-react-app/index.js")
This lead me to brave-search "babel-cli 7", which gives https://babeljs.io/docs/en/babel-cli.
A note here states Note: Please install #babel/cli and #babel/core first before npx babel, otherwise npx will install out-of-dated babel 6.x. Other than npx, you can also drop it inside of an npm run script or you may instead execute with the relative path instead. ./node_modules/.bin/babel
Notice it states #babel/cli. Looking at package-lock.json, I see babel-cli. Removing that one and installing #babel/cli gave me version 7.
TLDR: uninstall babel-cli, install #babel/cli.