Vue-repo "Module build failed: Error: No ESLint configuration found" - node.js

My Vue project is running fine locally, but when upload it to github repo, download it back from there and npm install, then npm run dev, it throws error Module build failed: Error: No ESLint configuration found.
When I unzip my downloaded repo-files, there's no .eslintrc etc. files that are present when I'm uploading my project, and to my knowledge that is one reason causing this ESLint problem.
Here's the very basic vue init webpack HelloWorld.vue uploaded to my test-repo without any modifications to show how it fails to build after downloading.
Link to my test repo to reproduce the error: https://github.com/tuuchen/vue-movie-app
How can I fix this issue with eslint?
EDIT: I made a fresh project without eslint, and when downloading it from my git repo, It's throwing Failed to compile error, asset optimization[copy-webpack-plugin] WARNING - unable to locate '<path>\myvueapp\static'
EDIT 2: Also .postcssrc is missing when initiating npm install
EDIT 3: Problem solved. I was using webpack for creating my vue project, and it caused all kinds of issues when downloading the project back from git repo. npm install -g #vue/cli did a project that worked without issues.
Sorry for being such a noob.

This issue came up as I created a new project by copying from another project on my Mac. However, the hidden files were not copied!
Solution
The issue got resolved by having these hidden files as well in the new project:
.babelrc,
.editorconfig
.eslintignore
.eslintrc.js
.postcssrc.js
There are other solutions that many have proposed in this Vue Issue that you can refer to if this does not solve your problem.

