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.)
Related
So this is lately one of the most popular issues in discord.js community. Appears after updating to d.js v13.7.0 and higher. While it works perfectly on a PC or etc., it fails to run on Heroku hosting with the following message:
Error: Cannot find module '../Modal'
This is clear that the issue is on Heroku's side, because Modal file can be found in discord.js dependency folder in node_modules.
I have NodeJS v18.3.0, have tried reinstalling discord.js with multiple methods, nothing helped.
I wasn't able to find any solutions to the problem, have anyone over here found the solution?
Im pretty sure that you didn't create a file called .gitignore because it shows that your problem is on the folders '../Modal', Before deploying it to heroku, you should ignore the 2 files on your project.
node_modules
.env (if you have)
To remove these 2 on your deploying, create a file on your main folder named .gitignore and right down the following:
node_modules
.env
I've got quite some experience in (web) development (Java, ASP.NET and PHP amongst all), and fairly new to React and Node JS.
Although I did multiple tutorials and read multiple articles, I feel like I'm missing some point here and there. Currently I'm working on a React app which implements a nice HTML template I found.
One React tutorial I did used Webpack for building and deploying the app (local). This works nice, does the job of transpiling ES6 (.jsx) and SASS using babel. So far so good :)
My template has an image slider (Owl Carousel), so I installed the react-owl-carousel module.
This gave me quite some problems with jQuery (also installed as a module).
After several attempts to fix this I decided to move on to another slider module, React Awesome slider.
I used the module as the README.md explained. But upon building it (npm run build), I got an error that the .scss file within react-awesome-slider could not be transpiled. A message like "are you missing a loader".
So I installed sass, node-sass, sass-loader etc etc and configured these in my webpack.config.js.
I also noticed the react-awesome-slider module within node-modules contained a webpack.config.js.
Long story so far, sorry, now to the essence of this question.
In what way can the modules installed (like react-awesome-slider) be considered "black boxes"?
It doesn't feel logical that all the modules get build when building the main app. The "exclude: /node_modules/," config in webpack.config.js prevents this, not?
So why does the react-awesome-slider give an error about .scss transpiling? I had no .scss rule in my webpack config then.
Will all dependend modules automatically get installed when installing a new module? So when I run "npm i react-awesome-slider --save-dev", will its dependencies also be installed? Or is this not necessary? And do I need to update (webpack) configuration after installing a new module? Or is it really black box and "self-containing"?
Any help would greatly be appreciated!!! Maybe there is a good react-webpack sample app on Github or something like that?
That also confusing me for a really long time. Here are some answers to your question.
people publish packages to the NPM, so a module your project depends on
can be pre-builded or source code, it depends. I have checked react-awesome-slider, it's main field in package.json is dist/index.js, directly import it won't cause an issue because there are no SCSS files.If you follow the CSS module usage instruction you have import react-awesome-slider/src/styles and you will find src/styles.js file import ../styled.scss,so webpack will load it with SCSS loader which you have not configured, that's why an error occurred.
while you install modules, npm will go
through its dependency tree, install its dependencies, dependencies'
dependencies, until there's no more dependency module to install. before npm 3.0 the node_module folder is tree structure reflects the dependency tree, but it causes problems that many modules relay on the same dependency, npm will download and save too many same files, after version 3.0 it becomes flat(release note here, search flat keyword).
You don't need to update your webpack config after you install a dependency cause webpack build process will handle it with file dependency tree. You have installed a package and import it in your activation code, file there will be handle( with its package.json main field file as an entry), you have installed a package without using it or import it in a dead file(dead file means you cannot find it from webpack entry file), it will be ignored by webpack as it's dead code.
I have too many confuse until I read npm docs. Good luck to you.
Node modules are build to execute packages.When the are compiled they have proper configuration to handle extensions that are imported in it and when you import something like .scss in your main app then it does not know about that extension then your webpack need rules to include that extensions.
It does exclude node_modules as the are pre-converted pr pre build.
More over webpack is bit tough so developers create CRA Have look at it.
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
I am starting up with angular. I have a basic angular template project ready, with some of my changes done in it:
When I do ng serve, it starts correctly in the browser.
When I copy paste it in vscode to create duplicate, it seems that it does not fully copy pastes it:
Now when I do ng serve inside this project folder, it gives me following error message:
PS E:\workspaces\angular-course\5-second-app-proj-template> ng serve
Could not find module "#angular-devkit/build-angular" from "E:\\workspaces\\angular-course\\5-second-app-proj-template".
Error: Could not find module "#angular-devkit/build-angular" from "E:\\workspaces\\angular-course\\5-second-app-proj-template".
at Object.resolve (C:\Users\anir\AppData\Roaming\npm\node_modules\#angular\cli\node_modules\#angular-devkit\core\node\resolve.js:141:11)
at Observable.rxjs_1.Observable [as _subscribe] (C:\Users\anir\AppData\Roaming\npm\node_modules\#angular\cli\node_modules\#angular-devkit\architect\src\architect.js:132:40)
at Observable._trySubscribe (C:\Users\anir\AppData\Roaming\npm\node_modules\#angular\cli\node_modules\rxjs\internal\Observable.js:43:25)
at Observable.subscribe (C:\Users\anir\AppData\Roaming\npm\node_modules\#angular\cli\node_modules\rxjs\internal\Observable.js:29:22)
at DoOperator.call (C:\Users\anir\AppData\Roaming\npm\node_modules\#angular\cli\node_modules\rxjs\internal\operators\tap.js:29:23)
at Observable.subscribe (C:\Users\anir\AppData\Roaming\npm\node_modules\#angular\cli\node_modules\rxjs\internal\Observable.js:24:22)
at C:\Users\anir\AppData\Roaming\npm\node_modules\#angular\cli\node_modules\rxjs\internal\util\subscribeTo.js:22:31
at Object.subscribeToResult (C:\Users\anir\AppData\Roaming\npm\node_modules\#angular\cli\node_modules\rxjs\internal\util\subscribeToResult.js:7:45)
at MergeMapSubscriber._innerSub (C:\Users\anir\AppData\Roaming\npm\node_modules\#angular\cli\node_modules\rxjs\internal\operators\mergeMap.js:75:38)
at MergeMapSubscriber._tryNext (C:\Users\anir\AppData\Roaming\npm\node_modules\#angular\cli\node_modules\rxjs\internal\operators\mergeMap.js:72:14)
How should I duplicate my template angular project, to start up with new one. I went to Windows File Explorer and found that the angular project contained 28241 files, 3644 folders and is of 241 MBs. Copying this in Windows File Explorer also takes a lot of time. Am I doing anything wrong?
You forgot to copy the src folder into your duplicated project. And all project config inside a package.json are missing. You also missing all angular-cli necessary dependencies.
First:
go into your second project and make sure all files from your first project are successully copied. i.e following: src folder, package.json, tsconfig.json, tslint.json, etc...
You should go into your windows explorer folder and copy all the files and folder (excluding the node_modules folder) into your second project.
second:
if all files are copied, run npm install inside your new project in order to generate a new node_modules folder. Then ng serve should work fine as expected.
I put some common code in this local module called 'client-common'. In one of the app project using this common module, I add this to package.json dependencies:
"client-common": "../client-common"
After npm install the module gets copied to node_modules. When I run (it's an Ionic project) ionic serve, it builds all fine, but at runtime in the browser I get
Runtime Error
Cannot find module "client-common"
I'm assuming this is a webpack issue? The question is why is the local module treated differently and not bundled at all?
It seems that I was supposed to supply an index.js in the common module. After adding an index.js duplicated from the existing index.d.ts, exporting everything, it just works now.