how does webpack import from external url

Question

I am using webpack to manage my react application. Now I want to import a dependency from this url:

<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=gNO2wKVBNupZfafi0bl0sW3dIKqAHn4l">

traditionally I just put above code on my index.html file. But now how can I let webpack to load this url? And how my react js use that dependency?

when I launch webpack-dev-server, I will get below error:

ERROR in Entry module not found: Error: Cannot resolve module 'http://api.map.baidu.com/api'

Then I use little loader to load the url. Below is the javascript code to use loader:

import $ from 'jquery'
import React from 'react';
import ReactDOM from 'react-dom';
import load from 'little-loader';

import './main.css';
import './component';
import Search from './search/search'

load('http://api.map.baidu.com/api?v=2.0&ak=gNO2wKVBNupZfafi0bl0sW3dIKqAHn4l', function(err){
    console.log('err:', err);
});

// document.body.appendChild(component());


ReactDOM.render(<Search />, document.getElementById('search'));

but I still got below error when launch webpack:

ERROR in Entry module not found: Error: Cannot resolve module 'http://api.map.baidu.com/api' in /Users/yzzhao/dev/react-demo/webpack_demo

score 16 · Accepted Answer · edited Jul 05 '21 at 00:56

16

In the future you should be able to use dynamic requires via System.import. Webpack 2 will support them natively.

System.import('<url>')
  .then(function() {
    console.log('Loaded!');
  });

If you don't want to wait for it, you could use a script loading library.

Example:

Install:

npm install little-loader --save

Use:

import load from 'little-loader';

load('<url>', (err) => {

})

Or do it manually

function load(url) {
  return new Promise((resolve, reject) => {
    var script = document.createElement('script')
    script.type = 'text/javascript';
    script.async = true;
    script.src = url;
    script.onload = resolve;
    script.onerror = reject;
    document.head.appendChild(script);
  })
}

load('<url>')
  .then(() => {
    console.log('Loaded!');
  })
  .catch((err) => {
    console.error('Something went wrong!', err);
  })

edited Jul 05 '21 at 00:56

TheBotlyNoob

369
5
16

answered Apr 08 '16 at 14:00

HaNdTriX

28,732
11
78
85

Thanks for reply. I followed the little-loader solution but is still not working. I have updated my post to give the code I used. Could you please take a look and let me know whether I am using a correct way? – Joey Yi Zhao Apr 11 '16 at 02:11
Did you try renaming `load` to `_load`? Maybe the keyword `load` is somehow reserved in your code. – HaNdTriX Apr 11 '16 at 07:57
I checked that when I am importing this dependency I got below error from the browser: It isn't possible to write into a document from an asynchronously-loaded external script unless it is explicitly opened. How can I allow the browser to load it from an asynchronously? – Joey Yi Zhao Apr 11 '16 at 08:29
Just try to use this URL instead: http://api.map.baidu.com/getscript?v=2.0&ak=gNO2wKVBNupZfafi0bl0sW3dIKqAHn4l&services=&t=20160401164342 – HaNdTriX Apr 11 '16 at 09:32
I'm still struggling to get something closer to the fetch API or RequireJS API where the callback functions contain the instance – nickford May 08 '17 at 20:08
I followed the manual solution. Sure I have found and used this before as well. Love a full manual solution instead of installing new libraries constantly. +1. – Sprose Sep 11 '18 at 12:40

how does webpack import from external url

1 Answers1

Linked