In my case, I just delete the folder Node.Js and try reinstall node modules using yarn/npm.
if it still did not work, you can try to add file .eslintignore on the root folder and add there the path to the folder we want to omit.
For example, in this scenario, .build/test.js is the desired file to allowlist. Because all dot-folders and their children are ignored by default, .build must first be allowlisted so that eslint becomes aware of its children. Then, .build/test.js must be explicitly allowlisted, while the rest of the content is denylisted. This is done with the following .eslintignore file:
# Allowlist 'test.js' in the '.build' folder
# But do not allow anything else in the '.build' folder to be linted
!.build
.build/*
!.build/test.js
more documentation https://eslint.org/docs/user-guide/configuring/ignoring-code#the-eslintignore-file

Related

Modules are not being found when migrating from CRA to Vite

I am trying to migrate my application from create react app to Vite. I followed this tutorial article on how to do it. So far, I have deleted the node_modules folder, made the following changes:
changes to package.json:
then ran npm i, then made these changes to
I actually had to replace "start" with "dev" for this one to get it to work:
I then moved public/index.html to index.html (project root folder).
changes to index.html:
changes to index.html:
I added this vite.config.jsx file:
Lastly I replaced all .js file extensions with .jsx. But now when I enter npm run dev it is telling me it can't find multiple different modules. I get a message like this:
Error [ERR_MODULE_NOT_FOUND]: Cannot find package '/Users/gtrman97/Documents/code/coding-projects/project/node_modules/esbuild/' imported from /Users/gtrman97/Documents/code/coding-projects/project/node_modules/vite/dist/node/cli.js
Out of curiosity, I commented out the import 'esbuild'; line in the cli.js file but got the same error with a different module:
Error [ERR_MODULE_NOT_FOUND]: Cannot find package '/Users/gtrman97/Documents/code/coding-projects/project/node_modules/resolve/' imported from /Users/gtrman97/Documents/code/coding-projects/project/node_modules/vite/dist/node/cli.js
The easiest way to migrate from CRA to vite, for me, is to create a vite app and copy all the components I created and install all of the dependencies I have on the CRA app. And boom, it just works. At least for my typescript CRA project. (And by examing git diffs, not surprisingly, only the package.json file changed.)

Missing /src and /dist in node_module (with workspaces)

I forked a package and made some changes and need to install it locally. Here's my branch.
I ran:
yarn add 'saber2#https://github.com/ilmoi/saber-common#head=ilmoi_support_v0'
which successfully installs the package, but it's missing both /src and /dist and so it unusable.
Having searched for similar issues I unsuccessfully tried:
building and commiting /dist dir (made sure not in .gitignore)
adding a "files" line to package.json (both top level and inside the workspace)
adding a "prepare" line
adding a blank .npmignore
None of those works. Here's how the package looks in node modules:
I suspect the problem is to do with workspaces. For some reason none of them compile / show. Please advise on what I'm missing.

NPM workspace and VSCode node_modules path

I am using npm workspaces with typescript as specified in this git README https://github.com/Quramy/npm-ts-workspaces-example
When I do npm i from the project root directory it installs all packages in root directory (node_modules). It doesn't create node_modules directory in each workspace. Because of this, VSCode thinks 'module' is missing (Cannot find module 'abcde' or its corresponding type declarations), hence shows red under line on import line and doesn't show auto complete suggestion.
How can I make VSCode understand that packages are installed in root folder and use it for giving auto complete suggestion and remove red underlines under package import.
I had this issue when turning an existing project into a workspace of a larger project. Here are the steps that worked for me:
Delete package-lock.json and node_modules/ from the subdirectory
Restart VSCode, opening it to the project's new root directory
I think step (2) was the key to making it work, but I don't know for sure.

Error when trying to reference a github repository

I am using angular 2 and I am trying to reference a github repo directly instead of an npm package in order to debug but the project does not compile.
In my packages.json I changed "primeng": "4.2.2", with "primeng": "git+https://github.com/primefaces/primeng.git"
When I build I get following errors
ERROR in multi ./node_modules/simple-line-icons/css/simple-line-icons.css ./node_modules/font-awesome/css/font-awesome.css ./node_modules/famfamfam-flags/dist/sprite/famfamfam-flags.css ./node_modules/bootstrap-select/dist/css/bootstrap-select.css ./node_modules/jquery.uniform/dist/css/default.css ./node_modules/toastr/build/toastr.css ./node_modules/sweetalert/dist/sweetalert.css ./node_modules/jstree/dist/themes/default/style.min.css ./node_modules/jtable/lib/themes/metro/blue/jtable.min.css ./node_modules/morris.js/morris.css ./node_modules/bootstrap-daterangepicker/daterangepicker.css ./node_modules/bootstrap-switch/dist/css/bootstrap3/bootstrap-switch.min.css ./src/app/shared/core.less ./src/app/shared/layout/layout.less ./src/assets/bootstrap-datepicker/css/bootstrap-datepicker.min.css ./node_modules/eonasdan-bootstrap-datetimepicker/build/css/bootstrap-datetimepicker.min.css ./src/styles.css ./src/fonts.css ./src/Test-palette.css ./src/app/risk-management/styles/module-styles.css ./src/primeng-chips.css ./src/primeng-datatable.css ./src/primeng-multiselect.css ./src/primeng-sidebar.css ./src/animations.css ./node_modules/primeng/resources/primeng.min.css ./node_modules/primeng/resources/themes/redmond/theme.css ./node_modules/#angular/material/prebuilt-themes/indigo-pink.css ./node_modules/loaders.css/loaders.min.css
Module not found: Error: Can't resolve 'C:\SourceControl\Test\TestProject\src\TestProject.Client\node_modules\primeng\resources\primeng.min.css'
When I check the node modules/primeng I only see these files:
What am I doing wrong?
NPM primeng package was built for distribution and has resources directory, while Github repository contains only source files. This is very common among NPM packages.
Since Github repo source is used for the purpose of debugging, the solution is to build the package manually. Considering that resources are built with Gulp and not generic NPM build script, it should be something like:
cd ./node_modules/primeng
npm i
gulp build-assets
You do not need the github.com prefix there, this should be enough:
"primeng": "primefaces/primeng"
More about this here: https://docs.npmjs.com/files/package.json#github-urls
Problem is that the resources folder is ignore via .gitignore. There is a gulpfile.js, that is responsible for creating it. You could run that manually if you want to use github version directly.
https://github.com/primefaces/primeng/blob/master/gulpfile.js

Activating extension `ms-vscode.wordcount` failed: Cannot find module 'd:/VSCode/vscode-wordcount/out/extension'

I try to build and debug an extension in Code.
I downloaded the sample of word-count from https://github.com/microsoft/vscode-wordcount.
When I clicked F5, ./out folder was not generated and I saw failure: Activating extension ms-vscode.wordcount failed: Cannot find module 'd:/VSCode/vscode-wordcount/out/extension'.
I found the post
https://github.com/Microsoft/vscode-go/issues/35
and I think this was because I failed to build the extension.
And I checked my path that node and npm were both set.
I found there were 2 possible issues.
I could not find .\node_modules folder in my extension folder. The folder structure is like
.vscode\
-- launch.json
-- settings.json
-- tasks.json
image\
test\
typings\
-- vscode-typings.d.ts
extension.ts
package.json
tsconfig.json
My node version is v0.12.2.
Could you give me some hints how to investigate the issue?
You probably downloaded directly from GitHub.
You will need to run npm install in your project's folder in order to create the node_modules directory and add the required dependencies.
If you simply want to install the extension to use it, you will also need to:
Move the folder to the correct place
npm install
OR
Install the built version directly from the Visual Studio Marketplace through the command pallet.

Resources