Let me clear the context first. I have bought an admin panel template from themeforest and stuck on implementing that with requirejs. The seller does not provide support for implementation.
The theme requires the following JS file, in order to run:
https://altair_html.tzdthemes.com/assets/js/common.js
I have created a fiddle, where I have included the file and defined that with requirejs. But a function (moment) is not being defined. I dont know where I am doing wrong.
Check the fiddle here:
requirejs.config({
paths: {
'common': 'https://altair_html.tzdthemes.com/assets/js/common'
}
});
require(['common'], function (common) {
console.log(moment);
});
http://jsfiddle.net/tareksiddiki/q5kumwvg/
But the moment function loads when we load the external javascript (https://altair_html.tzdthemes.com/assets/js/common.js) within the <script> tag in old school way.
Related
I'm trying to implement Esri ArcGIS JS in Lightning Web Component. While using ArcGIS JS, the sample code uses require function to load modules. In order to do that I'm trying to use require.js. I downloaded it from here (Require.js). And then uploaded to my sandbox as static resource. I'm trying to use that static resource in my Lightning Web Component. I also added the script tag for the ArcGIS Javascript API in my Experience Cloud site's header as
<script src="https://js.arcgis.com/4.24"></script>
Lightning Web Component:
import { LightningElement, track } from 'lwc';
import { loadScript } from 'lightning/platformResourceLoader';
import requireJS from '#salesforce/resourceUrl/requireJS';
export default class TestMap extends LightningElement {
renderedCallback() {
loadScript(this, requireJS).then(() => {
console.log('requireJS loaded');
require([
"esri/geometry/Extent"
], (
Extent
) => {
var initExtent = new Extent({
xmin: -15884312,
ymin: 1634835,
xmax: -6278767,
ymax: 7505198,
spatialReference: 102100
});
});
}).catch(exception => {
console.log(exception);
});
}
}
My problem right now, eventhough I can see in the Network tab that the require.js is loaded from static resource, require function cannot be found.
Exception message catched
I'm not sure where is the issue since this is how I loaded my all javascript files before.
I was expecting to see the the require function is working after the require.js script loaded from Static Resource.
This one is a bit tricky, I will try to guide you as much as I can.
First, don't put the script tag in your website header. This is a last chance solution, we'll keep it if nothing else work.
Second, requireJS is not compatible with LWC (or Locker Service to be precise). So you can forget it. loadScript is in someways similar.
Now the solution, usually I download the whole from a CDN and host it as a static resource. Then you can load it via loadScript and use it as per the documentation.
In case the library is really small, it could be created as a LWC and then be imported but usually libraries are too heavy regarding Salesforce limit.
Looking at the library, it seems that they do not provide any compiled full version (which is probably huge). In this case I would recommend to make a custom build locally containing only the necessary pieces of code and then uploading as a static resource. Unfortunately I can't help on this part as I still didn't do it myself yet.
Feel free to comment and I will improve my answer is it's unclear.
The material-ui "build:es2015" script is building commonjs scripts, not ES2015.
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
etc.
I'm trying to find a way to build an AMD-friendly version of material-ui similar to https://reactjs.org/docs/installation.html#using-a-cdn.
With ES2015 I should be able to compile with typescript into an AMD bundle. The source files look very close to typescript files, but changing the extension to TSX isn't enough...they're not actually typescript files (what are they?).
Also, I tried the "build:umd:dev" doesn't produce anything so nice as https://unpkg.com/react#16.2.0/umd/react.development.js, and they seem incompatible with requirejs.
What are the necessary steps to building a true umd version of material-ui?
Background:
Yes, I know traditional react development process uses webpack but I'm trying to produce a light-weight, CDN-dependent proof-of-concept app that runs from rawgit. I have the react and react-dom parts working but not the material-ui.
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.5/require.min.js"></script>
<style>
#import url('app.css');
</style>
</head>
<body>
<app/>
<script>
requirejs.config({
// module name mapped to CDN url
paths: {
'react': 'https://unpkg.com/react#16.2.0/umd/react.production.min',
'react-dom': 'https://unpkg.com/react-dom#16.2.0/umd/react-dom.production.min',
'openlayers': 'https://cdnjs.cloudflare.com/ajax/libs/ol3/4.5.0/ol',
},
deps: ['built/index'],
callback: () => require(["index"], go => console.log("app", go()))
});
</script>
</body>
</html>
A UMD build is published for every release.
For example: https://unpkg.com/material-ui#1.0.0-beta.24/umd/
Note: with version 4, the UMD output will be renamed as MaterialUI (previously material-ui). See this pull-request for more information.
Well, I like TypeScript Namespaces for prototyping to and had already created separate UMD distribution with typing for global object extension
Check source code and example app here.
namespace app {
const {
Button,
} = material.core;
const App = () => <Button>Hello, world!</Button>
...
Also I wrote some tools which help you make your app npm-independent includes router, snack provider, state manager, JSON template form generator, fetch provider, date and time pickers.
Amazing project. English translation will be applied soon so a star will be appreciated
I'm fairly new to web development and I was wondering if there was a way to route a static web page with its own stylesheets and javascripts, using vue-router.
Let's say I have a directory called staticWebPage that contains:
an index.html file
a javascripts directory containing .js files
and a stylesheets directory containing .css files
Now, I'd like to map /mystaticwebpage to this index.html file so it displays that particular static web page.
I'd like to do something like this:
import VueRouter from 'vue-router'
import AComponent from './components/AComponent.vue'
import MyHtmlFile from './references/index.html'
router.map({
'/acomponent': {
component: AComponent
},
'mystaticwebpage': {
component: MyHtmlFile
}
})
Of course, this doesn't work as I can only reference Vue components in router.map.
Is there a way to route to that ./staticWebPage/index.html file using all the .js and .css file contained in the /staticWebPage directory?
So for your case you can do something that uses Webpack’s code-splitting feature.
More precisely, what you want is probably async components. So the code (and the css) used in the component definition (including any script you included there) will be loaded only when the corresponding page is accessed.
In large applications, we may need to divide the app into smaller
chunks and only load a component from the server when it’s actually
needed. To make that easier, Vue allows you to define your component
as a factory function that asynchronously resolves your component
definition. Vue will only trigger the factory function when the
component actually needs to be rendered and will cache the result for
future re-renders.
It can be a bit challenging to setup, so please refer to the dedicated guide in the VueJS doc.
I'm using Sails js and I want to use a nodejs module.
I also use React js.
I want to use react-bootstrap-datetimepicker in my javascript script.
react-bootstrap-datetimepicker
I installed my module with npm install react-bootstrap-datetimepicker
I tried in config/boostrap.js to add this line var DateTimeField = require('react-bootstrap-datetimepicker');, but DateTimeField isn't recognised in my js script.
Uncaught ReferenceError: DateTimeField is not defined
I also tried to add this line directly in my script, but I have this error:
ReferenceError: Can't find variable: require
And also this one in my script: import DateTimeField from "react-bootstrap-datetimepicker";
I have all these errors in the navigator console.
EDIT 1:
I understand what you said, thank you for your answer.
BUT, for example with react-bootstrap, I can use:
var Input = ReactBootstrap.Input;
var ButtonInput = ReactBootstrap.ButtonInput;
There is exactly the same architecture with react-bootstrap-datetimepicker, so I maybe I can do the same?
var DateTimePicker = ... . DateTimePicker
I tried to include like you said, but it doesn't recognise DateTimePicker.
Here is the doc:
Installation :
npm install react-bootstrap-datetimepicker
Then
javascript
var DateTimeField = require('react-bootstrap-datetimepicker');
render: function() {
return <DateTimeField />;
}
See (examples/) for more details.
And in examples/, the line is:
import DateTimeField from "react-bootstrap-datetimepicker";
Ok, first you have to understand the division of server side and client side javascript, even thought you are using the same language, and you can share libraries, bare in mind, that for client side js you need to supply the user browser with the libraries and scripts it needs, so those have to be in the html you serve the user. When you require any module in sails bootstrap or similar, you are loading the script into the server memory, not serving it to the users browser, that means you can use in the server code, but not in client code.
For you use case, you have to download the library code, and put it in your assets/js folder and if you have the script tags in the layout, sails will automatically inject it there for you, but if not or you are using other template engine like jade, just manually add it.
example:
<html>
....
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/<react-version>/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/<react-version>/react-dom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-bootstrap/<version>/react-bootstrap.min.js">
<script src='/js/react-bootstrap-datetimepicker.min.js'></script>
// The other js files that depend on datetimepicker go here
</html>
Now just to be clear, require is a node.js function, node.js is not the same as javascript, its a piece of software with its own functions, thats why you are getting an error related to it when trying to use it in the browser, there is no require method there, so you can't use it, at least not directly. You can use browserify to sort of emulate the node workflow, where you have a node_modules folder and use require on those, browserify will bundle (search for the modules and merge them) and give you a javascript file that you can then link in your html code. That is more setup work, and unless you really need it, because you have a lot of files, i think is not worth the effort.. lets say for just one file using require.
So i think you were misguided by that github repo, because it says npm-install. Just ignore it (unless you use browsefify like i said) and download the link i gave you above ( the .min.js).
So to sumarize, you issue have nothing to do with sails, just link the library in the html you provide to the user, like any other client side script.
Ok, I already know that you should configure paths with RequireJS like this
require.config({
paths: {
name: 'value'
}
});
And call it like this.
require(['name'], function() {
/* loaded */
});
But the thing is, I'm working in environment in which I don't have access to the existing call to require.config(...). For those who care, the environment is Azure Mobile Services scheduled job. Microsoft has already included RequireJS in the environment and configured the paths. My question is two-fold.
1. How do I add paths to the existing require.config()?
I know calling require.config() again will destroy the existing configuration. Which is what I do not want to do.
2. How do I get to know which paths have already been configured?
I really wouldn't like to overwrite any existing path name or overwrite any existing library by accident.
Running require.config() again does not override your original config file. It actually extends it and adds your new paths to it. Right now I am using it this way, where configfile is also a require.config({})
<script data-main="configfile" src="require.js"></script>
<script>
require.config({
paths: {
prefix-name: 'path/to/file'
}
});
</script>
One way to avoid name collisions with Azure Mobile paths would be to simply prefix all your custom paths.
Disclaimer: I have never used Azure Mobile, just RequireJs. You may have to implement it a little differently but it is possible.