react-slingshot: Unexpected token import in all specs

Node version: v7.8.0

npm version: 4.2.0

Operating system: ubuntu 16.04

Steps to reproduce: $ git clone https://github.com/coryhouse/react-slingshot.git $ npm run setup $ npm start -s $ NODE_ENV=development

All of the above commands work fine and produce an application on port 3000. However running the build for creating a distribution seem to fail on unexpected token import for all the unit test specs. $ npm run build

Executing npm run build fails on build. Here is the full log…

npm run build

react-slingshot@5.0.0 prebuild /home/sanjay/git/github/react-slingshot npm run clean-dist && npm run lint && npm run test

react-slingshot@5.0.0 clean-dist /home/sanjay/git/github/react-slingshot npm run remove-dist && mkdir dist

react-slingshot@5.0.0 remove-dist /home/sanjay/git/github/react-slingshot rimraf ./dist

react-slingshot@5.0.0 lint /home/sanjay/git/github/react-slingshot esw webpack.config.* src tools --color

✓ Clean (11:04:04 PM)

react-slingshot@5.0.0 test /home/sanjay/git/github/react-slingshot jest

FAIL src/components/FuelSavingsTextInput.spec.js ● Test suite failed to run

/home/sanjay/git/github/react-slingshot/src/components/FuelSavingsTextInput.spec.js:1
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import React from 'react';
                                                                                         ^^^^^^
SyntaxError: Unexpected token import
  
  at transformAndBuildScript (node_modules/jest-runtime/build/transform.js:320:12)
  at handle (node_modules/worker-farm/lib/child/index.js:41:8)
  at process.<anonymous> (node_modules/worker-farm/lib/child/index.js:47:3)
  at emitTwo (events.js:106:13)

FAIL src/components/FuelSavingsForm.spec.js ● Test suite failed to run

/home/sanjay/git/github/react-slingshot/src/components/FuelSavingsForm.spec.js:1
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import React from 'react';
                                                                                         ^^^^^^
SyntaxError: Unexpected token import
  
  at transformAndBuildScript (node_modules/jest-runtime/build/transform.js:320:12)
  at handle (node_modules/worker-farm/lib/child/index.js:41:8)
  at process.<anonymous> (node_modules/worker-farm/lib/child/index.js:47:3)
  at emitTwo (events.js:106:13)

FAIL src/containers/FuelSavingsPage.spec.js ● Test suite failed to run

/home/sanjay/git/github/react-slingshot/src/containers/FuelSavingsPage.spec.js:1
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import React from 'react';
                                                                                         ^^^^^^
SyntaxError: Unexpected token import
  
  at transformAndBuildScript (node_modules/jest-runtime/build/transform.js:320:12)
  at handle (node_modules/worker-farm/lib/child/index.js:41:8)
  at process.<anonymous> (node_modules/worker-farm/lib/child/index.js:47:3)
  at emitTwo (events.js:106:13)

FAIL src/components/FuelSavingsResults.spec.js ● Test suite failed to run

/home/sanjay/git/github/react-slingshot/src/components/FuelSavingsResults.spec.js:1
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import React from 'react';
                                                                                         ^^^^^^
SyntaxError: Unexpected token import
  
  at transformAndBuildScript (node_modules/jest-runtime/build/transform.js:320:12)
  at handle (node_modules/worker-farm/lib/child/index.js:41:8)
  at process.<anonymous> (node_modules/worker-farm/lib/child/index.js:47:3)
  at emitTwo (events.js:106:13)

FAIL src/utils/fuelSavingsCalculator.spec.js ● Test suite failed to run

/home/sanjay/git/github/react-slingshot/src/utils/fuelSavingsCalculator.spec.js:1
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import calculator from './fuelSavingsCalculator';
                                                                                         ^^^^^^
