Errors When Transpiling React Project With Babel

Question

I'm creating projects via command line using:

npx create-react-app xxxxxx

I created a whole batch file to handle the entire thing, to add a couple modules like babel, lodash, and webpack, add some other modules to resolve some "peer" issues, and to move a few files aropund to make it easier to manage files with babel and webpack. This is the batch file contents:

@echo off

IF %1.==. GOTO No1
Goto SetName


:Dowork
cls
echo New folder name: %arg1%
call npx create-react-app %arg1%
cd %arg1%
mkdir dev
mkdir dist
@echo on
::call npm init -y
call npm install node-sass --save-dev
call npm install sass --save-dev
call npm install fibers --save-dev
call npm install react-router-dom --save-dev
::call npm install webpack webpack-cli --save-dev
::call npm install lodash --save-dev
::call npm install @babel/core @babel/cli babel-preset-react-app --save-dev
@echo off
xcopy ..\_run_babel.bat /Q > nul
xcopy ..\_run_webpack.bat /Q > nul
move .\src\* .\dev\ > nul
cd ..\
set arg1=
echo Setup complete

GOTO End1


:SetName
set arg1=%1
GOTO Dowork


:No1
cls
set /p entry=Enter project/folder name: 
IF %entry%.==. GOTO NoName
set arg1=%entry%
set entry=
GOTO Dowork


:NoName
cls
ECHO No project/folder name specified
GOTO End1


:End1

The batch file does a create job of creating everything. The folder then gets added as a project within Eclipse ("Eclipse IDE for JavaScript and Web Developers", Version: 2019-12 (4.14.0)). However, right now I'm just trying to get it to process simple work, and I'm having trouble. It doesn't even want to handle the default files created with a new project. I kick off babel with the following:

npx babel-cli --watch dev --out-dir src --presets react-app/prod

With that, I get errors like the following for every file it tries to process:

ReferenceError: [BABEL] dev\App.js: Unknown option: %project_folder%\node_modules\babel-preset-react-app\prod.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: "%project_folder%\\node_modules\\babel-preset-react-
app\\prod.js")
    at Logger.error (%AppData%\Roaming\npm-cache\_npx\19028\node_modules\babel-cli\node_modules\babel-core\lib\transformation\file\logger.js:41:11)
    at OptionManager.mergeOptions (%AppData%\Roaming\npm-cache\_npx\19028\node_modules\babel-cli\node_modules\babel-core\lib\transformation\file\options\option-manager.js:226:20)
    at %AppData%\Roaming\npm-cache\_npx\19028\node_modules\babel-cli\node_modules\babel-core\lib\transformation\file\options\option-manager.js:265:14
    at %AppData%\Roaming\npm-cache\_npx\19028\node_modules\babel-cli\node_modules\babel-core\lib\transformation\file\options\option-manager.js:323:22
    at Array.map (<anonymous>)
    at OptionManager.resolvePresets (%AppData%\Roaming\npm-cache\_npx\19028\node_modules\babel-cli\node_modules\babel-core\lib\transformation\file\options\option-manager.js:275:20)
    at OptionManager.mergePresets (%AppData%\Roaming\npm-cache\_npx\19028\node_modules\babel-cli\node_modules\babel-core\lib\transformation\file\options\option-manager.js:264:10)
    at OptionManager.mergeOptions (%AppData%\Roaming\npm-cache\_npx\19028\node_modules\babel-cli\node_modules\babel-core\lib\transformation\file\options\option-manager.js:249:14)
    at OptionManager.init (%AppData%\Roaming\npm-cache\_npx\19028\node_modules\babel-cli\node_modules\babel-core\lib\transformation\file\options\option-manager.js:368:12)
    at File.initOptions (%AppData%\Roaming\npm-cache\_npx\19028\node_modules\babel-cli\node_modules\babel-core\lib\transformation\file\index.js:212:65)

I really don;t understand this well enough to know why this is happening, or how to fix it? Is there something I'm doing wrong with the project initialization? Something different I should be doing with running babel? It's very confusing because I had created a couple projects before and had no issues, but I had to put this aside for a while to handle other things, and for the life of me I can't figure why I can't get this to work now.

-- EDIT --

I think I've identified the source of the issue. It seems to be the react preset: babel-preset-react-app. Supposedly it's installed with the create-react-app process. Just for kicks, I've also tried installing the preset separately. The only time I don't get the error messages is if I run babel-cli without defining the react-app preset. Can I remove the preset and then install on older version?

you said you are using Create React App, but you also have a batch file that installs most of the same things that CRA comes bundled with. Why? — Agney
Because I'm a fool that forgot to remove those pieces used in previous setup configurations. However, the issue still remains once I remove the extra installs of babel, webpack, and lodash. — Michael McCauley

Michael McCauley Michael McCauley · Accepted Answer · 2020-04-20T20:27:42

Ok, so it turns out that I was going about everything completely wrong. I did not, in fact, need to have this special babel command at all. I was under the mistaken belief that I needed to transpile with babel before I could compact things with webpack. So, I now rebuilt my batch file "Dowork" section like this:

:Dowork
cls
echo New folder name: %arg1%
call npx create-react-app %arg1%
cd %arg1%
@echo on
call npm install node-sass --save-dev
call npm install sass --save-dev
call npm install fibers --save-dev
call npm install react-router-dom --save-dev
call npm install webpack-cli --save-dev
call npm install @babel/preset-env @babel/preset-react --save-dev
call npm install html-webpack-plugin babel-loader html-loader css-loader style-loader file-loader --save-dev
@echo off
xcopy ..\_run_webpack.bat /Q > nul
xcopy ..\webpack.config.js /Q > nul
cd ..\
set arg1=
echo Setup complete

GOTO End1

This fills in some of the needed components, presets, and loaders that aren't installed as part of create-react-app. And then I use the following as my default webpack config file:

module.exports = {
    module: {
        rules: [
            {
                test: /\.(js|jsx)$/,
                exclude: /node_modules/,
                use: {
                    loader: "babel-loader",
                    options: {
                        cacheDirectory: true,
                        babelrc: false,
                        presets: [
                            "@babel/env",
                            "@babel/react"
                        ]
                    }
                }
            },
            {
                test: /\.html$/,
                use: {
                    loader: "html-loader"
                }
            },
            {
                test: /\.css$/i,
                use: ['style-loader', 'css-loader'],
            },
            {
                test: /\.(png|jpe?g|gif|svg)$/i,
                use: [
                    {
                        loader: 'file-loader',
                    }
                ]
            }
        ]
    }
};

So now, depending on where I need to deploy to, I either build through babel with:

npm run build

Or I kick off webpack:

npx webpack --mode production

It just turned out that I greatly misunderstood how to get things built, and in what way to use babel and webpack. And I also think the the preset "react-app" no longer exists, so it's instead "env" and "react" now.

Errors When Transpiling React Project With Babel

1 Answers