React: Load Global JavaScript Library with Webpack

When using React and Dynamic Web TWAIN to create a web document scanning app, I was confused about how to load dynamsoft.webtwain.min.js, a global JavaScript library like jQuery, into my project. I spent some time searching Google for relevant questions, but it was hard to find useful answers. Then I got started to learn webpack from scratch, and finally figured out how to make it work. In this article, I will share not only the solutions but also the issues I met.

Three Ways to Import Global JavaScript Libraries into React Project

Comparing to Angular, loading global JavaScript library is more tricky in React.

Insert JS link into HTML script element

Webpack is just a module bundler that packs all modules with dependencies into one bundle, which is still a JavaScript file. Therefore, we can use JavaScript code to insert JS link into HTML script element dynamically for global access. According to the React component lifecycle, we can write the code in method componentDidMount():

componentDidMount() {
var script = document.createElement('script');
script.src = "http://www.dynamsoft.com/library/dwt/dynamsoft.webtwain.min.js";
document.getElementsByTagName('head')[0].appendChild(script);
}

This approach is not suitable for loading a local JavaScript library file.

Manually export module

To load a module in JavaScript, we can use require(). Let’s try this:

var Dynamsoft = require(‘dwt’);

When running your app, you can open the developer console to check the variable.

Why ‘Uncaught ReferenceError’? The reason is dynamsoft.webtwain.min.js is a global JavaScript library, not a module. Webpack regards any JavaScript file as a module. Open bundle.js, we can see webpack wraps every module with an anonymous function. Only exported modules are accessible.

To make the code work, we can add ‘module.exports = Dynamsoft’ to the bottom of node_modules\dwt\dist\dynamsoft.webtwain.min.js, and then rebuild the React project.

The variable ‘Dynamsoft’ makes sense now.

Configure webpack.config.js

The above approach which changes the original JavaScript library is apparently not good. The best way is to load the library into the global context. Let’s see what we can do with a webpack.config.js file.

Webpack provides loaders for preprocessing various files — transform them to JavaScript. Here we choose script-loader, which executes JS script once in the global context.

Install script-loader:

npm install script-loader --save

According to webpack docs, we can use script-loader as follows:

require('script-loader!../node_modules/dwt/dist/dynamsoft.webtwain.min..js');

However, I got the error message “Do not use import syntax to configure webpack loaders import/no-webpack-loader-syntax” in my React project:

How to solve this issue? I tried another way.

Add a new rule to webpack.config.js:

{
test: /\.js$/,
include: path.join(paths.appNodeModules, 'dwt'),
loader: 'script-loader'
},

Because script-loader only preprocesses dynamsoft.webtwain.min.js, we need to define its searching path.

To use the library in your code, just require() the package name:

require(‘dwt’);

Now we can access variables of dynamsoft.webtwain.min.js globally.