Jest failed to parse a file with solana/web3.js - next.js

Can anyone provide a solution as to why this repo will not run the test?
https://github.com/robport/nextjs-solana

If you need to make it work, this is a solution. Basically jest does not like to work with file in "newer" js formats (specifically, it does not like import or export statements, that is what it is complaining about in the message when you run yarn test).
I will cite jest documentation to be more clear, you can find it at this link
Sometimes it happens (especially in React Native or TypeScript projects) that 3rd party modules are published as untranspiled code. Since all files inside node_modules are not transformed by default, Jest will not understand the code in these modules, resulting in syntax errors. To overcome this, you may use transformIgnorePatterns to allow transpiling such modules.
"jest --transformIgnorePatterns"
Calling the script with the parameter alone solves your issue. However, you should specify the exact regex to avoid transpiling everything.
Check also this to investigate more.

Related

How to exclude vendor javascript from babel-loader in NextJS

Here I have a javascript file that's the result of bundling and obfuscation. The vendor doesn't provide it as an npm package, but in a zipfile via email.
If it were an npm package, I think it would work fine because I guess NextJS build will not try to run babel on node_modules (default exclude for babel-loader).
If I put it at public/acme.js that would be fine for any html including it. But for our project's typescript code, importing it from ../public seems odd, and if it's located anywhere else it will get processed by babel, which seems odd since it already has been.
There's an npm feature to install a package from local files, however it doesn't seem like that would work in our CI pipeline.
Is there a way to add paths to the exclude part of the babel-loader rule? I see in the doc how the option.defaultLoaders.babel is used as an input to create another rule, but it's not clear that this could be mutated, or if it supports an exclude.

How can I find unused libraries in a Symfony project with PhpStorm?

I try to find and also to delete all the unused libraries in a project. For example I have a folder lib/ with lot of other folder which are the famous libraries. I want to know how I can identify which libraries are not used.
I asked the same question here but the only response I received suggests to me to check each file one by one ...
Can you help me?
I don't think that is possible, as some libraries may be lazy loaded depending on some internal state of your application.
So even if you could somehow find all strong typed references inspecting the code, you have no way of finding out if a library is loaded via magic methods, custom class loaders, dynamically generated include or require statement, eval-ed code and so on.
Without having tests with 95%+ coverage for your non-library code, it is very risky to remove anything from your lib folder. You code may appear to run fine, but still fail in some edge cases.
There's an open source project that can help you to do that:
https://github.com/composer-unused/composer-unused
Installation
composer require composer-unused/composer-unused-plugin
Usage
composer unused
And if you want to use it inside phpstorm, you can look at their composer documentation: https://www.jetbrains.com/help/phpstorm/using-the-composer-dependency-manager.html#create-and-run-composer-scripts

'npm run dev' and 'npm run build prod' not producing the same output

I'm developing a progressive web app using Vue.js.
While I'm developing I use the command npm run dev to start the local server which serves the files on http://localhost:8080/. When I want to build for production I use npm run build prod which generates the output files in project\dist. I then take those files and copy them onto an ISS which is configured to work with single-page applications. All good so far.
I noticed some differences in the way the app looks (css) between the dev and prod build. First I thought this might be because of a client side cache, but after several tries to clean the cache and no-cache loading I'm sure that caching is not the issue here. The output really is different.
To be honest, I'm not sure if there is anything else different besides a few minor css parts. I was thinking what might be the issue, one of the things I noticed that could be the cause is that I use single file components in vue with scoped css (*.scoped.vue.css file names). I guess there could be an issue combining the different files into a single one?
It might be noted that I'm quite a newby when it comes to npm, webpack and all the other involved technologies. If you want to take a look at the configuration, you can find my current working branch build configurations here.
Any idea what the issue might be?
I encountered the same problem when using single file components. The issue indeed seems to be that when you run npm run build it will generate one single css file without the guarantee that the styling will be applied in the same order, causing some property values to be ignored. I 'fixed' it by adding !important to the properties that weren't matching up in the final build. There's probably a better way to handle this, but I must admit I too am quite a newby.
The order of how styles are applied while npm run build matters, and is to my knowledge out of (y)our control. To get rid of conflicts, when using Vue.js, you may want to scope your styles.
In every *.vue file within your project, replace
<style>
...
</style>
With
<style scoped>
...
</style>

Using basscss installed via NPM/Webpack

I'm trying to install Basscss CSS framework in my webpack/react app, I'm fairly new to this workflow.
When I run 'npm i basscss' I'm able to add:
require('basscss/css/basscss.css');
To my app entrypoint. However, I now need to add basscss-addons for further styling - so is the correct approach to add a require line for every single file in basscss-addons? Each addon is a separate file, and each addon's folder structure seems to be different.
It seems like there must be an easier way.
There is a method in this article that works, but it relies on cssnext and it throws warnings saying it's deprecated and that you need to upgrade to postcss instead.
So you would need to use postcss, postcss-basscss and postcss-import, I guess, but I couldn't make it work efficiently. I'd love to hear from someone who has a valid implementation with postcss...

How to validate HTML/CSS files with grunt.js?

This is a noob question.
I would like to use grunt.js as a build tool for my web project. Can use grunt.js to validate my HTML/CSS files? Do you have an example of such a grunt.js file?
There is another plugin that seems to be updated more often and does not require java. grunt-html-validation. It has a number of options and has been working great for me. You can install and use it like this:
npm install grunt-html-validation --save-dev
Then put something like this in the initconfig of your Gruntfile.js
and this in appropriate places in your Gruntfile.js
grunt.loadNpmTasks('grunt-html-validation');
grunt.registerTask("default", ["validation"]);
There is also a number of useful options including the ability to relax errors based on a regular expression (could be useful for AngularJS for example) and the ability to save a report.
You can use the grunt plugin grunt-html. Beware, you will need Java on your computer to use it. It works well for me.
As of now there seem to be two popular HTML validation plugins:
grunt-html-validation
grunt-html
grunt-html-validation uses the W3C Markup Validation Service and grunt-html uses a local copy of the java-based The Nu HTML Checker.
They both work well and have very similar options so it comes down to whether you want to wait for an external service call or wait for a local java app.

Resources