React-joyride: Not working with webpack / babel-runtime

Created on 3 Aug 2016  路  5Comments  路  Source: gilbarbara/react-joyride

When I try to import it with either import Joyride from 'react-joyride' or the require way, webpack will error on a lot of different modules:

ERROR in ./~/react-joyride/lib/scripts/Joyride.js
Module not found: Error: Cannot resolve module 'babel-runtime/helpers/extends' in /projects/tutorial/node_modules/react-joyride/lib/scripts
 @ ./~/react-joyride/lib/scripts/Joyride.js 1:110-150

ERROR in ./~/react-joyride/lib/scripts/Joyride.js
Module not found: Error: Cannot resolve module 'babel-runtime/core-js/json/stringify' in /projects/tutorial/node_modules/react-joyride/lib/scripts
 @ ./~/react-joyride/lib/scripts/Joyride.js 1:214-261

ERROR in ./~/react-joyride/lib/scripts/Joyride.js
Module not found: Error: Cannot resolve module 'babel-runtime/core-js/object/keys' in /projects/tutorial/node_modules/react-joyride/lib/scripts
 @ ./~/react-joyride/lib/scripts/Joyride.js 1:323-367

ERROR in ./~/react-joyride/lib/scripts/Joyride.js
Module not found: Error: Cannot resolve module 'babel-runtime/core-js/object/get-prototype-of' in /projects/tutorial/node_modules/react-joyride/lib/scripts
 @ ./~/react-joyride/lib/scripts/Joyride.js 1:429-485

ERROR in ./~/react-joyride/lib/scripts/Joyride.js
Module not found: Error: Cannot resolve module 'babel-runtime/helpers/classCallCheck' in /projects/tutorial/node_modules/react-joyride/lib/scripts
 @ ./~/react-joyride/lib/scripts/Joyride.js 1:568-615

ERROR in ./~/react-joyride/lib/scripts/Joyride.js
Module not found: Error: Cannot resolve module 'babel-runtime/helpers/createClass' in /projects/tutorial/node_modules/react-joyride/lib/scripts
 @ ./~/react-joyride/lib/scripts/Joyride.js 1:696-740

ERROR in ./~/react-joyride/lib/scripts/Joyride.js
Module not found: Error: Cannot resolve module 'babel-runtime/helpers/possibleConstructorReturn' in /projects/tutorial/node_modules/react-joyride/lib/scripts
 @ ./~/react-joyride/lib/scripts/Joyride.js 1:829-887

ERROR in ./~/react-joyride/lib/scripts/Joyride.js
Module not found: Error: Cannot resolve module 'babel-runtime/helpers/inherits' in /projects/tutorial/node_modules/react-joyride/lib/scripts
 @ ./~/react-joyride/lib/scripts/Joyride.js 1:987-1028

ERROR in ./~/react-joyride/lib/scripts/Beacon.js
Module not found: Error: Cannot resolve module 'ba is:open bel-runtime/core-js/object/get-prototype-of' in /projects/tutorial/node_modules/react-joyride/lib/scripts
 @ ./~/react-joyride/lib/scripts/Beacon.js 1:116-172

ERROR in ./~/react-joyride/lib/scripts/Beacon.js
Module not found: Error: Cannot resolve module 'babel-runtime/helpers/classCallCheck' in /projects/tutorial/node_modules/react-joyride/lib/scripts
 @ ./~/react-joyride/lib/scripts/Beacon.js 1:255-302

ERROR in ./~/react-joyride/lib/scripts/Beacon.js
Module not found: Error: Cannot resolve module 'babel-runtime/helpers/createClass' in /projects/tutorial/node_modules/react-joyride/lib/scripts
 @ ./~/react-joyride/lib/scripts/Beacon.js 1:383-427

ERROR in ./~/react-joyride/lib/scripts/Beacon.js
Module not found: Error: Cannot resolve module 'babel-runtime/helpers/possibleConstructorReturn' in /projects/tutorial/node_modules/react-joyride/lib/scripts
 @ ./~/react-joyride/lib/scripts/Beacon.js 1:516-574