SyntaxError: Unexpected token import
  
  at transformAndBuildScript (node_modules/jest-runtime/build/transform.js:320:12)
  at handle (node_modules/worker-farm/lib/child/index.js:41:8)
  at process.<anonymous> (node_modules/worker-farm/lib/child/index.js:47:3)
  at emitTwo (events.js:106:13)

FAIL src/components/AboutPage.spec.js ● Test suite failed to run

/home/sanjay/git/github/react-slingshot/src/components/AboutPage.spec.js:1
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import React from 'react';
                                                                                         ^^^^^^
SyntaxError: Unexpected token import
  
  at transformAndBuildScript (node_modules/jest-runtime/build/transform.js:320:12)
  at handle (node_modules/worker-farm/lib/child/index.js:41:8)
  at process.<anonymous> (node_modules/worker-farm/lib/child/index.js:47:3)
  at emitTwo (events.js:106:13)

FAIL src/utils/dateHelper.spec.js ● Test suite failed to run

/home/sanjay/git/github/react-slingshot/src/utils/dateHelper.spec.js:1
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import { getFormattedDateTime } from './dateHelper';
                                                                                         ^^^^^^
SyntaxError: Unexpected token import
  
  at transformAndBuildScript (node_modules/jest-runtime/build/transform.js:320:12)
  at handle (node_modules/worker-farm/lib/child/index.js:41:8)
  at process.<anonymous> (node_modules/worker-farm/lib/child/index.js:47:3)
  at emitTwo (events.js:106:13)

FAIL src/utils/numberFormatter.spec.js ● Test suite failed to run

/home/sanjay/git/github/react-slingshot/src/utils/numberFormatter.spec.js:1
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import NumberFormatter from './numberFormatter';
                                                                                         ^^^^^^
SyntaxError: Unexpected token import
  
  at transformAndBuildScript (node_modules/jest-runtime/build/transform.js:320:12)
  at handle (node_modules/worker-farm/lib/child/index.js:41:8)
  at process.<anonymous> (node_modules/worker-farm/lib/child/index.js:47:3)
  at emitTwo (events.js:106:13)

FAIL src/reducers/fuelSavingsReducer.spec.js ● Test suite failed to run

/home/sanjay/git/github/react-slingshot/src/reducers/fuelSavingsReducer.spec.js:1
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import * as ActionTypes from '../constants/actionTypes';
                                                                                         ^^^^^^
SyntaxError: Unexpected token import
  
  at transformAndBuildScript (node_modules/jest-runtime/build/transform.js:320:12)
  at handle (node_modules/worker-farm/lib/child/index.js:41:8)
  at process.<anonymous> (node_modules/worker-farm/lib/child/index.js:47:3)
  at emitTwo (events.js:106:13)

FAIL src/actions/fuelSavingsActions.spec.js ● Test suite failed to run

/home/sanjay/git/github/react-slingshot/src/actions/fuelSavingsActions.spec.js:1
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import * as ActionTypes from '../constants/actionTypes';
                                                                                         ^^^^^^
SyntaxError: Unexpected token import
  
  at transformAndBuildScript (node_modules/jest-runtime/build/transform.js:320:12)
  at handle (node_modules/worker-farm/lib/child/index.js:41:8)
  at process.<anonymous> (node_modules/worker-farm/lib/child/index.js:47:3)
  at emitTwo (events.js:106:13)

FAIL src/store/store.spec.js ● Test suite failed to run

/home/sanjay/git/github/react-slingshot/src/store/store.spec.js:1
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import * as ActionTypes from '../constants/actionTypes';
                                                                                         ^^^^^^
SyntaxError: Unexpected token import
  
  at transformAndBuildScript (node_modules/jest-runtime/build/transform.js:320:12)
  at handle (node_modules/worker-farm/lib/child/index.js:41:8)
  at process.<anonymous> (node_modules/worker-farm/lib/child/index.js:47:3)
  at emitTwo (events.js:106:13)

FAIL src/utils/mathHelper.spec.js ● Test suite failed to run

