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