1

I have a react application, managed using react-scripts.

In my app i am using an external js script. The external script doesn't do any module exports.

The structure of the external script is as below (too big to include it in full).

var TradingView = {.... various functions }

At the end of the file:

if (window.TradingView && jQuery) {
    jQuery.extend(window.TradingView, TradingView)
} else {
    window.TradingView = TradingView
}

My goal is to create a simple react component using the external script, and call the function: TradingView.widget({...});

I have been searching online for ways to include an external script in a react component/ES6 style, and have tried various options: react-async-script-loader, and various webpack plugins: script-loader, imports-loader, ProvidePlugin etc. But i haven't been able to make it work.

The error i am getting after using the imports-loader or ProvidePlugin is:

1189:31    error    'jQuery' is not defined                        no-undef
1190:9     error    'jQuery' is not defined                        no-undef

In my webpack config, i have:

In the loaders section:

{
    test: /tv\.exec\.js/,
    loader: 'imports?jQuery=jquery,$=jquery,this=>window'
}

In the plugins section:

new webpack.ProvidePlugin({
    $: "jquery",
    jQuery: "jquery"
})

When i create a simple webpage (no react), and include the script, and call TradingView.widget(), the page just works fine.

The closest i could get help was to look at: Managing jQuery plugin dependency in webpack

But it didn't work for me. I am quite new to the react, webpack ecosystem, so I am not sure what i am missing here.

Please let me know if you need any additional info.

Update: I tested the above, including the script in a simple react component, but not using the react-scripts this time, and directly using webpack configurations. I was simply able to import the external js in my component directly, and it worked. I was also able to use imports-loader plugin in webpack to expose jQuery, which also worked. So its possible that using react-scripts needs something else to make it work.

Community
  • 1
  • 1
Mavendew
  • 131
  • 1
  • 12

1 Answers1

1

It looks like your external script is handling its "exports" by adding them as members of window. You can use the import keyword on a file that doesn't define exports like so:

  import "modulename";

There's nothing special about that syntax except that it doesn't imply that any functions or variables will be made available via the import facility. The code in "modulename" that assigns members to .window will execute, which is the important thing.

For compiler complaints about accessing window.* globals, try assigning the variable you want to access to a local variable:

const jquery = window.jquery;

...or maybe...

const TradingView = window.TradingView;

Then you'll have the variable in scope, and it should be usable.

Erik Hermansen
  • 2,200
  • 3
  • 21
  • 41
  • I tried as suggested, but still i get the same error. – Mavendew May 16 '17 at 18:25
  • Can you check with debugger or console.log(window.variable) that the variable you want to use (jquery or TradingView) is getting assigned as a member of window after the import? If it is, then you should really just be able to assign that value to a local-scoped variable and use it. – Erik Hermansen May 16 '17 at 18:34
  • No, it wasn't getting assigned as a member of window. But anyways, i figured out some way to bypass the issue. I updated the question with the new information. – Mavendew May 18 '17 at 14:49