We Keep Coding

How to import simple JS scripts "globally", using ES6 import or require?

I need to assimilate some code into a React app. Problem is, that the code i want to use comes from some example i found on the web, which uses "normal" tags to import various other scripts, via an HTML file.
The main script file that i want to use calls countless various functions from external scripts.(The script "assumes" those functions are available). This of course works in the browser, but not in a build system like Babel/Webpack.
To make things short: what would be the node/es6 equivalent of:
<script src="/dev/getHTMLMediaElement.js"></script>
And how do i make those functions available anywhere in the React app?
My React app is a fairly standard one, booted with react-create-app.

You can require or import this file directly after adding externals option in webpack config
Ref: https://webpack.js.org/configuration/externals/

Want to use jsoneditor in react app, But it gives me error

I am new to react. But I created a react app with react CLI and now I want to use jsoneditor in this app. The editor link I am showing here.
JSON Editor
as I import it in app like this import './plugins/jsoneditor/jsoneditor.js'; it throws me error
the same plugin work's without any dependency as I include in script tag.

You cannot load an external library which is not supported by React. The editor you want to use has no React compatible component class yet. So If you try to import the file like you import other components, you will get errors.
So for now you have to include the Library as script tag only to use. wait till there is an update from the developer or try another library.
Or take a look at React Json Editor if it serves your purpose.

You can load an external editor in react or any external JS file having Plain Javascript using React.Lazy() .
const MarkdownPreview = lazy(() => import('./MarkdownPreview.js'));
I had a similar issue while trying to Load ace JS editor on to my React app . It got resolved with this .

how to include external javascript in react

In an html page you can include a javascript file by <script src="path"></script>
How do you get variables from an external path like this in react, if the path is, for example:
<script src="https://unpkg.com/flux-sdk-helpers#0.1/dist/flux-sdk-helpers.min.js"></script>
Thanks for all your help

Scripts loaded in that fashion normally install themselves as global variables and/or properties of some other global library.
According to the docs, flux-sdk-helpers installs itself as a global variable FluxHelpers when you install it this way.
This means your React code can access it as either FluxHelpers or window.FluxHelpers.

you can link it in your index.html file just be careful about what you call things when you are doing it as to not re use names in different places

if you are using react, then you probably should also learn about webpack.
if you will use webpack, then you can import { method} from "package" most scripts you got from NPM (node package manager) very easily.

Meteor mantra external client script

When using Meteor 1.3 with Mantra spec, what are the 'right' way and place to load external client script, I mean some JS library which has to be included client-side, with <script>...</script> tag?

you can use npm or atmosphere for adding package or library. but if you want to add manualy using this meteor package kadira:dochead
use meteor add kadira:dochead
I created a addScript.js file inside client/configs with the following code:
import {DocHead} from 'meteor/kadira:dochead';
export default function () {
let addScript = 'https://link-to-your-script';
DocHead.loadScript(addScript);
}
And imported it in client/configs/context.js

Dynamic transpile and serve React application on expressjs

The usual process of deploying a react application is simple when using webpack to handle the code transpilation and the final result is one .js app which contains all the css/js/html. But I have an application which needs some data from client's request to express server.
For example I want to get a userid from the request, and based on that provide some data to App component and then, provide a .js file (like what webpack provides) that contains the App and user specific data.
I've tried, to user babel-core/register and react-dom/server.renderToString, but it just provides to html and css and not the js code that is necessary to make the app work. I have to load those codes separately!

This is quite common problem.
It is better to solve it a little different then you tried (you don't want to force your user to wait ~10s to build bundle for him)
There is one universal build bundle for all users (or few - for example one for normal users and second for admin users)
Your server gets request from your user with special parameters for example userid
Your server render start html page as response to this request - for example index.html. This file should have <script src to bundle js for your user. Source path should be dynamically build by server to point exact js bundle (if there are more then one). It should also have javascript global object with parameters from server which should be visible by your components.
For example index.html could look like (you could do it differently, maybe without creating global object. I hope that you get general sense of this idea). :
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="root"></div>
<script>
__CONFIG__ = {
someObject1: '<!-- #echo someObject1 -->',
someObject2: '<!-- #echo someObject2 -->',
userid: '<!-- #echo userid -->',
}
</script>
<script src="<!-- #echo SOME_PATH -->/static/bundle.js"></script>
</body>
</html>
Now your component could check global variable CONFIG .
But I suggest not to use it in your normal components!
Create bootstrap component which loads your normal react app and which is something like bridge between your app and environment.
Read global config in this bootstrap component and then pass it as props to your app.
This bootstrap component could look like:
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';
const config = window.__CONFIG__;
ReactDOM.render(
<App
config={config}
/>, document.getElementById('root'));
Edit:
This is also good way if you have to set initial state based on db or to tell react to do something.
For this I add additional global variable __INIT__