loading script in react components which is in same folder

user_7687995 0
Viewed 164

This might be simple question but I couldn't figure out how to load the external script which is in the same folder using relative path. Below is the src folder snapshot.

enter image description here

Here I am trying to import draggable.js inside the DesignScreen.js components. Here the defined components.

import React from 'react'
import './decorate.css'

const DesignsScreen = () => {
  React.useEffect(() => {
    const LoadExternalScript = () => {
      const externalScript = document.createElement('script')
      // externalScript.onerror = loadError;
      externalScript.id = 'external'
      externalScript.async = true
      externalScript.type = 'text/javascript'
      externalScript.setAttribute('crossorigin', 'anonymous')
      document.body.appendChild(externalScript)
      externalScript.src = './draggable.js'
    }
    LoadExternalScript()
  }, [])
  return (
    <>
      <div
        id='draggable'
        draggable='true'
        style={{ backgroundPosition: '0px 0px' }}
      ></div>
    </>
  )
}

export default DesignsScreen

I want to load draggable.js without using full path like this: externalScript.src = './draggable.js'. I have googled it for the solution without success. So, I turned up here looking for answer.

reactjs
3 Answers

If you make your project with CRA, you could just add your external script to public/index.html.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
    <!--
      manifest.json provides metadata used when your web app is installed on a
      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
    -->
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    <!--
      Notice the use of %PUBLIC_URL% in the tags above.
      It will be replaced with the URL of the `public` folder during the build.
      Only files inside the `public` folder can be referenced from the HTML.
      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
      work correctly both with client-side routing and a non-root public URL.
      Learn how to configure a non-root public URL by running `npm run build`.
    -->
    <-- Add your script here -->
    <title>React App</title>
  </head>
user_84370990

externalScript.src = '/src/screens/draggable.js' once try this in our project we are importing script files like this.

user_145548710

Remember that if you are working with external scripts, then the ./ in your externalScript.src is the public directory. After you build your React app there won't be a src folder anymore, just the public folder.

src/screens/ProductBase/DesignsScreen.js file:

let externalScript = document.createElement('script');
externalScript.src = './draggable.js';
externalScript.async = true;
document.body.appendChild(externalScript);

public/draggable.js file:

window.addEventListener('load', () => console.log("Hello World!"));

I tested this sample code and it works. When the browser loads the page the console logs "Hello World!".

user_77942060
Related