React-joyride: How to properly import constants

Created on 19 Sep 2018 · 4Comments · Source: gilbarbara/react-joyride

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, 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.

Source

adnux

Most helpful comment

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.

JimiHFord on 15 Oct 2018

👍3 👎1

All 4 comments

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

gilbarbara on 20 Sep 2018

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.

JimiHFord on 15 Oct 2018

👍3 👎1

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

bigscratcher on 29 Nov 2018

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.