U get an error when trying to create-strapi-app

System Information
  • Strapi Version: (npx create-strapi-app = 3.6.3)
  • Operating System: macOs v 11.4
  • Database:
  • Node Version: v14.17.0
  • NPM Version: 6.14.13
  • Yarn Version: 1.9.4

I’m trying to run npx create-strapi-app test-project-1 --quickstart and I get this error

Error: ./.cache/plugins/strapi-plugin-content-manager/admin/src/components/RepeatableComponent/Banner.js 2:87
Module parse failed: Unexpected token (2:87)
File was processed with these loaders:
 * ./node_modules/babel-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
| "use strict";var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.default=void 0;var _react=_interopRequireWildcard(require("react"));var _reactIntl=require("react-intl");var _propTypes=_interopRequireDefault(require("prop-types"));var _icons=require("@buffetjs/icons");var _reactFontawesome=require("@fortawesome/react-fontawesome");var _pluginId=_interopRequireDefault(require("../../pluginId"));var _PreviewCarret=_interopRequireDefault(require("../PreviewCarret"));var _BannerWrapper=_interopRequireDefault(require("./BannerWrapper"));function _getRequireWildcardCache(nodeInterop){if(typeof WeakMap!=="function")return null;var cacheBabelInterop=new WeakMap();var cacheNodeInterop=new WeakMap();return(_getRequireWildcardCache=function(nodeInterop){return nodeInterop?cacheNodeInterop:cacheBabelInterop;})(nodeInterop);}function _interopRequireWildcard(obj,nodeInterop){if(!nodeInterop&&obj&&obj.__esModule){return obj;}if(obj===null||typeof obj!=="object"&&typeof obj!=="function"){return{default:obj};}var cache=_getRequireWildcardCache(nodeInterop);if(cache&&cache.has(obj)){return cache.get(obj);}var newObj={};var hasPropertyDescriptor=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var key in obj){if(key!=="default"&&Object.prototype.hasOwnProperty.call(obj,key)){var desc=hasPropertyDescriptor?Object.getOwnPropertyDescriptor(obj,key):null;if(desc&&(desc.get||desc.set)){Object.defineProperty(newObj,key,desc);}else{newObj[key]=obj[key];}}}newObj.default=obj;if(cache){cache.set(obj,newObj);}return newObj;}/* eslint-disable jsx-a11y/click-events-have-key-events */ /* eslint-disable jsx-a11y/no-static-element-interactions */const Banner=/*#__PURE__*/(0,_react.forwardRef)(({displayedValue,doesPreviousFieldContainErrorsAndIsOpen,hasErrors,hasMinError,isFirst,isReadOnly,isDragging,isOpen,onClickToggle,onClickRemove,style},refs)=>{const display=isDragging?'none':'';return/*#__PURE__*/_react.default.createElement(_BannerWrapper.default,{doesPreviousFieldContainErrorsAndIsOpen:doesPreviousFieldContainErrorsAndIsOpen,type:"button",hasMinError:hasMinError,hasErrors:hasErrors,isFirst:isFirst,isOpen:isOpen,isReadOnly:isReadOnly,onClick:onClickToggle,ref:refs?refs.dropRef:null,style:style},isDragging&&/*#__PURE__*/_react.default.createElement(_PreviewCarret.default,{isComponent:true}),/*#__PURE__*/_react.default.createElement(_react.default.Fragment,null,/*#__PURE__*/_react.default.createElement("div",{className:"img-wrapper",style:{display}},/*#__PURE__*/_react.default.createElement(_icons.Carret,null)),/*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage,{id:`${_pluginId.default}.containers.Edit.pluginHeader.title.new`},msg=>{// The displayed value may be "falsey" when the main field is a number or boolean
> return/*#__PURE__*/_react.default.createElement("div",{style:{display}},displayedValue??msg);}),/*#__PURE__*/_react.default.createElement("div",{className:"cta-wrapper",style:{display}},!isReadOnly&&/*#__PURE__*/_react.default.createElement(_react.default.Fragment,null,/*#__PURE__*/_react.default.createElement("div",{className:"trash-icon",style:{marginRight:10,padding:'0 5px'},onClick:e=>{e.preventDefault();e.stopPropagation();onClickRemove();}},/*#__PURE__*/_react.default.createElement(_reactFontawesome.FontAwesomeIcon,{icon:"trash-alt"})),/*#__PURE__*/_react.default.createElement("div",{className:"grab",ref:refs?refs.dragRef:null},/*#__PURE__*/_react.default.createElement(_icons.Grab,null))))));});Banner.defaultProps={displayedValue:null,doesPreviousFieldContainErrorsAndIsOpen:false,hasErrors:false,hasMinError:false,isDragging:false,isFirst:false,isOpen:false,onClickRemove:()=>{},onClickToggle:()=>{},style:{}};Banner.propTypes={displayedValue:_propTypes.default.oneOfType([_propTypes.default.string,_propTypes.default.number,_propTypes.default.object]),doesPreviousFieldContainErrorsAndIsOpen:_propTypes.default.bool,hasErrors:_propTypes.default.bool,hasMinError:_propTypes.default.bool,isDragging:_propTypes.default.bool,isFirst:_propTypes.default.bool,isOpen:_propTypes.default.bool,isReadOnly:_propTypes.default.bool.isRequired,onClickToggle:_propTypes.default.func,onClickRemove:_propTypes.default.func,style:_propTypes.default.object};Banner.displayName='Banner';var _default=Banner;exports.default=_default;
    at /Users/aurel/MyWORK/MyProjects/001.COURSES/TodoX/client/test-project-1/node_modules/strapi-admin/index.js:71:23
    at finalCallback (/Users/aurel/MyWORK/MyProjects/001.COURSES/TodoX/client/test-project-1/node_modules/webpack/lib/Compiler.js:257:39)
    at /Users/aurel/MyWORK/MyProjects/001.COURSES/TodoX/client/test-project-1/node_modules/webpack/lib/Compiler.js:273:13
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/aurel/MyWORK/MyProjects/001.COURSES/TodoX/client/test-project-1/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:24:1)
    at AsyncSeriesHook.lazyCompileHook (/Users/aurel/MyWORK/MyProjects/001.COURSES/TodoX/client/test-project-1/node_modules/tapable/lib/Hook.js:154:20)
    at onCompiled (/Users/aurel/MyWORK/MyProjects/001.COURSES/TodoX/client/test-project-1/node_modules/webpack/lib/Compiler.js:271:21)
    at /Users/aurel/MyWORK/MyProjects/001.COURSES/TodoX/client/test-project-1/node_modules/webpack/lib/Compiler.js:681:15
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/aurel/MyWORK/MyProjects/001.COURSES/TodoX/client/test-project-1/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1)
    at AsyncSeriesHook.lazyCompileHook (/Users/aurel/MyWORK/MyProjects/001.COURSES/TodoX/client/test-project-1/node_modules/tapable/lib/Hook.js:154:20)
    at /Users/aurel/MyWORK/MyProjects/001.COURSES/TodoX/client/test-project-1/node_modules/webpack/lib/Compiler.js:678:31
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/aurel/MyWORK/MyProjects/001.COURSES/TodoX/client/test-project-1/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:9:1)
    at AsyncSeriesHook.lazyCompileHook (/Users/aurel/MyWORK/MyProjects/001.COURSES/TodoX/client/test-project-1/node_modules/tapable/lib/Hook.js:154:20)
    at /Users/aurel/MyWORK/MyProjects/001.COURSES/TodoX/client/test-project-1/node_modules/webpack/lib/Compilation.js:1423:35
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/aurel/MyWORK/MyProjects/001.COURSES/TodoX/client/test-project-1/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:9:1)
    at AsyncSeriesHook.lazyCompileHook (/Users/aurel/MyWORK/MyProjects/001.COURSES/TodoX/client/test-project-1/node_modules/tapable/lib/Hook.js:154:20)
    at /Users/aurel/MyWORK/MyProjects/001.COURSES/TodoX/client/test-project-1/node_modules/webpack/lib/Compilation.js:1414:32
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! test-project-1@0.1.0 build: `strapi build "--no-optimization"`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the test-project-1@0.1.0 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/aurel/.npm/_logs/2021-06-08T14_16_39_151Z-debug.log

I also have the same issue.