all of sudden, I encountered something I cannot handle
when I do "create-react-app" and want to compile something,
it takes too.... much time to compile
most weirdly, it is only occurred when I change "components"
like typing "too slow " and after save it,
compiling takes too much time.
changing css is not the case of it. it is immediately complied and applied
only components changing has problem of compile speed.
I tried html file with live server, but it is compiled very fast.
so I think create-react-app has something wrong but I cannot understand of it
+
recently when I use "npx create-react-app . --template typescript" ,
when I do "npm run start" it changes tsconfig and makes lots of error about
"jsx" system
what's wrong with it. can anyone help me about my problem?
I assume you are having the problem of VSCode warns about the --jsx flag inside the tsconfig.json, that can be seen here.
You can fix like in here.
P.S: It would be very cool if the next time asking questions, you could format and proofread so that what you write is easier to understand.
Related
I'm trying to learn ReactJS. I just upgraded my dependencies' versions. I was using "npm start" command always for run my server. When I try that code I'm getting an annoying error like "webpack 5.65.0 compiled with 2 errors in 769 ms". I couldn't find my errors. I'm not a real developer. I'm just trying to learn and I'm stuck on this issue.
That's really complicated. So, I just want to uninstall Webpack. You can agree or disagree my idea but Webpack is really annoying. I'm really hate about this stupid thing. I didn't make any changes to my codes. I just updated the version of dependencies. Please help me. I couldn't uninstall Webpack and restore my simple and clear error screen that I am used to.
Updated react-scripts from 3 to 4.0.1 with all underlying packages (react#17, typescript#4.1 and eslint#7.14), now it shows Failed to compile. in the console with tons of prettier problems like they are errors. Used to run fine before, showing only Eslint warnings. Also if I hit save on any clean file under watch it recompiles fine (but again, used to show Eslint warning, which I would like to see there). Went through their docs and didn't find a way to configure this behavior, can it be?
I have used create-react-app and installed node-sass as a depandency. The react version is V16.13.1., and the node-sass version is V4.14.1. Both should be the latest version as then.
My question is if I use #debug $some-variable in my scss file, it doesn't show up in my terminal. However, what is interesting is when I kill the terminal and restart it again, it pops up for a fraction of second and disappear again. The same happens to #warn rule as well.
The workaround is to use #error instead, #error rule always intercepts the terminal and 100% pops up errors, I used it as a work around to debug my scss code.
But I believe the problem is on node-sass side, #debug/#warn should print out something, but just got overwritten on react scripts side, i.e. by "react-scripts start" script. In my opinion, there should be a way to block react side to do that, and persist the stdout info on the terminal. Maybe add a flag into node-sass or modify the start script on react side?
I hope I got the problem addressed properly. Does anyone has experience on this issue? Please advise.
Example code:
In foo.scss file:
#debug "hello world" // it does not print anything in terminal
#warn "this is a warning" // it does not print anything in terminal either
#error "it definately catch this" // the error shows up in terminal only
I'm learning graphql and installed the library npm install graphql --save, which worked. However, when trying out the code for the server, the keyword Query seems to be having an issue, it's telling me I need a comma. Any advice is appreciated.
My first problem was not making sure the code within buildSchema was a string. After realizing that...
TS1208 "Cannot compile namespaces when the isolateModules flag is provided.
isolateModules is a TSConfig.json option.
If you run this code with 'node server.js' it works.
The error is misleading and doesn't appear to affect anything.
I'm having a most unusual and frustrating problem.
I have an Ng2 component called via-date-picker that I am trying to NPM publish so that it can be easily used in other projects. In order to do so, I have made it into an Angular2 component library. The via-date-picker exports a module called ViaDatePickerModule, which I want to import elsewhere.
In order to test and make sure that it is being published correctly, I am NPM-installing and importing it into an otherwise empty Angular-CLI project that I am calling npm-test.
So I run my npm-test application using "ng serve", and I get this error:
ERROR in ViaDatePickerModule is not an NgModule
webpack: Failed to compile
Yet despite that error, the project compiles anyway:
And when I open up my project, lo and behold, everything works!!
But this only happens the first time that I run the project. On successive attempts to run the project via "ng serve", I get the same compilation error, but this time the project just flat-out refuses to complete it's compilation:
I have no idea why I'm getting this error, and why Angular-CLI will run my project sometimes but not others.
I've scoured the web for answers and tried every solution I can find for this error, as well as every other thing I can think of:
I've tried adjusting the tsConfig settings in my component library
I've tried using rollup.js instead of gulp.js to build my component library
I've tried copying existing, working component libraries, then carefully swapping out the existing code for my own
I've downgraded Angular CLI
I've upgraded Angular CLI
I've downgrade Typescript
I've upgraded Typescript
I've deleted and re-installed node_modules several times
I've deleted and re-started my whole project twice
No matter what I do, I keep coming to the same webpack error that I posted above; that ViaDatePickerModule is not an NgModule. I'm completely out of ideas. Any help that anyone could provide would be crazy helpful.
For the sake of complete thoroughness, I've created a public repo on github here containing all the files involves, divided into two main directories:
COMPONENT_BEFORE_PUBLISHING: contains the component library from which I am running "npm publish"
WHAT_IS_IMPORTED_INTO_NODE_MODULES: contains the resulting directory that is being imported into the node_modules directory of my npm-test project
Again, any help that anyone could provide would be extremely, extremely appreciated! Really, I would be eternally grateful.
If you are %100 sure that ALL of your consumers will import your components, modules ...etc from a TS project such as angular-cli. You can publish your TS source directly without transpiling. Ie. you'll be publishing static .ts files that can be imported in any project that will do the transpiling for you.
However, if your want your library to also be consumed as a JS es5 or es6 module, then you should transpile.
Also, you can try the angular compiler ngc instead of the typescript compiler tsc? ngc is a wrapper around tsc. You could start there, There are many library starters put there that can help you start an angular library and get it optimized for AOT compilation.