I tried adding babel support for ??
but it still cannot parse this for some reason.
I am using:
"@babel/core": "^7.24.0"
"typescript": "^5.4.2"
"webpack": "^4.44.1"
"@babel/plugin-transform-nullish-coalescing-operator": "^7.23.4",
I also tried installing and using: @babel/plugin-proposal-nullish-coalescing-operator
It cannot parse the following 2 lines when I compile my ReactJS app because it cannot parse ??
:
const organization = company ?? university;
<MainLayout title={company.name ?? university.name}>
.bablerc
{
"presets": [
["@babel/preset-env", {
"targets": {
"node": "current"
}
}],
["@babel/preset-react", { "development": true }]
],
"plugins": [
["@babel/plugin-proposal-object-rest-spread"],
["@babel/plugin-transform-runtime"],
["@babel/plugin-proposal-export-default-from"],
["@babel/plugin-transform-optional-chaining"],
["@babel/plugin-transform-nullish-coalescing-operator"]
]
}
tsconfig.json
"compilerOptions": {
/* Visit https://aka.ms/tsconfig.json to read more about this file */
"noEmit": true,
"rootDir": "./",
/* Specify the root directory of input files. Use to control the output directory structure with --outDir. */
"target": "esnext",
/* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019', 'ES2020', or 'ESNEXT'. */
"module": "esnext",
/* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', 'es2020', or 'ESNext'. */
"lib": [
"es5",
"es6",
"dom",
"ESNext"
],
/* Specify library files to be included in the compilation. */
"moduleResolution": "node",
"allowJs": false,
/* Allow javascript files to be compiled. */
"jsx": "react",
InterviewContainer.tsx
render() {
const {company, university} = this.props;
if(!company || !university) return null
const organization = company ?? university;
return (
<Main>
<MainLayout title={company.name ?? university.name}>
<div>
<div id="ft-interview">
<div className="panel vertical-space">
<CompanyHeader className="ft-companyHeader" company={company}/>
<CompanyProfile className="ft-companyProfile" company={company}/>
<InterviewContentMain className="ft-interviewContentMain" company={company}/>
</div>
</div>
</div>
</MainLayout>
</Main>
)
}
Error (I get this when webpack uses tsconfig to transpile my webpack dev build)
ERROR in ./views/Interview/InterviewContainer.tsx 28:38
Module parse failed: Unexpected token (28:38)
File was processed with these loaders:
* ./node_modules/ts-loader/index.js
You may need an additional loader to handle the result of these loaders.
| if (!company || !university)
| return null;
> const organization = company ?? university;
| return (React.createElement(Main, null,
| React.createElement(MainLayout, { title: company.name ?? university.name },
@ ./views/App.tsx 5:0-64 38:36-54 40:36-54
@ ./index.tsx