CODEWITHSUNDEEP
reactjsnpmbrowserifybabeljsbabelify
Ajit Goel
Ajit Goel

Reputation: 4418

Error when bundling javascript files into one

I am trying to bundle all my javascript files into one file using the command npm run build (which uses browserify, babelify internally). I am getting the following error. What am I missing?

npm output:

[email protected] bundle-js C:\wamp64\www\wordpress\wp-content\plugins\wpshout-react-quiz browserify FacebookAlbums.js -o bundle.js

SyntaxError: C:/wamp64/www/wordpress/wp-content/plugins/wpshout-react-quiz/FacebookAlbums.js: Unexpected token (25:6)
  23 |
  24 |     return (
> 25 |       <div>
     |       ^
  26 |         <button type="button" onClick={() => this.setState({ isOpen: true })}>
  27 |           Open Lightbox
  28 |         </button>
    at Parser.pp$5.raise (C:\wamp64\www\wordpress\wp-content\plugins\wpshout-react-quiz\node_modules\babylon\lib\index.js:4454:13)
    at Parser.pp.unexpected (C:\wamp64\www\wordpress\wp-content\plugins\wpshout-react-quiz\node_modules\babylon\lib\index.js:1761:8)
    at Parser.pp$3.parseExprAtom (C:\wamp64\www\wordpress\wp-content\plugins\wpshout-react-quiz\node_modules\babylon\lib\index.js:3750:12)
    at Parser.pp$3.parseExprSubscripts (C:\wamp64\www\wordpress\wp-content\plugins\wpshout-react-quiz\node_modules\babylon\lib\index.js:3494:19)
    at Parser.pp$3.parseMaybeUnary (C:\wamp64\www\wordpress\wp-content\plugins\wpshout-react-quiz\node_modules\babylon\lib\index.js:3474:19)
    at Parser.pp$3.parseExprOps (C:\wamp64\www\wordpress\wp-content\plugins\wpshout-react-quiz\node_modules\babylon\lib\index.js:3404:19)
    at Parser.pp$3.parseMaybeConditional (C:\wamp64\www\wordpress\wp-content\plugins\wpshout-react-quiz\node_modules\babylon\lib\index.js:3381:19)
    at Parser.pp$3.parseMaybeAssign (C:\wamp64\www\wordpress\wp-content\plugins\wpshout-react-quiz\node_modules\babylon\lib\index.js:3344:19)
    at Parser.pp$3.parseParenAndDistinguishExpression (C:\wamp64\www\wordpress\wp-content\plugins\wpshout-react-quiz\node_modules\babylon\lib\index.js:3828:26)
    at Parser.pp$3.parseExprAtom (C:\wamp64\www\wordpress\wp-content\plugins\wpshout-react-quiz\node_modules\babylon\lib\index.js:3709:19)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] bundle-js: `browserify FacebookAlbums.js -o bundle.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] bundle-js 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!     C:\Users\AjitGoel\AppData\Roaming\npm-cache\_logs\2018-03-05T01_26_56_790Z-debug.log
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] build: `npm run bundle-js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

package.json:

{
  "name": "wpshout-react-quiz",
  "version": "1.0.0",
  "description": "",
  "main": "FacebookAlbums.js",
  "dependencies": {
    "babel-core": "^6.26.0",
    "babelify": "^8.0.0",
    "concat": "^1.0.3",
    "npm-run-all": "^4.1.2",
    "onchange": "^3.3.0",
    "react": "^16.2.0",
    "react-dom": "^16.2.0",
    "react-image-lightbox": "^4.5.0",
    "react-slick": "^0.19.0",
    "uglify": "^0.1.5",
    "watch": "^1.0.2"
  },
  "devDependencies": {},
  "scripts": {
    "bundle-js": "browserify FacebookAlbums.js -o bundle.js",
    "build": "npm run bundle-js"
  },
  "browserify": {
    "transform": [
      "babelify"
    ]
  },
  "author": "",
  "license": "ISC"
}

Upvotes: 1

Views: 707

Answers (1)

jmargolisvt
jmargolisvt

Reputation: 6088

From this issue:

Under the section titled Plugin Presets from http://babeljs.io/blog/2015/10/29/6.0.0

You probably want npm install --save-dev babel-preset-react

Then use it as part of your Babelify options https://github.com/babel/babelify#options

Upvotes: 0

Related Questions