/home/sanjay/git/github/react-slingshot/src/utils/mathHelper.spec.js:1
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import MathHelper from './mathHelper';
                                                                                         ^^^^^^
SyntaxError: Unexpected token import
  
  at transformAndBuildScript (node_modules/jest-runtime/build/transform.js:320:12)
  at handle (node_modules/worker-farm/lib/child/index.js:41:8)
  at process.<anonymous> (node_modules/worker-farm/lib/child/index.js:47:3)
  at emitTwo (events.js:106:13)

Test Suites: 12 failed, 12 total Tests: 0 total Snapshots: 0 total Time: 1.889s Ran all test suites.

npm ERR! Linux 4.4.0-70-generic npm ERR! argv “/usr/local/bin/node” “/usr/local/bin/npm” “run” “test” npm ERR! node v7.8.0 npm ERR! npm v4.2.0 npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! react-slingshot@5.0.0 test: jest npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the react-slingshot@5.0.0 test script ‘jest’. npm ERR! Make sure you have the latest version of node.js and npm installed. npm ERR! If you do, this is most likely a problem with the react-slingshot package, npm ERR! not with npm itself. npm ERR! Tell the author that this fails on your system: npm ERR! jest npm ERR! You can get information on how to open an issue for this project with: npm ERR! npm bugs react-slingshot npm ERR! Or if that isn’t available, you can get their info via: npm ERR! npm owner ls react-slingshot npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request: npm ERR! /home/sanjay/.npm/_logs/2017-04-01T03_04_07_640Z-debug.log

npm ERR! Linux 4.4.0-70-generic npm ERR! argv “/usr/local/bin/node” “/usr/local/bin/npm” “run” “build” npm ERR! node v7.8.0 npm ERR! npm v4.2.0 npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! react-slingshot@5.0.0 prebuild: npm run clean-dist && npm run lint && npm run test npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the react-slingshot@5.0.0 prebuild script ‘npm run clean-dist && npm run lint && npm run test’. npm ERR! Make sure you have the latest version of node.js and npm installed. npm ERR! If you do, this is most likely a problem with the react-slingshot package, npm ERR! not with npm itself. npm ERR! Tell the author that this fails on your system: npm ERR! npm run clean-dist && npm run lint && npm run test npm ERR! You can get information on how to open an issue for this project with: npm ERR! npm bugs react-slingshot npm ERR! Or if that isn’t available, you can get their info via: npm ERR! npm owner ls react-slingshot npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request: npm ERR! /home/sanjay/.npm/_logs/2017-04-01T03_04_07_657Z-debug.log

About this issue

Original URL
State: closed
Created 7 years ago
Comments: 20 (3 by maintainers)

Most upvoted comments

@sunvar, I have Ubuntu 16.10 on my work machine and react-slingshot runs fine for all npm scripts. Your errors appear to be complaining about import statements which lead me to believe you’re having issues with babel.

I’ll ask the obvious first. Have you run yarn or npm install?
Please have a look at the FAQ
If you’re still stuck, can you provide a repo that I can clone?

Thanks, Nick

nickytonline on Apr 1, 2017

We figured it out last night. To resolve, we did npm install --save-dev babel-preset-es2015 and changed the babel development presets to "presets": ["env", "es2015", "react-hmre"]. We tried with other developers and it was about 50/50 whether it worked for them or not. I’m wondering if this is a change that now needs to be made to slingshot. We got down to making sure we had the same NODE_ENV, node versions, wiping all globally installed packages, changing our bash profiles, but it always worked for me and never worked (until we added the babel preset and changed the babel config) for the other developer. With this added, everyone was up to 100%. Hopefully, anyone that runs into this in the future can resolve it in a similar fashion.

Thanks again for the great starting point. 😃

bigjollygiant14 on Jul 21, 2017

@nickytonline Correct, that seems to be the second issue I have been having. But looks like that’s the solution I should look at instead of disabling the hmr in the babelrc for generating the distribution. Thank you.

ghost on Apr 4, 2017