npm package error not resolving error occured due to babel

31 Views Asked by At

ERROR in ./node_modules/folder-structure-display/index.js Module build failed (from ./node_modules/babel-loader/lib/index.js): SyntaxError: D:\Visual Studio\react js\protfolio\node_modules\folder-structure-display\index.js: Support for the experimental syntax 'jsx' isn't currently enabled (4:5):

2 | 3 | const Folder = ({ name, children, iconcolor }) => (

4 | <div style={{ marginLeft: '25px' }}> | ^ 5 | <svg xmlns="http://www.w3.org/2000/svg" style={{ display: "inline-flex" }} viewBox="0 0 50 50" width="20px" height="20px"><path d="M 5 4 C 3.3544268 4 2 5.3555411 2 7 L 2 16 L 2 26 L 2 43 C 2 44.644459 3.3544268 46 5 46 L 45 46 C 46.645063 46 48 44.645063 48 43 L 48 26 L 48 16 L 48 11 C 48 9.3549372 46.645063 8 45 8 L 18 8 C 18.08657 8 17.96899 8.000364 17.724609 7.71875 C 17.480227 7.437136 17.179419 6.9699412 16.865234 6.46875 C 16.55105 5.9675588 16.221777 5.4327899 15.806641 4.9628906 C 15.391504 4.4929914 14.818754 4 14 4 L 5 4 z M 5 6 L 14 6 C 13.93925 6 14.06114 6.00701 14.308594 6.2871094 C 14.556051 6.5672101 14.857231 7.0324412 15.169922 7.53125 C 15.482613 8.0300588 15.806429 8.562864 16.212891 9.03125 C 16.619352 9.499636 17.178927 10 18 10 L 45 10 C 45.562937 10 46 10.437063 46 11 L 46 13.1875 C 45.685108 13.07394 45.351843 13 45 13 L 5 13 C 4.6481575 13 4.3148915 13.07394 4 13.1875 L 4 7 C 4 6.4364589 4.4355732 6 5 6 z M 5 15 L 45 15 C 45.56503 15 46 15.43497 46 16 L 46 26 L 46 43 C 46 43.562937 45.562937 44 45 44 L 5 44 C 4.4355732 44 4 43.563541 4 43 L 4 26 L 4 16 C 4 15.43497 4.4349698 15 5 15 z" fill={${iconcolor ? iconcolor : 'currentcolor'}} /><span style={{ paddingLeft: 5 }}>{name} 6 | {children && ( 7 | <div style={{ marginLeft: '5px' }}>

Add @babel/preset-react (https://github.com/babel/babel/tree/main/packages/babel-preset-react) to the 'presets' section of your Babel config to enable transformation. If you want to leave it as-is, add @babel/plugin-syntax-jsx (https://github.com/babel/babel/tree/main/packages/babel-plugin-syntax-jsx) to the 'plugins' section to enable parsing. at instantiate (D:\Visual Studio\react js\protfolio\node_modules@babel\parser\lib\index.js:60:32) at constructor (D:\Visual Studio\react js\protfolio\node_modules@babel\parser\lib\index.js:355:12) at Parser.raise (D:\Visual Studio\react js\protfolio\node_modules@babel\parser\lib\index.js:3204:19) at Parser.expectOnePlugin (D:\Visual Studio\react js\protfolio\node_modules@babel\parser\lib\index.js:3250:18) at Parser.parseExprAtom (D:\Visual Studio\react js\protfolio\node_modules@babel\parser\lib\index.js:11196:18) at Parser.parseExprSubscripts (D:\Visual Studio\react js\protfolio\node_modules@babel\parser\lib\index.js:10841:23) at Parser.parseUpdate (D:\Visual Studio\react js\protfolio\node_modules@babel\parser\lib\index.js:10824:21) at Parser.parseMaybeUnary (D:\Visual Studio\react js\protfolio\node_modules@babel\parser\lib\index.js:10800:23) at Parser.parseMaybeUnaryOrPrivate (D:\Visual Studio\react js\protfolio\node_modules@babel\parser\lib\index.js:10638:61) at Parser.parseExprOps (D:\Visual Studio\react js\protfolio\node_modules@babel\parser\lib\index.js:10643:23) at Parser.parseMaybeConditional (D:\Visual Studio\react js\protfolio\node_modules@babel\parser\lib\index.js:10620:23) at Parser.parseMaybeAssign (D:\Visual Studio\react js\protfolio\node_modules@babel\parser\lib\index.js:10581:21) at D:\Visual Studio\react js\protfolio\node_modules@babel\parser\lib\index.js:10551:39 at Parser.allowInAnd (D:\Visual Studio\react js\protfolio\node_modules@babel\parser\lib\index.js:12231:12) at Parser.parseMaybeAssignAllowIn (D:\Visual Studio\react js\protfolio\node_modules@babel\parser\lib\index.js:10551:17) at Parser.parseParenAndDistinguishExpression (D:\Visual Studio\react js\protfolio\node_modules@babel\parser\lib\index.js:11464:28) at Parser.parseExprAtom (D:\Visual Studio\react js\protfolio\node_modules@babel\parser\lib\index.js:11115:23) at Parser.parseExprSubscripts (D:\Visual Studio\react js\protfolio\node_modules@babel\parser\lib\index.js:10841:23) at Parser.parseUpdate (D:\Visual Studio\react js\protfolio\node_modules@babel\parser\lib\index.js:10824:21) at Parser.parseMaybeUnary (D:\Visual Studio\react js\protfolio\node_modules@babel\parser\lib\index.js:10800:23) at Parser.parseMaybeUnaryOrPrivate (D:\Visual Studio\react js\protfolio\node_modules@babel\parser\lib\index.js:10638:61) at Parser.parseExprOps (D:\Visual Studio\react js\protfolio\node_modules@babel\parser\lib\index.js:10643:23) at Parser.parseMaybeConditional (D:\Visual Studio\react js\protfolio\node_modules@babel\parser\lib\index.js:10620:23) at Parser.parseMaybeAssign (D:\Visual Studio\react js\protfolio\node_modules@babel\parser\lib\index.js:10581:21) at Parser.parseFunctionBody (D:\Visual Studio\react js\protfolio\node_modules@babel\parser\lib\index.js:11891:24) at Parser.parseArrowExpression (D:\Visual Studio\react js\protfolio\node_modules@babel\parser\lib\index.js:11873:10) at Parser.parseParenAndDistinguishExpression (D:\Visual Studio\react js\protfolio\node_modules@babel\parser\lib\index.js:11476:12) at Parser.parseExprAtom (D:\Visual Studio\react js\protfolio\node_modules@babel\parser\lib\index.js:11115:23) at Parser.parseExprSubscripts (D:\Visual Studio\react js\protfolio\node_modules@babel\parser\lib\index.js:10841:23) at Parser.parseUpdate (D:\Visual Studio\react js\protfolio\node_modules@babel\parser\lib\index.js:10824:21) at Parser.parseMaybeUnary (D:\Visual Studio\react js\protfolio\node_modules@babel\parser\lib\index.js:10800:23) at Parser.parseMaybeUnaryOrPrivate (D:\Visual Studio\react js\protfolio\node_modules@babel\parser\lib\index.js:10638:61) at Parser.parseExprOps (D:\Visual Studio\react js\protfolio\node_modules@babel\parser\lib\index.js:10643:23) at Parser.parseMaybeConditional (D:\Visual Studio\react js\protfolio\node_modules@babel\parser\lib\index.js:10620:23) at Parser.parseMaybeAssign (D:\Visual Studio\react js\protfolio\node_modules@babel\parser\lib\index.js:10581:21) at D:\Visual Studio\react js\protfolio\node_modules@babel\parser\lib\index.js:10551:39 at Parser.allowInAnd (D:\Visual Studio\react js\protfolio\node_modules@babel\parser\lib\index.js:12226:16) at Parser.parseMaybeAssignAllowIn (D:\Visual Studio\react js\protfolio\node_modules@babel\parser\lib\index.js:10551:17) at Parser.parseVar (D:\Visual Studio\react js\protfolio\node_modules@babel\parser\lib\index.js:13206:91) at Parser.parseVarStatement (D:\Visual Studio\react js\protfolio\node_modules@babel\parser\lib\index.js:13047:10) at Parser.parseStatementContent (D:\Visual Studio\react js\protfolio\node_modules@babel\parser\lib\index.js:12630:23) at Parser.parseStatementLike (D:\Visual Studio\react js\protfolio\node_modules@babel\parser\lib\index.js:12535:17) at Parser.parseModuleItem (D:\Visual Studio\react js\protfolio\node_modules@babel\parser\lib\index.js:12512:17) at Parser.parseBlockOrModuleBlockBody (D:\Visual Studio\react js\protfolio\node_modules@babel\parser\lib\index.js:13136:36) at Parser.parseBlockBody (D:\Visual Studio\react js\protfolio\node_modules@babel\parser\lib\index.js:13129:10) at Parser.parseProgram (D:\Visual Studio\react js\protfolio\node_modules@babel\parser\lib\index.js:12411:10) at Parser.parseTopLevel (D:\Visual Studio\react js\protfolio\node_modules@babel\parser\lib\index.js:12401:25) at Parser.parse (D:\Visual Studio\react js\protfolio\node_modules@babel\parser\lib\index.js:14297:10) at parse (D:\Visual Studio\react js\protfolio\node_modules@babel\parser\lib\index.js:14317:26) at parser (D:\Visual Studio\react js\protfolio\node_modules@babel\core\lib\parser\index.js:41:34)

I try many thing use chatgpt still facing these error actually i am creating a npm package and while installing in my real app its not working and showing these error

0

There are 0 best solutions below