ReferenceError: TextEncoder is not defined after update Axios#1.3.1 - javascript

I had been using Axios v1.2.2 in my project without issues and I decided to update Axios to v1.3.1, after that my app continues running as before, however, all my tests started to fails... ALL OF THEM!! 😑
Some package versions that I'm using:
"axios": "^1.3.1",
"#jest/globals": "^29.4.1",
"#types/jest": "^29.4.0",
"#testing-library/dom": "^8.20.0",
"#testing-library/jest-dom": "^5.16.5",
"#testing-library/react": "^13.4.0",
"#testing-library/user-event": "^14.4.3",
This is the error that I'm getting in all my tests:
Test suite failed to run
ReferenceError: TextEncoder is not defined
> 1 | import { AxiosError } from "axios";
| ^
2 |
3 | class UnknownResponseFormat<T = unknown, D = unknown> extends AxiosError<T, D> {
4 | static readonly ERR_UNKNOWN_RESPONSE_FORMAT = "ERR_UNKNOWN_RESPONSE_FORMAT";
I also found some workarounds for this on the internet, some things like this...
if (typeof global.TextEncoder === "undefined") {
const { TextEncoder, TextDecoder } = require("util");
global.TextEncoder = TextEncoder;
global.TextDecoder = TextDecoder;
}
...but it doesn't work either.
PLEASE! SOMEBODY HELP ME! 🙏

I've encountered same problem. I think problem appered from version 1.3.0, I've checked version 1.2.6 and it's ok.
I didn't see any breaking changes in release notes, so I created support/question issue on github project.
I hope I will find solution or they will answer me.
If you need quick workaround, just change axios version to 1.2.6 in your package.json file. If any your dependencies are fetching axios in >= 1.3.0 use override option, ex.:
...
"overrides": {
"your-dependecy-package": {
"axios": "1.2.6"
}
},
...

Related

Error while Jest setup for Snapshots in " if (error?.stack) "

I'm going to create snapshot test, but got problems in the beginning.
I got such error while running test:
/Users/illia/WebstormProjects/TESTS/node_modules/jest/node_modules/jest-cli/build/cli/index.js:161
if (error?.stack) {
^
SyntaxError: Unexpected token '.'
In the test file I have no errors
import renderer from 'react-test-renderer';
import PaymentDisclaimer from './PaymentDisclaimer';
it('renders correctly when all default props', () => {
const tree = renderer.create(<PaymentDisclaimer fullPrice={9} />).toJSON();
expect(tree).toMatchSnapshot();
});
Packages:
"react-test-renderer": "^18.2.0",
"jest": "^29.0.3",
"ts-jest": "^29.0.1", (was installed as possible solution)
This happens when jest is running under the node version that do not read the new updates from JS. You need to run it in node 14 or higher.
I don't know why but in my case I was using nvm and I tried different versions one by one finally on node v14.12.0 the error disappeared.

Error: No "exports" main defined in graphql-upload/package.json

Have installed graphql-upload, do
import { graphqlUploadExpress } from 'graphql-upload';
And getting this error:
Error: No "exports" main defined in graphql-upload/package.json
Dependencies:
"graphql-upload": "^14.0.0",
"graphql": "15.8.0",
"graphql-request": "^4.2.0",
"graphql-tools": "^8.2.0",
"#nestjs/axios": "^0.0.7",
"#nestjs/common": "^8.4.1",
"#nestjs/config": "^1.1.5",
"#nestjs/core": "^8.4.1",
"#nestjs/graphql": "^9.1.2",
"#nestjs/platform-express": "^8.0.0",
The version of node: v16.10.0
I have personally put a ts-ignore for ignore errors.
// #ts-ignore
import GraphQLUpload from 'graphql-upload/GraphQLUpload.js';
// #ts-ignore
import Upload from 'graphql-upload/Upload.js';
And imports like that. I hope it can help even if it's dirty!
graphql-upload library doesn't have any main index.js re-export for all of its functions. It has direct file exports for all the specific functionalities. It is specified in its package.json file under exports key like so:
"exports": {
"./GraphQLUpload.js": "./GraphQLUpload.js",
"./graphqlUploadExpress.js": "./graphqlUploadExpress.js",
"./graphqlUploadKoa.js": "./graphqlUploadKoa.js",
"./package.json": "./package.json",
"./processRequest.js": "./processRequest.js",
"./Upload.js": "./Upload.js"
},
So instead of directly importing from package root you need to specify a sub-module path like this:
import graphqlUploadKoa from "graphql-upload/graphqlUploadKoa.js";
Reference: package.json of graphql-upload
So the problem was in the .default build settings.
You can remove it, but when we removed it we saw the problem with other modules, so we resolved this issue via this:
import Upload = require('graphql-upload/Upload.js');
It looks very dirty, but it works.
You can check conversation about this module in issues on GitHub: https://github.com/jaydenseric/graphql-upload/issues/305#issuecomment-1136574019
The owner of the package just chooses to restrict importing everything from the index file, so to run the new version (> 13.0.0) you have to change the way you are importing the package:
const graphqlUploadExpress = require('graphql-upload/graphqlUploadExpress.js');
or
const GraphQLUpload = require('graphql-upload/GraphQLUpload.js');
Alternatively, you can download grade your package to version 13.0.0
Just like every answer, the maintainer of the package has chosen to restrict the imports for this package. I run into the same issue and have decided to stick with version 13 moving forward.
You can use the old imports with version 13
import { graphqlUploadExpress } from 'graphql-upload';
Just ran into this problem.
Apparently, the the new version i.e. ^16 ,has a major update
now you need to do
const Upload = require('graphql-upload/Upload.mjs');
or
import { default as Upload } from 'graphql-upload/Upload.mjs';
Instead of .js, all the imports needs to be from .mjs.
Hope this helps!
use version v15.0.1 for graphql-upload
import like this:
import GraphQLUpload from 'graphql-upload/GraphQLUpload.js';
import graphqlUploadExpress from 'graphql-upload/graphqlUploadExpress.js';
https://github.com/jaydenseric/graphql-upload/issues/314#issuecomment-1140441744
https://github.com/jaydenseric/graphql-upload/releases/tag/v15.0.1
Supported runtime environments:
Node.js versions ^14.17.0 || ^16.0.0 || >= 18.0.0.
Projects must configure TypeScript to use types from the ECMAScript modules that have a // #ts-check comment:
compilerOptions.allowJs should be true.
compilerOptions.maxNodeModuleJsDepth should be reasonably large, e.g. 10.
compilerOptions.module should be "node16" or "nodenext".
https://www.npmjs.com/package/graphql-upload
I faced the same issue and I fixed it using an alternate package graphql-upload-minimal
Here is the old code
const {
graphqlUploadExpress, // A Koa implementation is also exported.
} = require("graphql-upload");
const { GraphQLUpload } = require("graphql-upload");
Here is the new code
const {
graphqlUploadExpress, // A Koa implementation is also exported.
} = require("graphql-upload-minimal");
const { GraphQLUpload } = require("graphql-upload-minimal");
This fixed it.

firebase functions, cant resolve module?

Im having an annoying problem which i've spent most of my day trying to solve without any luck - Also tried searching for a solution here and on Google, but without any luck, or at least all solution tried out didn't work.
When running my function, the firebase function log is telling me:
Cannot find module 'mailgun.js'
I have no idea why it won't resolve the module as it exist in the package.json file.
From the package.json:
"dependencies": {
"cors": "^2.8.5",
"firebase-admin": "^9.8.0",
"firebase-functions": "^3.14.1",
"form-data": "^4.0.0",
"mailgun.js": "^4.1.4"
},
I've have done a npm install inside the functions folder, and it deploys without problems, so the problem is when calling the function...
The code is:
import * as functions from "firebase-functions";
import Mailgun from "mailgun.js";
// eslint-disable-next-line #typescript-eslint/no-var-requires
const formData = require("form-data");
const domain = "https://app.mailgun.com/app/sending/domains/sandboxae7cd087b3854d25a6933f1fe489b5e3.mailgun.org";
const mgClient = new Mailgun(formData);
const mg = mgClient.client({
key: "mykey",
username: "api",
public_key: "mypublickey",
});
export const sendWelcomeEmailToClient = functions.https.onCall(
async (email: string) => {
return mg.messages.create(domain, {
from: "Task System",
to: email,
subject: "Testing",
html: "Dette er en test",
});
}
);
Please note, i've also tried doing a require instead of import on mailgun.js like so, but didn't work either:
Also, the mailgun documentation says that is the way to import it: https://www.npmjs.com/package/mailgun.js
const Mailgun = require("mailgun.js");
Solved it by using SendGrid instead of MailGun, that works as a charm...

TypeError: Cannot read property 'imports' of undefined (react-quill)

Error:
TypeError: Cannot read property 'imports' of undefined
(anonymous function)
C:/Users/abc/finaltest/node_modules/quill-image-resize-module/image-resize.min.js:1
I installed quill-image-resize using:
npm i --save quill-image-resize-module
Since I'm using react and thus do not have a tsconfig file, I'm unable to follow solutions available on the internet.
My code:
import ReactQuill from 'react-quill'
import Quill from 'quill';
import { ImageResize } from 'quill-image-resize-module';
Quill.register('modules/imageResize', ImageResize);
modules = {
toolbar: {
container:this.toolbarOptions,
},
ImageResize: {
modules: [ 'Resize', 'DisplaySize', 'Toolbar' ]
}
}
this is what I get when I hover on the import statement
Could not find a declaration file for module 'quill-image-resize-module'. 'c:/Users/abc/final blog/finaltest/node_modules/quill-image-resize-module/image-resize.min.js' implicitly has an 'any' type.
I tried using the require statement, but the error remains the same.
These are my dependencies:
"quill-image-resize-module": "^3.0.0",
"quill-image-resize-module-react": "^3.0.0",
"react": "^17.0.2",
"react-quill": "^1.3.5",
I tried the same with quill-image-resize-module-react, but I couldnt solve the error. My reactquill editor worked before this. I'm not using webpack so I dont even have webpack.config.js to try and solve the issue. I havent done any changes to the original files in node_modules/quill-image-resize-module.
This is the first time I'm trying react and thus would appreciate some help. I'm more than certain it is something under my nose that I'm not able to see. Thank you for your time.
Try to install the fixed version here: https://www.npmjs.com/package/quill-image-resize-module--fix-imports-error
And it will solve the problem.

Can Cypress run test files imported outside of Cypress folder?

I'm working on an E2E test framework using Cypress, and wanted to import spec files which are outside the Cypress directory (containing dir for: fixtures, integration, plugins, support). When I started some initial tests to verify if it would work as expected, I get these error messages stating that the error originate from my test code, not Cypress. The cause of the error is a TypeError stating: Cannot read property 'includes' of undefined.
Internet searches on this issue weren't really helpful, since no else seemed to have trouble with this behavior, (at least from my perspective). Even when I moved the spec file I selected as an import into cypress/integration/, the same issue repros.
At this point I'm stumped at what's the cause of this problem and how to resolve it. Is there something I'm missing?
Here is what I got in package.json (devDependencies, and field for main):
"main":"index.js",
"devDependencies": {
"#cypress/webpack-preprocessor": "^5.4.1",
"cypress": "^4.9.0",
"selenium-webdriver": "^4.0.0-alpha.7",
"webpack": "^4.43.0"
}
My spec which imports spec file outside of Cypress directory (cypress/integration/RunE2ETest.spec.js):
import '../../Cypress_E2E_Example/SteamHeader.spec';
The spec file outside of Cypress folder (SteamHeader.spec) just showing how I have it set with imports, exports:
import '../Cypress-E2E/BaseTest';
export default describe('Test Suite for ....' () => {
it('test example'), () => {
}
}
The file for my BaseTest:
import default before('BaseSetup', () => {
cy.visit('/');
}
Details on error:
Line causing the error (node_modules/global-dirs/index.js:28:1):
26 |
27 | // Homebrew special case: `$(brew --prefix)/lib/node_modules/npm/npmrc`
> 28 | if (process.execPath.includes('/Cellar/node')) {
| ^
29 | const homebrewPrefix = process.execPath.slice(0, process.execPath.indexOf('/Cellar/node'));
30 | return path.join(homebrewPrefix, '/lib/node_modules/npm/npmrc');
31 | }
Stacktrace:
We dynamically generated a new test to display this failure.
at getGlobalNpmrc (https://store.steampowered.com/__cypress/tests?p=cypress\integration\RunE2ETest.spec.js:86028:23)
at getNpmPrefix (https://store.steampowered.com/__cypress/tests?p=cypress\integration\RunE2ETest.spec.js:86064:30)
at Object.eval (https://store.steampowered.com/__cypress/tests?p=cypress\integration\RunE2ETest.spec.js:86072:32)
at Object.512._process (https://store.steampowered.com/__cypress/tests?p=cypress\integration\RunE2ETest.spec.js:86120:4)
at o (https://store.steampowered.com/__cypress/tests?p=cypress\integration\RunE2ETest.spec.js:1:265)
at eval (https://store.steampowered.com/__cypress/tests?p=cypress\integration\RunE2ETest.spec.js:1:316)
at Object.eval (https://store.steampowered.com/__cypress/tests?p=cypress\integration\RunE2ETest.spec.js:89116:20)
at Object.551.fs (https://store.steampowered.com/__cypress/tests?p=cypress\integration\RunE2ETest.spec.js:89130:4)
at o (https://store.steampowered.com/__cypress/tests?p=cypress\integration\RunE2ETest.spec.js:1:265)
at eval (https://store.steampowered.com/__cypress/tests?p=cypress\integration\RunE2ETest.spec.js:1:316)
at Object.eval (https://store.steampowered.com/__cypress/tests?p=cypress\integration\RunE2ETest.spec.js:70417:28)
at Object.425../fs (https://store.steampowered.com/__cypress/tests?p=cypress\integration\RunE2ETest.spec.js:70842:4)
at o (https://store.steampowered.com/__cypress/tests?p=cypress\integration\RunE2ETest.spec.js:1:265)
at eval (https://store.steampowered.com/__cypress/tests?p=cypress\integration\RunE2ETest.spec.js:1:316)
at Object.eval (https://store.steampowered.com/__cypress/tests?p=cypress\integration\RunE2ETest.spec.js:67474:12)
at Object.411../lib/cypress (https://store.steampowered.com/__cypress/tests?p=cypress\integration\RunE2ETest.spec.js:67503:4)
We experienced the same error. It was caused by an import of the cypress module. I guess this module is not intended to be imported in files which are loaded in the browser.

Categories