How to configure esLint in an Electron next.js setup? - next.js

I startet an Electron project based on the official sample project from Vercel (https://github.com/vercel/next.js/tree/canary/examples/with-electron-typescript). Now I want to add eslint to the project. I have done it like the docu says (https://nextjs.org/docs/basic-features/eslint). But eveytime I run npm run lint I get an error "Couldn't find a pages directory. Please create one under the project root".
I tried to set the "rootDir" like described in next.js docu but that also ends in that error message.
If I change the lint script in package.json from "next lint" to "eslint /renderer" it seems to work but with an error "Pages directory cannot be found at . If using a custom path, please configure with the no-html-link-for-pages rule in your eslint config file." and VSCode seems to ignore the rules.
How can I setup eslint to use the renderer folder of electron as next.js root dir?

Related

next.js build failed before firebase deploy

I am trying to deploy my next.js file to firebase.
The command firebase deploy --only hosting works, but the deployed file is not built in the file of next.js.
I tried this:
I edited package.json, script.build setting next build into next build && next export
thus the /out folder was automatically created.
I set the /out folder as the public directory and then executed firebase deploy.
Here is the guide I used:
https://medium.com/nerd-for-tech/lets-deploy-a-next-js-app-with-firebase-hosting-e070b3aecd04
Obviously this failed. That is why I am asking for help.
When I edit index.html in the /out file and then deploy, it is successfully deployed.
Here is the picture:
I am expecting that the problem is on building the next.js file.
Is there anyone that knows what to do in order to build it successfully?

"Components" folder not included in project structure

I have a strange issue with nextJS.
I created new directory components in the root folder and added some test component files.
While I try to import it, the pass exists, but at localhost I have error:
Module not found: Can't resolve '../../components/admin/AdminBoLayout'
The path is correct, and the component works 100% (tested this code with another nextJs project).
Why does problem appear?
P.S. according to this article, components directory exist in nextJs project structure.
Solved: just Ctrl+C and npm run dev in terminal
(restart localhost)

Firebase tools broke my webapp dependencies

I was building a small web app using Vue cli and webpack/babel. I've been working for a month using "npm run build" and placing the files created in th "dist" folder on my server. Now I would like to add Firebase to the project but "Firebase deploy" command doesn't build the same files. It actually creates a new placeholder index.html file and even if I replace that file file for my previous html I'll get loads of errors because all the other components are not there (no JS no CSS)...
This is my firebase setup.
These are the files I used to create using "Npm run build" in the "dist" folder
The new "Firebase deploy" files – now in the public folder – no JS no CSS!
The errors I get now...
It seems like now all the dependencies that were build nicely put together by the Vue Cli webpack/babel workflow are all gone. Any suggestions on how to fix this without having to start from scratch?
Now even if I type NPM run build i get errors:
With npm run build you build your Vue.js application, independently of Firebase.
It is not clear to me if you still build your app to the dist directory or to the public one. But, based on your Firebase setup ("What do you want to use as you public directory"), at the end you need to have ALL the files (incl. css and js) produced by npm run build in the public directory.
One simple solution is to change the public directory of Firebase to dist: you can do that in the firebase.json file and change "hosting": {"public": "public",... to "hosting": {"public": "dist", ....
A last point: you have answered No to the question "Configure as a single-page app". Normally, with a Vue.js app you should answer Yes.

Errors after npm run prod

I'm developing a small website with Laravel and Tailwind on shared hosting. I can use a command line tool on host. In the local environment tailwind works without problem but after npm run prod most of the Tailwind functionalities are missing and the app.css and app.js seem to have errors.
e.g. scaling on hover -> transform hover:scale-105 duration-200 doesn't work on host.
I tried importing Tailwind with cdn but it can't be a permanent solution.
What am I doing wrong??
I looking for an answer for days with no luck
I assume locally you run npm run dev and on production npm run prod. By default the development version of Tailwind does not remove unused style specification. But when with npm run prod unused styles are purged for production usage.
As you can read in the docs the the paths to your templates should be configured in the purge section of your tailwind.config.js.
module.exports = {
purge: [
'./src/**/*.html',
'./src/**/*.vue',
'./src/**/*.jsx',
],
// .. more ..
See docs:
This list should include any files in your project that reference any of your styles by name
If you don't configure these paths, Tailwind does not know which classes you use and will therefore purge all styles it does not find, f. ex. your hover:scale-105.
Solution "dirty":.
You run npm run dev in production which will result in a large build of your css, but fixes the problem for now.
Solution "clean":.
You configure your paths correctly, let Tailwind correctly recognize it and purge unused styles... and be happy.
You can test this also in your development environment by running npm run prod and see what happens.
The app.css file after npm run production still has some warnings and when I upload it in the host the warnings are becoming errors. Here is a screenshot.
However when I use the file after npm run dev everything works fine. Maybe I'm having collisions between Tailwind classes. I will come up with an answer.

Error while executing grunt command

While trying to execute grunt command.
I have used yeoman, bower, generator-angular and grunt with nodejs in windows 7.
Everything worked fine. And I have added font-awesome with bower-install, and to update my html I executed grunt wiredep.
it throws the following error.
Also my bower components are outside app folder, But in index file it started with bower_compontents/jquery/dist/jquery.js instead ../bower_components/jquery/dist/jquery.js.
The problem is with the node modules.
I just deleted it and executed npm install again. All worked well :-)
Change bower_components path
in .bowerrc file, I have changed the directory path. :-)

Resources