I am using WPGulp to build my assets for a WordPress theme, but I am faced with a weird issue and unfortunately, I cannot find any solution.
My current problem is that the statements like import ModuleName from './modules/ModuleName' doesn't work, and I get an error message in the browser console like this: Uncaught ReferenceError: require is not defined
Inside the compiled source code, the line that has the problem is like that:
var _Router = _interopRequireDefault(require("../util/Router"));
I have try to customize the Gulpfile of the WPGulp to make it work, but I can't make fix it.
One of the solutions I tried, but didn't worked is to add the modules options in the #babel/preset-env properties and set all possible options amd, umd, systemjs, etc, but none of them worked.
Any idea on how to solve that problem? Am I doing something in wrong?
Thank you in advance.
You may need to upgrade Node and/or use --experimental-modules flag. You can also set an env var in your shell:
export NODE_OPTIONS="--experimental-modules"
Related
I'm getting the error from the title in my Vue app with Vite. I seem to have tried everything that I could find online but nothing really seems to work in my case.
The problem started when I installed aws-sdk to connect to my linode bucket storage, and importing it like import aws from 'aws-sdk'.
I tried almost everything from this issue, and quite a few variants from that in vite.config.js that I found elsewhere.
When using the following in my vite.config.js it works in dev:
define: {
global: "window",
},
But gives me the following error in prod:
[vite]: Rollup failed to resolve import "aws-sdk" from "/var/www/html/kwigy/src/linode.js".
[...]
If you do want to externalize this module explicitly add it to
`build.rollupOptions.external`
[...]
And that doesn't seem to be a good solution anyway according to what I found online.
Adding a script to the tag or making a file that imports the said script in main.js also works in dev but gives the same error in prod.
I also tried to install requirejs, to use it as const aws = require('aws-sdk') but I have to admit I do not really understand how to configure that from the docs.
Does anybody have a solution to my problem? I have been stuck for a full day on this now.
I tried to make a small app using peerjs but when I tried to import Peer from "peerjs", my code crash with:
Uncaught ReferenceError: assignment to undeclared variable parcelRequire
At http://localhost:8080/_snowpack/pkg/peerjs.js:20
I didn't find anything on internet. And I don't why snowpack is using parcel because I didn't install any plugin
I tried to import Peerjs with Skypack but it's same.
On the other hand, when I test to import another library, here I tested with canvas-confetti, it work. So I don't know why Snowpack doesn't like Peerjs
This is an issue with the peerJs library.
You can see the line of code that is causing this issue here
You could perhaps mitigate it by setting window.parcelRequire before importing the peerJs library. Consider filing an issue to peerJs's github.
There is a similar error in parcel-bundler https://github.com/parcel-bundler/parcel/issues/1401 used by the status-widget developed by Atlassian https://bitbucket.org/atlassian/statuspage-status-widget/issues/3/uncaught-referenceerror-parcelrequire-is
You can fix this by adding esModuleInterop: true and allowSyntheticDefaultImports: true to tsconfig.json
For Instance Fix
Add variable in
node_modules/
peerjs/dist/peerjs.js
var parcelRequire
instead of
parcelRequire
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;
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.
Just ran an npm update on my web application and now Moment JS appears to be failing with the following message:
Error: Cannot find module "./locale"
\node_modules\moment\src\lib\moment\prototype.js:1
> 1 | import { Moment } from './constructor';
Not sure what version of Moment JS I had prior to my update, but my application has been working for months.
I created another react app and ran an npm install moment --save and modified the source to display the time and ended up with the same error described above.
Not sure if there is a fail-proof way to integrate Moment JS using Create-React-App currently short of ejecting to manage the webpack settings myself, but I really don't want to do this. Anyone else seeing these issues or having success? If so, a short write up would go along way to helping out.
Appears this has already been identified as an issue for Moment JS version 2.19. If you have upgraded to 2.19 run npm install moment#2.18.1 to revert back to previous version until it is fixed!
See thread: https://github.com/moment/moment/issues/4216
Application built with Create React App and using Moment 2.24.0, the following seems to be working fine:
import moment from 'moment';
import 'moment/min/locales';
Instead of importing moment-with-locales directly. Alternatively, also possible to only import required locales:
import moment from 'moment';
import 'moment/locale/fr';
import 'moment/locale/ru';
The answer above, though I have no doubt works for some, does not work for me. The solution I found is fairly quick and easy, but is a little more complicated than simple downgrading.
This problem originates as a result of and can be fixed with webpack. So we're going to have to add a few lines of code to our webpack.config.js file. If you don't have one yet, you can add one to the root webpack directory:
YOURAPPNAME/node-modules/webpack/
So now that you're inside your webpack.config.js file, you need to add a few lines of code. Just copy and paste this inside the new file or adapt it to the code you already have in webpack.config.js.
module.exports = {
resolve: {
alias: {
moment$: 'moment/moment.js'
}
}
};
Your import statement of moment in your index.js (or otherwise named) file should look like this:
import moment from 'moment'
You should now be able to use moment completely normally. For example:
var tomorrow = moment().add(1, "day")
If you have a fresh install, or upgraded moment to 2.25 and are getting this warning now, try forcing all your packages to use 2.24.
UPDATE: New release 2.25.3 has been reported to fix this problem! Try to first just update.
If you depend on some library that didn't upgrade yet, tell them to upgrade. And in the meantime, if you need 2.25, you can force also your sub-dependencies to use this version.
If you're using yarn add these lines into package.json
"resolutions": {
"**/moment": ">=2.25.3"
},
This is to be added inside packages.json at the top level, i.e. with the same indentation as "dependencies".