gilbarbara / react-joyride

Create guided tours in your apps
https://react-joyride.com/
MIT License
6.88k stars 529 forks source link

How to properly import constants #430

Closed adnux closed 6 years ago

adnux commented 6 years ago

Expected behavior Import constants in es6 style to build custom callbacks. Run tests over the component to check it's working accordingly,

Actual behavior When running tests with CRA+Jest+Enzyme it throws a "SyntaxError: Unexpected token export"

Steps to reproduce the problem

  • Create a project with CRA
  • Import Joyride:
    import Joyride from 'react-joyride';
  • Import constans:
    import { ACTIONS, EVENTS } from 'react-joyride/es/constants';
  • Use enzyme to test the component with shallow or mount

React version "react": "^16.5.0"

React-Joyride version "react-joyride": "^2.0.0-14"

Browser name and version Chrome 68

Error stack (if available)


● Test suite failed to run
/home/andre/workspace/pj-paineltarefas-app-frontend-js_react/node_modules/react-joyride/es/constants.js:52
export { ACTIONS, EVENTS, LIFECYCLE, STATUS };
^^^^^^

SyntaxError: Unexpected token export

  at new Script (vm.js:51:7)
  at Object.<anonymous> (src/components/onboard/Onboard.jsx:10:373)

*If you want to get this issue fixed quickly, make sure to send a public URL or codesandbox example.*

I'm not sure how to import the constants and test it properly.
I did the exact same way as described in the [docs](https://github.com/gilbarbara/react-joyride/blob/master/docs/callback.md), but had no success to run the tests:

import { ACTIONS, EVENTS } from 'react-joyride/es/constants';


Running the app in development works just fine, so maybe the problem could be in Jest, but i decided to ask here as i run out of options to solve the problem with the given error.
gilbarbara commented 6 years ago

CRA/Babel is probably configured to ignore ES6 code from node_modules. Use /lib or update your Babel config.

JimiHFord commented 6 years ago

More specifically:

Instead of

import { ACTIONS, EVENTS } from 'react-joyride/es/constants';

Use

import { ACTIONS, EVENTS } from 'react-joyride/lib/constants';

Fixed the problem for me.

bigscratcher commented 5 years ago

I had the same problem with import { ACTIONS, EVENTS } from 'react-joyride/es/constants'; The problem was not to use the version react-joyride: ^1.11.4 but to install the newest 2.0.0-15 with yarn add react-joyride@next

dossier15 commented 5 years ago

More specifically:

Instead of

import { ACTIONS, EVENTS } from 'react-joyride/es/constants';

Use

import { ACTIONS, EVENTS } from 'react-joyride/lib/constants';

Fixed the problem for me.

Works for me. Thanks.