Strapi develop command failed

Questions and Answers
1

I am trying to set up the strapi. I managed to create app succesfully. But when I run the command yarn develop I get following errors

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");var _interopRequireWildcard=require("@babel/runtime/helpers/interopRequireWildcard");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"));/* 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 E:\Study\Freelancing\gm_website\GMStrapiPanel\node_modules\strapi-admin\index.js:71:23
    at finalCallback (E:\Study\Freelancing\gm_website\GMStrapiPanel\node_modules\webpack\lib\Compiler.js:257:39)
    at E:\Study\Freelancing\gm_website\GMStrapiPanel\node_modules\webpack\lib\Compiler.js:273:13
    at AsyncSeriesHook.eval [as callAsync] (eval at create (E:\Study\Freelancing\gm_website\GMStrapiPanel\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:24:1)
    at AsyncSeriesHook.lazyCompileHook (E:\Study\Freelancing\gm_website\GMStrapiPanel\node_modules\tapable\lib\Hook.js:154:20)
    at onCompiled (E:\Study\Freelancing\gm_website\GMStrapiPanel\node_modules\webpack\lib\Compiler.js:271:21)
    at E:\Study\Freelancing\gm_website\GMStrapiPanel\node_modules\webpack\lib\Compiler.js:681:15
    at AsyncSeriesHook.eval [as callAsync] (eval at create (E:\Study\Freelancing\gm_website\GMStrapiPanel\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:6:1)
    at AsyncSeriesHook.lazyCompileHook (E:\Study\Freelancing\gm_website\GMStrapiPanel\node_modules\tapable\lib\Hook.js:154:20)
    at E:\Study\Freelancing\gm_website\GMStrapiPanel\node_modules\webpack\lib\Compiler.js:678:31
    at AsyncSeriesHook.eval [as callAsync] (eval at create (E:\Study\Freelancing\gm_website\GMStrapiPanel\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:9:1)
    at AsyncSeriesHook.lazyCompileHook (E:\Study\Freelancing\gm_website\GMStrapiPanel\node_modules\tapable\lib\Hook.js:154:20)
    at E:\Study\Freelancing\gm_website\GMStrapiPanel\node_modules\webpack\lib\Compilation.js:1423:35
    at AsyncSeriesHook.eval [as callAsync] (eval at create (E:\Study\Freelancing\gm_website\GMStrapiPanel\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:9:1)
    at AsyncSeriesHook.lazyCompileHook (E:\Study\Freelancing\gm_website\GMStrapiPanel\node_modules\tapable\lib\Hook.js:154:20)
    at E:\Study\Freelancing\gm_website\GMStrapiPanel\node_modules\webpack\lib\Compilation.js:1414:32
    at AsyncSeriesHook.eval [as callAsync] (eval at create (E:\Study\Freelancing\gm_website\GMStrapiPanel\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:9:1)
    at AsyncSeriesHook.lazyCompileHook (E:\Study\Freelancing\gm_website\GMStrapiPanel\node_modules\tapable\lib\Hook.js:154:20)
    at E:\Study\Freelancing\gm_website\GMStrapiPanel\node_modules\webpack\lib\Compilation.js:1409:36
    at AsyncSeriesHook.eval [as callAsync] (eval at create (E:\Study\Freelancing\gm_website\GMStrapiPanel\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:9:1)
    at AsyncSeriesHook.lazyCompileHook (E:\Study\Freelancing\gm_website\GMStrapiPanel\node_modules\tapable\lib\Hook.js:154:20)
    at E:\Study\Freelancing\gm_website\GMStrapiPanel\node_modules\webpack\lib\Compilation.js:1405:32
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
2

What command did you use to install Strapi? and what OS are you using?

Try following closely the intro gide:

3

Can you try to delete the build and cache folders, and rebuild Admin again:
rm -rf .cache build
yarn build
yarn develop

What strapi version are you using?

4

Based on the logs, I believe the user is on Windows, so the rm command doesnā€™t exist in powershell AFAIK.

@muhammad_kamran can you give some environment information please?

5

Oh, indeed, just noticed windows paths in logs.

6

Hi, Iā€™m running into the same issue on Mac OS Big Sur :slight_smile:
This is just the default --quick-start template failing, Iā€™ve not changed anything.
Iā€™ve tried rm -rf .cache build to no avail.

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/gunnar/klifra/content-manager/node_modules/strapi-admin/index.js:71:23
    at finalCallback (/Users/gunnar/klifra/content-manager/node_modules/webpack/lib/Compiler.js:257:39)
    at /Users/gunnar/klifra/content-manager/node_modules/webpack/lib/Compiler.js:273:13
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/gunnar/klifra/content-manager/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:24:1)
    at AsyncSeriesHook.lazyCompileHook (/Users/gunnar/klifra/content-manager/node_modules/tapable/lib/Hook.js:154:20)
    at onCompiled (/Users/gunnar/klifra/content-manager/node_modules/webpack/lib/Compiler.js:271:21)
    at /Users/gunnar/klifra/content-manager/node_modules/webpack/lib/Compiler.js:681:15
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/gunnar/klifra/content-manager/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1)
    at AsyncSeriesHook.lazyCompileHook (/Users/gunnar/klifra/content-manager/node_modules/tapable/lib/Hook.js:154:20)
    at /Users/gunnar/klifra/content-manager/node_modules/webpack/lib/Compiler.js:678:31
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/gunnar/klifra/content-manager/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:9:1)
    at AsyncSeriesHook.lazyCompileHook (/Users/gunnar/klifra/content-manager/node_modules/tapable/lib/Hook.js:154:20)
    at /Users/gunnar/klifra/content-manager/node_modules/webpack/lib/Compilation.js:1423:35
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/gunnar/klifra/content-manager/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:9:1)
    at AsyncSeriesHook.lazyCompileHook (/Users/gunnar/klifra/content-manager/node_modules/tapable/lib/Hook.js:154:20)
    at /Users/gunnar/klifra/content-manager/node_modules/webpack/lib/Compilation.js:1414:32
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
7

Make sure you arenā€™t using yarn workspaces and try deleting the node_modules and either the package-lock.json or yarn.lock and reinstall the node modules/rebuild the admin

8

I am running Manjaro Linux and had the same issue.

Solved with this stack overflow thread:

elaborating on it:

  1. in your strapi folder, go to ā†’ node_modules/strapi-admin/webpack.config.js
  2. locate the line ā†’ require.resolve(ā€™@babel/preset-envā€™)
  3. replace it with [require.resolve(ā€™@babel/preset-envā€™),{ targets: ā€œdefaultsā€ }],
  4. run the command - npm run dev

your strapi app will work as normal.

1 Like
9

@jsfroes even I tried the same method in windowsā€¦ but itā€™s not working for meā€¦
In my webpack.config.js

presets: [
require.resolve(ā€™@babel/preset-envā€™),
require.resolve(ā€™@babel/preset-reactā€™)
],

this thing is presentā€¦ so if I try to replace it with the command u mentionedā€¦ I am getting Invalid or expected token errors.

10

I got the same error, and after a lot of trial and error i figured out it happens when strapi is nested within an existing Node project that also uses babel/webpack (in my case a Next.js project).

nextjs-project/strapi 
āÆ npm run build

> strapi@0.1.0 build
> strapi build

Building your admin UI with development configuration ...

āœ– Webpack
  Compiled with some errors in 8.49s

Error: ./.cache/plugins/strapi-plugin-content-manager/admin/src/components/RepeatableComponent/Banner.js 2:87
...

nextjs-project/strapi 
āÆ cd ..

nextjs-project  
āÆ mv strapi ../

nextjs-project 
āÆ cd ../strapi

Projects/badsyntax/strapi 
āÆ npm run build

> strapi@0.1.0 build
> strapi build

Building your admin UI with development configuration ...

āœ” Webpack
  Compiled successfully in 11.56s

@DMehaffy can you try replicate this issue by bootstrapping a next.js project then bootstrapping a strapi project nested within the nextjs project?

1 Like
11

I can try but ideally thatā€™s not really a structure we recommend. If you need to throw a frontend and backend into the same repo then we generally recommend a structure like we use in the foodadvisor demo for Strapi: GitHub - strapi/foodadvisor: šŸ„˜ THE Strapi demo application

Basically put your frontend and strapi in different folders

12

please check if the node version and npm version complies to the minimum requirement mentioned in strapi docs. check the current node version in the instance of command terminal you are using (node --version) if itā€™s below the required version, use nvm to use a latest LTS node version and try restarting strapi again.