ERROR in ./~/react-joyride/lib/scripts/Beacon.js
Module not found: Error: Cannot resolve module 'babel-runtime/helpers/inherits' in /projects/tutorial/node_modules/react-joyride/lib/scripts
 @ ./~/react-joyride/lib/scripts/Beacon.js 1:674-715

ERROR in ./~/react-joyride/lib/scripts/Tooltip.js
Module not found: Error: Cannot resolve module 'babel-runtime/helpers/extends' in /projects/tutorial/node_modules/react-joyride/lib/scripts
 @ ./~/react-joyride/lib/scripts/Tooltip.js 1:110-150

ERROR in ./~/react-joyride/lib/scripts/Tooltip.js
Module not found: Error: Cannot resolve module 'babel-runtime/core-js/object/get-prototype-of' in /projects/tutorial/node_modules/react-joyride/lib/scripts
 @ ./~/react-joyride/lib/scripts/Tooltip.js 1:219-275

ERROR in ./~/react-joyride/lib/scripts/Tooltip.js
Module not found: Error: Cannot resolve module 'babel-runtime/helpers/classCallCheck' in /projects/tutorial/node_modules/react-joyride/lib/scripts
 @ ./~/react-joyride/lib/scripts/Tooltip.js 1:358-405

ERROR in ./~/react-joyride/lib/scripts/Tooltip.js
Module not found: Error: Cannot resolve module 'babel-runtime/helpers/createClass' in /projects/tutorial/node_modules/react-joyride/lib/scripts
 @ ./~/react-joyride/lib/scripts/Tooltip.js 1:486-530

ERROR in ./~/react-joyride/lib/scripts/Tooltip.js
Module not found: Error: Cannot resolve module 'babel-runtime/helpers/possibleConstructorReturn' in /projects/tutorial/node_modules/react-joyride/lib/scripts
 @ ./~/react-joyride/lib/scripts/Tooltip.js 1:619-677

ERROR in ./~/react-joyride/lib/scripts/Tooltip.js
Module not found: Error: Cannot resolve module 'babel-runtime/helpers/inherits' in /projects/tutorial/node_modules/react-joyride/lib/scripts
 @ ./~/react-joyride/lib/scripts/Tooltip.js 1:777-818

It seems to be related to babel-runtime.

I've not had this issue with any other npm package before.

Most helpful comment

Sorry about that.
I removed the babel-plugin-transform-runtime dependency.
Please try 1.4.8

All 5 comments

same issue here using .babelrc :

{
 "presets": [ "react", "es2015" ],
}

interestingly the issue only happens during our deploy step whereas locally it compiles fine.

I'm seeing the similar problem as soon as I add this line:
var Joyride = require('react-joyride');

Error: Cannot find module 'babel-runtime/helpers/classCallCheck' from 'node_modules\react-joyride\lib\scripts']
Error: Cannot find module 'babel-runtime/helpers/possibleConstructorReturn' from 'node_modules\react-joyride\lib\scripts'
..........

I use gulp to bundle js files:

var config = {
port:9005,
devBaseUrl: 'http://localhost',
paths:{
html:'./src/_.html',
js: './src/_*/.js',
dist:'./dist',
mainJs: './src/main.js'
}
}
gulp.task('js',function(){
browserify(config.paths.mainJs)
.transform(reactify)
.bundle()
.on('error',console.error.bind(console))
.pipe(source('bundle.js'))
.pipe(gulp.dest(config.paths.dist+'/scripts'))
.pipe(connect.reload());
});

Using these versions:
"react-dom": "^15.3.0",
"react-joyride": "^1.4.7",

This happens when building the app using gulp. I did remove all packages and reinstalled them with no luck.
Anyone knows how to fix it?

Appreciate. Thanks!

I had this problem too, and solved it by adding babel-runtime module.
I think they could put a warning about this in the documentation.

Sorry about that.
I removed the babel-plugin-transform-runtime dependency.
Please try 1.4.8

@gilbarbara thanks.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

rlajous picture rlajous  路  3Comments

sarates picture sarates  路  6Comments

pokonski picture pokonski  路  3Comments

leantide picture leantide  路  5Comments

burtonator picture burtonator  路  5Comments