how to load this js file in requirejs?
<script type="module" src="https://unpkg.com/#google/model-viewer/dist/model-viewer.min.js"></script>
my requirejs-config.js file=?
var config = {
paths: {
modelviewer: "Ajith_CustomModule/js/modelviewer.min",
.....
.....
.....
and load this file in my phtml file
<script type="module">
require(['jquery'.......,'modelviewer'],function($,..,model){
});
</script>
.....
.....
.....
shows this error =>
Uncaught SyntaxError: Unexpected token 'export'
anybody please help me to fix this problem.
Thanks in advance
RequireJS does not support native JS modules. You have to load it as regular JS module, working example:
<script type="module">
import { ModelViewerElement } from 'https://unpkg.com/#google/model-viewer/dist/model-viewer.min.js';
console.log(ModelViewerElement);
</script>
(tested on Chrome 96)
Related
I am a beginner with JavaScript. Even though I am directly running the examples on the readme, it doesn't work for me.
Here is a simple case where I try to get the number of my (user's) repositories.
I have the following html file (sans the api token) -
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.6/require.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<script type="module">
import { request } from "https://cdn.pika.dev/#octokit/request";
</script>
<script>
const octokitRequest = require('#octokit/request');
myAsyncMethod()
async function myAsyncMethod () {
const result = await request("GET /users/:user/repos", {
headers: {
authorization: "token <your token>"
},
user: "armsp"
});
console.log(`${result.data.length} repos found.`);
}
</script>
</body>
ERROR
require.min.js:1 Uncaught Error: Module name "#octokit/request" has not been loaded yet for context: _. Use require([])
https://requirejs.org/docs/errors.html#notloaded
at makeError (require.min.js:1)
at Object.s [as require] (require.min.js:1)
at requirejs (require.min.js:1)
at github-api-test.html:11
github-api-test.html:1 Uncaught SyntaxError: The requested module '/universal-user-agent/^4.0.0/es2019/universal-user-agent.js' does not provide an export named 'default'
Then I tried to download the js file itself and include it in script tag the usual way, but I don't see any request.js file in src folder, all are .ts files. I don't know how to make sense of it.
Any help would be appreciated.
After talking with the authors of the library, it seems like it was an issue with a bad release. It has been fixed with version 5.3.1. The following example works now -
<script type="module">
import { request } from "https://cdn.pika.dev/#octokit/request";
myAsyncMethod();
async function myAsyncMethod() {
const result = await request("GET /");
console.log(result.data);
}
</script>
Live Demo here.
here is my files struct:
ex/js/prpr.js
ex/test-requirejs.html
test-requirejs.html
<script>
requirejs.config({baseUrl: "js"})
require(["prpr.js"], function () {
var uri = new Uri("http://baidu.com")
})
</script>
when i google-chrome /home/roroco/Dropbox/jss/ro-js/ex/test-requirejs.html I get error
file:///home/roroco/Dropbox/jss/ro-js/ex/prpr.js Failed to load resource: net::ERR_FILE_NOT_FOUND
Uncaught Error: Script error for "prpr.js"
http://requirejs.org/docs/errors.html#scripterror
at makeError (require.js:168)
at HTMLScriptElement.onScriptError (require.js:1735)
my requirejs version is 2.3.2
how to make requirejs.config work?
update
even I use
require.js
requirejs.config({baseUrl: "js/"})
require(["prpr.js"])
and tag:
<script src="./require.js" data-main="./main.js"/>
I get same error
However I don't know your file structure But from your question I am assuming that it is like this
Project Folder
test-requirejs.html
main.js
require.js
js
prpr.js
If this is your folder structure
then in test-requirejs.html, script tag should be
<script data-main="main" src="require.js"></script>
Your main.js
require.config({
"baseUrl": "js"
})
require(["prpr"],function(){
});
I have tested this by my own and its working
I've just started to learn about RequireJs but am unable to load a js dependency using it's custom shortened name. I don't understand what I'm doing wrong here, I try to load the knockout js library using only "knockout" but it throws an error
Error: Script error for "knockout"
http://requirejs.org/docs/errors.html#scripterror
if I use "knockout-3.4.0" it works fine but I'd prefer to use the shortened
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" data-main="js/init.js" src="js/require.js"></script>
</head>
<body>
<h1 data-bind="text: TabIndx">Hello World</h1>
<script>
require(['knockout', 'viewModel'], function(ko, viewModel) {
var vm = new viewModel();
ko.applyBindings(vm);
});
</script>
</body>
</html>
require.config({
baseUrl: 'js',
paths: {
knockout: 'knockout-3.4.0',
viewModel: 'viewModel'
}
});
I suspect this is because RequireJS hasn't fully loaded itself and its custom configuration before you're requesting local paths. What you should really be doing if you're using RequireJS is having a module responsible for creating the view model and applying the bindings like in your example.
// app.js
define(['knockout', 'viewModel'], function (ko, viewModel) {
var vm = new viewModel();
ko.applyBindings(vm);
});
require.config({
baseUrl: './js/',
paths: {
knockout: 'knockout-3.4.0',
viewModel: 'viewModel',
app: 'app'
}
});
I'm not sure how init.js looks, but here I have made it a little module responsible for launching the app.js file.
define(['app'], function (app) {
app.init();
});
Your config should ideally be refactored into its own file, where require-config.js just contains your config snippet, like so: -
<script type="text/javascript" data-main="js/init.js" src="js/require.js"></script>
<script type="text/javascript" src="js/require-config.js"></script>
I am serving my index.html from nodejs server. This ng2 file works fine with the live-server. but when I load it from nodejs index.js with specific routes it gives the following error.
Uncaught SyntaxError: Unexpected token <
VM105:17Uncaught ReferenceError: System is not defined
I have loaded the files right. Here are the loaded files:
<script src="https://cdnjs.cloudflare.com/ajax/libs/es6-shim/0.33.3/es6-shim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.16/system-polyfills.js"></script>
<script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="node_modules/rxjs/bundles/Rx.min.js"></script>
<script src="node_modules/angular2/bundles/angular2.min.js"></script>
<script src="node_modules/angular2/bundles/router.js"></script>
<script src="node_modules/angular2/bundles/http.js"></script>
<!-- 2. Configure SystemJS and Import -->
<script>
System.config({
packages: {
client: {
format: 'register',
defaultExtension: 'js'
}
}
});
System.import('client/boot')
.then(null, console.error.bind(console));
</script>
What am I missing? All the files are served from the node server.
Most of time when you have the error Uncaught SyntaxError: Unexpected token <, this means that there a 404 error on the file referenced within a script element.
I think that you Node serve doesn't make available your node_modules folder. So the node_modules/systemjs/dist/system.src.js file can't be loaded (it's also true for other files in node_modules).
Just started my ReactJS and stuck at my very first try. I have a very basic code that throws "Uncaught SyntaxError: Unexpected token <".
index.html
<!doctype html>
<head>
<title>My first ReactJs</title>
</head>
<body>
<div id="container"></div>
<script src="react.js"></script>
<script src="script.jsx"></script>
</body>
</html>
script.jsx
var MessageButton = React.createClass({
render: function(){
return (
<button>Hello World</button>
);
}
});
React.render(<MessageButton/>, document.getElementById("container"));
Assuming that it could be missing JSX transformer library, I searched for it but couldn't find download anywhere. I work offline most of the time, so I do not wish to use plunkr or jsbin. Could do with some help.
First: Specify the type attribute of your JSX scripts so the browser doesn't try to execute them as JavaScript.
<script type="text/jsx" src="script.jsx"></script>
Second:
Either:
Load the JSXTransformer script (which requires an older version of React)
or
Compile the JSX using Babel:
Example taken from the docs:
babel --presets react src --watch --out-dir build