How to import a script for my project ? ReactJS

Question

I'm a project and that project have a "bootstrap" own, and i would want to import it for my render.

I created an archive HTML with the scripts:

<html>
    <head>
        <script> //1.www.s81c.com/common/v18/css/www.css</script>
        <script> //1.www.s81c.com/common/stats/ida_stats.js</script>
        <script> //1.www.s81c.com/common/v18/js/www.js</script>
    </head>
</html>

and imported in my App.js:

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
***import './V18.html'***;


class App extends Component {
  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h1 class="nameOfClassImported" className="App-title">BEM VINDX</h1>
        </header>
          To get started, edit <code>src/App.js</code> and save to reload.
      </div>
    );
  }
}

export default App;

but given that error:

> Failed to compile.
./src/V18.html
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
| <html>
|     <head>
|         <script> //1.www.s81c.com/common/v18/css/www.css</script>

Resume: I want to import scripts for i to use in my App.js

Lucas Kellner · Accepted Answer · 2018-04-09 21:34:03Z

1

I think the tag for the .css file should be <link>.

There are multiple ways to import external scripts. One way that does work is to move these scripts to the <head> of your public/index.html.

/// public/index.html ///
<html>
  <head>
    <script src="//1.www.s81c.com/common/stats/ida_stats.js"></script>
    <link href="//1.www.s81c.com/common/v18/css/www.css" rel="stylesheet">
    <script src="//1.www.s81c.com/common/v18/js/www.js"></script>
/// rest of public/index.html ///

Those scripts will be downloaded when your page loads and you can access the variables in those scripts on the window object. After linking to these from your public/index.html, restart your React app, then open the console with F12 or Command-Option-i and type window into the console. There you will see all the global functions that are available from within your React app including window.IBMCore, window.Modernizr, etc

edited Apr 9, 2018 at 21:34

answered Apr 8, 2018 at 4:09

Lucas Kellner

4413 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Jota Over a year ago

THANKS BROTHER, I LOVE YOU <3

Lucas Kellner Over a year ago

Did this fix your issue? If it did, making it the accepted answer would make my day :)

iceveda06 · Accepted Answer · 2018-04-08 03:38:20Z

0

Have you tried this?

<script type='text/javascript' src='..//1.www.s81c.com/common/stats/ida_stats.js'></script>

and for following can you try a regular <link /> instead of <script>

answered Apr 8, 2018 at 3:38

iceveda06

6198 silver badges21 bronze badges

2 Comments

Jota Over a year ago

Thank you for to answer but the problem continue.. :(

iceveda06 Over a year ago

is it same error? Can you show me what you put down for script and link tags?

Revansiddh · Accepted Answer · 2018-04-08 07:37:20Z

import those in index.html path is public.index.html. Because your app put in one of div of same html page.

<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>

Read this how webpack work.

https://webpack.js.org/configuration/externals/

else other way is save file and import at App.js

import './App.scss';

Collectives™ on Stack Overflow

How to import a script for my project ? ReactJS

3 Answers 3

2 Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related