So I have mjml templates which I test after rendering them with the jests snapshot feature. Locally all is good but then in the CI pipe this weird error occurs:
- .mj-outlook-group-fix { width:100% !important; }
+ .outlook-group-fix { width:100% !important; }
So the difference between the snapshots really only is that in the CI sometimes mj- is missing. Which is totally weird to me as the CI of course also has the exact same version of all dependencies.
So it turned out that my CI was running node version 13 while I was running version 12 locally. After aligning the versions the snapshots would be in sync. It still is very very odd though IMHO why class name creation would depend on the node version though.
Related
I've recently migrated my project to Angular 13. It builds locally on my Mac, however it's started to fail when I run it in my Docker build container (tested both locally and on our CI/CD server.
It's complaining about the DeckGL import:
Cannot find module '#deck.gl/layers' or its corresponding type declarations.
1 import * as Layers from '#deck.gl/layers';
Cannot find module '#deck.gl/geo-layers' or its corresponding type declarations.
2 import * as GeoLayers from '#deck.gl/geo-layers';
Cannot find module '#deck.gl/aggregation-layers' or its corresponding type declarations.
3 import * as AggregationLayers from '#deck.gl/aggregation-layers';
I've used npm list to ensure the dependencies are the same on my Mac and within the Alpine container and have also tested using the same Node version (and have tried a couple of different Node / Apline images), however, the issue persists, whilst still working locally.
Any ideas what could be causing this?
Really silly issue, but posting an answer in case someone runs into a similar issue in future.
I had accidentally run npm install in a top-level directory, and had installed some Node modules that didn't end up in my package.json file. In my case, I had the core deck.gl module installed in my package.json, but none of the layer packages (which are separate npm modules).
When I was running it locally, it was finding the correct dependency, but when running it on the CI/CD environment, it was obviously failing.
I'm using Puppeteer for webscraping, with a small NodeJs webapp that I made. This webapp is hosted on Heroku and use jontewks/puppeteer-heroku-buildpack to works.
The problem I'm facing is that my app do not build anymore because of the Heroku size limit:
Compiled slug size: 537.4M is too large (max is 500M).
I've tried severals things:
Using Firefox instead of Chromium
It's a "no go" for me because of a current issue with puppeteer/firefox:
Reducing the size of Chromium by removing the file interactive_ui_tests.exe
I can't do this because Heroku use Linux instead of Windows, and this file does not exist in the Linux Chromium distribution
Using headless_shell instead of Chromium
I'm stuck with this (like here) as I do not understand how to make it works. I found the file to use here, but I'm facing the same issue as the comment from the 07/09/2018
Using Playwright instead of Puppeteer
It might be a solution, but I'm using stuffs like puppeteer-extra and puppeteer-extra-plugin-stealth, so it bother me to change
Reducing the size of Chromium by removing the folder locales
It helps a bit, but not much
Using an older version of Puppeteer (2.1.1), which is using an older version Chromium who was slighlty lighter
At the moment, it's the only working solution that I have
Use the command heroku repo:gc -a myapp and heroku builds:cache:purge -a myapp
My last three points reduced the size of my slug to 490M. So my app is working, but it's not great for the (close) future, like having an up to date Puppeteer version.
So here I am, asking for help, as I do not have any more ideas at the moment.
Thank you very much for your help 🙏
Finally, I end up using Playwright.
With this Buildpack, the build of my app is only 250Mb!
Here's a few steps I've followed:
Install with NPM playwright-chromium to only download Chromium.
Set PLAYWRIGHT_BUILDPACK_BROWSERS env variable to chromium in Heroku to only install Chromium dependencies.
Put this buildpack before Node.js buildpack in Heroku.
With this trick you can use most of the of stuff from puppeteer-stealth.
If you want, you can block resources like in Puppeteer:
await page.route('**/*', route => ([
'stylesheet',
'image',
'media',
'font',
// 'script',
'texttrack',
'xhr',
'fetch',
'eventsource',
'websocket',
'manifest',
'other',
].includes(route.request().resourceType()) ? route.abort() : route.continue()))
Can anyone help me getting Cucumber to work with Cypress? Absolutely every guide I can find has this step in the setup:
X.
Add the relevant configurations to your Cypress environment files accordingly.
Under plugins/Index.JS file add the following:
const cucumber = require('cypress-cucumber-preprocessor').default
module.exports = (on, config) => {
on('file:preprocessor', cucumber())
}
However, my project doesn't HAVE a cypress/plugins/index.js file. It DOES, however, have a cypress/plugins/index.ts file. I thought TypeScript was the going standard for Cypress, and not JavaScript?
The code above gives me errors on "require" (TS2591: Cannot find name 'require'), "module" (TS2591: Cannot find name 'module') and the parameters "on" and "config".
Apparently, the index.ts file WAS index.js once, since this is still included in the file:
// This example plugins/index.js can be used to load plugins
But obviously something is wrong here. But how come apparently no one else on the "entire internet" have had this problem? ( :-) )
To keep on trying, I skipped this part - also since I read some hints that it isn't longer necessary (not sure, though).
I also added this dependency to the project pom.xml:
<dependency>
<groupId>io.cucumber</groupId>
<artifactId>cucumber-cypress</artifactId>
<version>5.7.0</version>
</dependency>
Then did the npm installs, maven clean install, refresh etc. etc., and creted a test.feature file in the /integration folder.
It seems that IntelliJ reconizes the file as a Cucumber feature file, because I get the option to run both the feature and the test inside.
However, that just gives me the following error when the feature tries to run:
Error: Could not find or load main class cucumber.cli.Main
Caused by: java.lang.ClassNotFoundException: cucumber.cli.Main
Figuring it was due to the cucumber.cli.Main missing in the run config, I opened it and saw that it wasn't. Nor was it working:
[![enter image description here][1]][1]
[1]: https://i.stack.imgur.com/ib9ZT.png
(The "cucumber" part of the line is makred red in "Main class".)
Changing this to " io.cucumber.core.cli.main" (which I believe is newer?) didn't help.
The last step I've tried is installing the Cucumber Js plugin in the plugin browser. Didn't seem to do any difference.
I'm afraid to try much more, since in my experience messing around too much with maven is likely to ruin any project to the point of me just having to scratch it and start over again.
Have you looked at https://github.com/TheBrainFamily/cypress-cucumber-typescript-example/?
It seems that you can use Cypress in Typescript but still define the plugins with JavaScript. That is you should convert your plugins.ts to plugins.js and everything should work as expected.
When you mentioned pom.xml, it must mean you are trying to set up Cypress and run in a Maven build.
You should first set up Cypress the node.js way first using npm install -D cypress#<an older version> because npm i -D cypress will install cypress 10 for you. Then after that, follow the steps in the link shared by #https://stackoverflow.com/users/5389127/ga%c3%abl-j to set up Cucumber for the older versions of cypress but use this for the later version of cypress.
You can set the repo up in maven using this article in this answer.
For a comprehensive guide on how to use Cypress, you can checkout this youtube link
Probably it is not specifically related to webpack/memory-fs, but I am getting the RangeError: Maximum call stack size exceeded error (see below for a call stack).
I have found out, that __dirname on Azure (webapp) returns \\100.78.172.13\volume-7-default\8f5ecde749dace2bb57a\4e07195f015b45ce8e9ba255dc901988\site\repository\Source\Website\Content\app\node_modules\webpack\node_modules\memory-fs\lib\normalize.js in my situation, while process.cwd() returns D:\home\site\repository\Source\Website\Content\app.
Is anything can be done from my side to configure node js to return D:\... instead of \\.. ?
Gist
How to reproduce:
Clone the https://github.com/intellismiths/webapp1 repository.
Create new Azure Web App (default settings).
Configure deployment source to use GitHub.
Click Sync. It will take 10+ minutes to complete and it will show that the deployment was successful.
Go to Application settings in Azure and change WEBSITE_NODE_DEFAULT_VERSION to 6.2.2
Go to kudu page and open powershell console.
Execute npm cache clean
Check node version by executing node -v. It should be v6.2.2
On Azure, navigate to D:\home\site\respository\src\WebApp1
Execute npm run build
In console, you should see a lot of errors which indicates that modules can not be resolved.
OPTIONAL. Test npm run build on your local machine - it should produce wwwroot/app.js without errors.
Update webpack.config.js to include context: __dirname to fix previous errors.
Execute npm run build
In console, you should see the "RangeError: Maximum call stack size exceeded" error.
Update 1
I only tried to set 6.2.2 runtime after adding the second package.json, so the project structure is not the simplest possible. Maybe just setting node to 6.2.2 breaks the build.
I could reproduce your issue following your steps. I found the key point was setting the WEBSITE_NODE_DEFAULT_VERSION to 6.2.2. And I found the webpack task worked fine if the WEBSITE_NODE_DEFAULT_VERSION was under 6.
Please downgrade the setting WEBSITE_NODE_DEFAULT_VERSION to the version under 6 e.g. 5.9.0 if your node.js modules do not need such high version.
And according the package.json of angular2 athttps://github.com/angular/angular/blob/master/package.json, it seems that the angular2 repository requires the node.js version between 5.4 and 6.
Additionally, the web application's root directory on Azure Web Apps is D:\home\site\wwwroot. So if you want to build your frontend project on Azure Web Apps, you need to locate to D:\home\site\wwwroot\wwwroot\mobile-web-app then run npm run build.
It's been fixed in master and it's proposed to be included in v6.4.0.
See: https://github.com/nodejs/node/issues/7175#issuecomment-239824532 and https://github.com/nodejs/node/pull/8070
After a long day of research, trial-and-error and various experimentation, I've found an acceptable workaround if you're not willing to downgrade to Node 5.*:
Downgrade to Node 6.1.0
Make sure to install webpack globally (with npm install -g webpack).
Just using 6.1.0 gets around the "maximum call stack size exceeded" error, but instead gave me a lot of resolve failures when running webpack from node_modules (using ./node_modules/.bin/webpack). Installing webpack globally finally got me past that.
If I understand it correctly, this whole issue with __dirname in Node >= 6.2 resolving to the UNC folder path instead of the mounted path is going to be fixed, there's an active discussion here.
I had the same issue.
Fixed it with UPGRADING npm not DOWNGRADING.
Bug is fixed in the npm versions newer than 6.5.
https://github.com/aumanjoa/chronas-community/blob/master/package.json#L48
I believe that your __dirname shows your persistant drive where the data is stored, while .cwd gives current directory from where node ran. This is because Azure runs from the Drive but files are stored at the persistent drive.
In your Gruntfile.js add
module.exports = function (grunt) {
grunt.file.setBase(__dirname);
// Code omitted
}
Refer: link
Using OSX Maveriks, iTerminal, zsh.
Problem: Grunt runs only the default task regardless of the task you specify.
Problem: It only happens in 1 computer.
What can be the reason for grunt not to run but the default task. I've been working with Grunt for a long time now and we use it at the company I work at. Everything has been working perfectly smooth except for 1 single coworker that when he runs grunt myTask is like if he were running just grunt, even if I run a made up task like grunt myNotExistentTask it ignores it and again looks like it runs grunt.
I did check for stupid errors:
Checked that I'm accessing the same project folder (multiple times).
I deleted the default task to see if it complained and it does.
I checked that the Gruntfile was not throwing errors. Then I forced to throw errors to see if it would complain, and it does.
Runned npm install.
Check both bashrc and zshrc for a grunt command or something.
Obviously grunt is accessible.
Runned it in the default terminal and in iTerm.
"Have you try to turn it on and off?" Yes I did restar the laptop.
I tried with multiple coworkers laptops and it only happens in the one laptop.
I did not have time to (but I will check for these):
test creating a simple Gruntfile somewhere else in his laptop, but I have a weird feeling that it would behave the same way.
reinstall grunt. Would that help?
grunt --version or others for that matter, I assumed that it has the specified version in the package.json.
we are using:
"grunt-cli": "^0.1.13",
"grunt": "^0.4.4"
The code is not causing the issue here because every computer runs it but one. I can't show the actual code but I can give you the boilerplate just in case there is some mysterious thing I don't know about:
module.exports = function(grunt) {
grunt.initConfig({
pkg : grunt.file.readJSON("package.json"),
someTask : {
options : {
},
target1 : {
}
}
});
grunt.loadNpmTasks("dependency1");
grunt.loadNpmTasks("dependency2");
grunt.loadNpmTasks("etc");
grunt.registerTask("default", function () {
// creates a server with one of the dependencies
});
grunt.registerTask("w", function () {
// creates a watch with one of the dependencies
});
};
There is a reason behind why we are not simply doing something like grunt.registerTask("default", [".."]). Basically, our projects are too big and we need to change settings for each task to increase performance (e.g. not to watch too many files, etc).
I googled this different ways and couldn't find anything about this happening before. Any ideas are welcomed.
Edit
I forgot to mention that he has been working with the project for a while, we just recently noticed because he never needed to use any other task but the default task until a few days ago when he needed to use a different task, in summary, we don't know when or why it started.
After:
Deleting and cloning the repo.
Deleting npm_modules.
Reinstalling everything.
Creating an isolated project to test this issue.
and failing, we checked for the paths to grunt thanks to a comment by #XavierPriour
Using zsh with iTerm:
➜ folder git:(branch) which grunt
/usr/local/bin/grunt
➜ folder git:(branch) type -a grunt
grunt is /usr/local/bin/grunt
grunt is /usr/bin/grunt
We deleted the extra grunt binary:
➜ folder git:(branch) cd /usr/bin
➜ bin sudo -rm grunt
And everything started working correctly. I assume the issue is he installed grunt globally instead of just grunt-cli, although I'm not sure.
The most popular answer to this question shows the dos and don'ts of how to install grunt.