correct way to include a library(and its dependent libraries) in wordpress development

I am trying to create a wordpress plugin using reactjs. I am facing an issue when I try to include a external library(react-image-lighbox) using wp_enqueue_script. what is the correct way to include a library(and its correct way to include a library(and its dependant libraries) in wordpress development libraries in wordpress development?

<?php
/*
Plugin Name: FaceBookAlbums
Description: React.JS FaceBook Albums in WordPress!
Author: Ajit Goel
Author URI: http://www.ajitgoel.net
*/
add_shortcode( ‘FaceBookAlbums’, ‘FaceBookAlbums_show_quiz’ );
function FaceBookAlbums_show_quiz() {
return ‘<div id=”root”></div>’;
}

add_action( ‘wp_enqueue_scripts’, ‘FaceBookAlbums_enqueue_scripts’ );
function FaceBookAlbums_enqueue_scripts() {
wp_enqueue_script(‘react’, plugin_dir_url(__FILE__).’node_modules/react/umd/react.production.min.js’);
wp_enqueue_script(‘react-dom’, plugin_dir_url(__FILE__).’node_modules/react-dom/umd/react-dom.production.min.js’);
wp_enqueue_script(‘react-image-lightbox’, plugin_dir_url(__FILE__).’node_modules/react-image-lightbox/dist/main.js’);

wp_enqueue_script(‘babel’, ‘https://npmcdn.com/babel-core@5.8.38/browser.min.js’, ”, null, false );
wp_enqueue_script(‘FaceBookAlbums’, plugin_dir_url( __FILE__ ) . ‘FaceBookAlbums.js’);
wp_enqueue_style(‘FaceBookAlbums’, plugin_dir_url( __FILE__ ) . ‘FaceBookAlbums.css’);
}

add_filter( ‘script_loader_tag’, ‘FaceBookAlbums_add_babel_type’, 10, 3 );
function FaceBookAlbums_add_babel_type( $tag, $handle, $src ) {
if ($handle !== ‘FaceBookAlbums’) {
return $tag;
}
return ‘<script src=”‘ . $src . ‘” type=”text/babel”></script>’ . “n”;
}

Stack Trace:

main.js?ver=4.9.4:1383 Uncaught ReferenceError: require is not defined
at Object.<anonymous> (main.js?ver=4.9.4:1383)
at __webpack_require__ (main.js?ver=4.9.4:40)
at Object.<anonymous> (main.js?ver=4.9.4:215)
at Object.<anonymous> (main.js?ver=4.9.4:1379)
at __webpack_require__ (main.js?ver=4.9.4:40)
at Object.<anonymous> (main.js?ver=4.9.4:127)
at __webpack_require__ (main.js?ver=4.9.4:40)
at main.js?ver=4.9.4:103
at main.js?ver=4.9.4:104
at main.js?ver=4.9.4:2

Read more here:: correct way to include a library(and its dependent libraries) in wordpress development

Leave a Reply

Your email address will not be published. Required fields are marked *