I would like to put formulas in my webpage, which uses (dotnet Kestrel). I do not want to load javascript libraries from the net, so I am using webpack and npm for my packages.
My problem is, that I find it impossible to load MathJax. I have tried the following:
import 'mathjax-full';
require('mathjax-full'); // << not the error itself
import MathJax from 'mathjax-full';
The most annoying error that I get is this:
ReferenceError: require is not defined
I must do something obviously wrong. The error message comes from the MathJax internals. I have also tried to import requirejs, as some forums mentioned that as some kind of "workaround". The error I get with it is when I run WebPack:
ERROR in ./node_modules/requirejs/bin/r.js 1:0
Module parse failed: Unexpected character '#' (1:0)
Has anybody succeeded with MathJax on WebPack?
I've encountered the same problems as you plus a million more. MathJax is really not WebPack-friendly.
My solution for Angular:
npm install --save mathjax
Extend the "scripts" array of angular.json with:
"node_modules/mathjax/es5/tex-mml-chtml.js"
And now to call MathJax APIs, DO NOT use import of any kind. The mathjax module sets its main to es5/node-main.js, which uses an ugly hack to call require() at runtime, which is the ultimate source of trouble you saw.
Instead, do this:
declare var MathJax;
Now you may complain that this way you have no type information. Well, the fact is that not even mathjax-full has good type information for methods inside this global object: they inject the methods (such as MathJax.typeset()) at runtime and their types are declared using [name: string]: any;.
If your really want type information, you're probably better off declaring it yourself, e.g.:
declare interface MathJaxGlobal {
typeset(elems: HTMLElement[]);
}
declare var MathJax: MathJaxGlobal;
Related
I am unsure whether I am supposed to use the require version or the import version.
It doesn't state that in the documentation and I found a statement in a Github issue that
Mixing import and require is definitely discouraged. The only way for Rollup to handle require statements is with rollup-plugin-commonjs, but that plugin will skip any files with import or export statements.
which could be interpreted as: "You need to still use require otherwise the common-js plugin will ignore your file and things will not work." or as "always use import everything else would constitute mixing". So that really confused me.
Context
I am trying to import a CommonJS library (Citation-js) into a javascript module (really typescript but I hope this is not relevant here). Now the documentation of common-js tells me to do
const Cite = require('common-js');
which tells me that it is a commonjs library (right?). Therefore I added
import commonjs from "rollup-plugin-commonjs";
import { nodeResolve } from "#rollup/plugin-node-resolve";
to my rollup config and put plugins: [commonjs(), typescript(), nodeResolve()] into the configuration.
Now vscode stops underlining everything and building the website with rollup works again. But the compiled javascript simply states require('common-js') and my browser complains that require is undefined.
Uncaught ReferenceError: require is not defined
So I tried
import Cite from 'common-js';
instead. But that resulted in the rollup build failing with
[!] Error: Unexpected token (Note that you need #rollup/plugin-json to import JSON files)
node_modules/#citation-js/core/package.json (2:8)
1: {
2: "name": "#citation-js/core",
^
Now I could of course install that plugin. But I am not sure that is right, since the whole point of a tool like rollup should be that dependencies of dependencies should be resolved automatically right?
I have also tried
Can't import npm modules in commonjs with rollup : "require is not defined"
This seemed like it would fix my problem: Using Older Require Module With Rollup
But:
the rollup-plugin-node-builtins is apparently not maintained (npm protested with security vulnerabilities and I found this: https://github.com/rollup/rollup/issues/2881). EDIT: There is a new package rollup-plugin-polyfill-node replacing that I guess.
resolve is no longer a member of #rollup/plugin-node-resolve so I assume that this has become nodeResolve which I am already using...
EDIT: installing #rollup/plugin-json actually lets me build the site again (with a bunch of warnings)
(!) Missing shims for Node.js built-ins (which is not fixed by the rollup-plugin-polyfill-node above)
(!) Missing global variable names
(!) Circular dependencies
(!) Unresolved dependencies
not sure what to do about these warnings
I'm trying to set up a test environment for a product, using Node and Mocha. Everything seemed to be going smoothly, I had to use --require esm to ensure the named imports worked, but I still get unexpected token errors, this time on the first lines of a class. I have a static variable
class example{
static element = -1;
}
And this gives me an error when using
import {example} from "./example" in the test file.
My npm test script looks like this: mocha --require esm, which perfectly tests my normal classes, but as soon as I add a static variable to one of those, they also crash.
The actual error report looks like this:
[C/.../client]\src\example.js:2
static element = -1;
SyntaxError: Unexpected token =
I've tried googling all sorts of answers, but they're mostly about not getting the named imports to work, which I do. If I have to set up a babel transformation (which I tried, but I don't think I did it correctly), what would the configurations be, and how could I run that with react-scripts/mocha?
Thanks for any answers on this!
I ended up changing my exported classes to exported functions, and get/set functions for variables instead of the static ones. It would probably have worked to do it with another version of node, or some babel transform, but at this point, this seemed like the best way for me.
So i have an angular application. With this application i have alot of plugins (modules) that i use in my app.
i am trying to minify them which actually works. However after they have been minified (uglifyed) im getting the following error:
failed to instantiate module app due to:
Due to: And then all the modules. (starting by the first loaded then moving on).
Does this mean that i am unable to minify angular modules. (which would basicly mean im stuck with a 1000 line long HTML file).
Explicit dependency injection
app.controller('myController',function(module1,module2){
//...
});
myController.$inject=['module1','module2'];
Inline annotation
app.controller('myController',['module1','module2',function(module1,module2){
//...
});
You're probably doing it wrong. As the AngularJs documentation specifies, when you are going to minify your files, you must specify the dependencies like this:
app.controller('$ctrl', ['dep1', 'dep2', function(dep1, dep2) {
// your code here
}]);
This way, when the files are minified, the dependencies are not modified. See the angularJs tutorial: https://docs.angularjs.org/tutorial/step_05#a-note-on-minification
No, this does not mean you cannot minnify the module files. You can achieve this.
Check to make sure the order in wich they are concatenated/minnified is correct, if for example module x uses something from module y and x is loaded after y, this will show the error.
If the problem is because of the way the modules are declared, you could install grunt-ng-annotate wich will, when run, change all module declarations to the desired format so that you do not receive the mentioned error.
npm install grunt-ng-annotate --save-dev
I'm trying to import some Javascript code into a Reapp project. But I've this error when I run reapp run.
Module parse failed: Line 8: Unexpected reserved word You may need an
appropriate loader to handle this file type. | var SearchPageStore =
require('../../../../Core/Modules/SearchPage/Store/SearchPageStore');
It looks like this is the using of the require function that causes this error. However, I can't modify this code because it's reused by several other Javascript applications.
Any suggestion on how fix this error message?
Thanks!
I do own quite a big code basis implemented in JavaScript based on NodeJS. I do want to give typescript a try and want to implement all new modules in typescript. Just to see how it performs and how I like the idea. I do need to be able to revert back at any time so I do not want to put to much effort into the migration.
I started by using WebStorm and Gulp to support typescript. I created a new module and used the import / require combination.
import settings = require("./settings");
import _ = require("lodash-node");
By doing so I receive a couple of errors.
Error:(22, 27) TS2307: Cannot find external module './settings'.
Error:(23, 20) TS2307: Cannot find external module 'lodash-node'.
Those modules have no typescript definition file and are plain javascript modules (lodash is obviously a external library). I do have a couple of dependencies and I do not want to create definitions manually even if they are just empty stubs. As mentioned I do want to keep the integration as simple as possible.
Is there a general flag or something like that I can set?
The easiest way to proceed (if you don't want type information for a module) is to write:
declare module "lodash-node" {
var notTyped: any; // naming is unimportant here
export = notTyped;
}
Put that in a separate .d.ts file and /// <reference> it. Then _ will be of type any in your implementation file and the compiler won't complain about not know what module you're talking about.
You can use webpack's typescript-loader and start from there. Make sure you put target: 'node' on your webpack config so you don't have all the browser junk.