Problem with webpack while runnig React project - javascript

I trying to run React project but getting following error. I tried reinstall node_modules, changed node version but without success.

I'm not sure Webpack version, but I can see webpack is saying applyWebpackOptionsPlugins is not a valid property. If you will remove it, error will be vanish.

Related

React: Unable to start old projects. Why?

I am unable to npm start my old React projects (created in October and before, ex: https://github.com/DebojyotiRoy15/Calculator-app). When I try to do it, I get the following error:
I have tried various things suggested in stackoverflow to solve this error, like adding a .env file to the root, deleting package-lock, deleting node modules and then installing them. But still this error persists. Please help me to resolve this.
I managed to run your app without any issues, check it out here https://codesandbox.io/s/wizardly-dream-s5w2e. Your error is probably due to some package resolving behavior of Node.JS. Try renaming the C:\Users\Pavilion\node_modules\babel-jest", and if it didn't help then run npm i babel-jest --save-dev and reload your app again.

Getting error while setting up linting for Vue.js library

I'm trying to setup linting in my project. I was referring this link (https://habr.com/en/post/436176/) for the same. When I run npm run lint it executes and shows me some error but later on it throws me an error. I'm not sure if its the right process or not. Can anybody help me setting up linting for my vuejs project.

Third party library (react-dev-utils/webpackHotDevClient) gets empty object on require('chalk')

I am running a react app using the Webpack dev server. In the config, I have 'react-dev-utils/webpackHotDevClient' as a party of the entry array.
This prompts the following error:
I can't figure out what could be causing this.
I have verified that chalk is present in the node_modules folder, and it's the correct version.
I am using yarn workspaces, and the node_modules is in a root directory. Maybe this could be causing the error. However, I have no idea how to fix it.
The Webpack config I am using can be found here: https://gist.github.com/Fralleee/ba768298932722c6494a1759ab4def31
"Resolved" the issue by downgrading "react-dev-utils" to version "7.0.1". Don't know why e.t.c.
Found this thread with some information:
https://github.com/facebook/create-react-app/issues/6214

Why is typescript compiler changing my tsconfig.json file on server start up?

I'm trying to move my react app to a react-typescript app. firstly, this seems really tricky which is disappointing
the issue I'm having is that I get typescript errors in my console. I'm trying to fix them by changing my tsconfig.json file
but whenever I do and restart the server, I get a message in the console saying: the following changes are being made to your tsconfig.json file
and then it lists the changes which are basically "undos" of the stuff I've just added or changed. why would it do this?
it is a create-react-app project and I followed this to migrate to typescript: https://facebook.github.io/create-react-app/docs/adding-typescript
You can manually add a tsconfig.path.json file with all the compilerOptions included and add "extends": "./tsconfig.path.json" to your tsconfig file.
I had the same issue as the tsconfig file was being overwritten as soon as I run react-scripts.
I had older react-scripts version
"react-scripts": "^2.1.3"
I changed it to latest version
"react-scripts": "^5.0.0"
And now it doesn't modify the tsconfig.
The error eventually went away after upgrading to the latest version of Typescript
I have been getting this issue for my React 17 project. Every time I run npm start, it overrides whatever I configure in {jsx: ...} with react-jsx in order to be compatible with JSX transform in React 17. And it shows the following message:
The following changes are being made to your tsconfig.json file:
compilerOptions.jsx must be react-jsx (to support the new JSX
transform in React 17) The problem is VSCode using an older version of
typescript (4.0.3), while the typescript version shipped with the
project is (4.1.2).
SOLUTION:
The following did the trick for me:
In visual studio:
Go to the command palette and press CTRL+Shift+P.
Choose "TypeScript: Select a TypeScript Version...".
Choose "Use workspace Version".
if you are using Create React App, you can add the following in your .env file. Then restart the server. it should work.
DISABLE_NEW_JSX_TRANSFORM=true
Ejecting from create-react-app worked for me.
Command: npm run eject

Why does npm try to compile a old version of my code?

I'm totally new to npm and node.js so please forgive me if I'm not giving the right detail. I'm writing a plugin for a website that uses an out-of-the-box framework in npm. It was working fine as I coded away happily, but at some point it started trying to compile a file that no longer exists.
I use npm run start to compile my html file (which contains all the javascript code as well) and get this error:
ℹ info Compiler will compile ./src/plugin.html
ℹ info Transpiling with babel
✖ error Error
SyntaxError: unknown: Unexpected token (555:3)
553 |
554 |
> 555 | });
| ^
What breaks my brain is that this simple syntax error is not present in ./src/plugin.html (I've quadruple checked this fact). This obvously pertains to an earlier version of the file.
Does npm have some kind of cache that would cause it to compile an older version of a file? I've noticed that if I remove most of the code, it compiles again, but when I replace the code it breaks again. It seems that if the file is somewhat similar to its cached version, it tries to compile the cached version and not the current version.
I've tried clearing the cache with npm --force cache clear but to no effect.
Any suggestions?
For anyone who has a similar problem with compiling code with npm, I discovered that my problem was indeed a simple syntax error. But it seems that npm became confused about what the compile error actually was. It was pointing to a line of code that did not exist in the file, and I have no idea where it got this from.
The syntax error that was the culprit in this particular case was a missing }; to close a wrapped set of functions.
So it seems that the lesson here is not to put too much trust in npm's ability to understand what syntax errors are inciting a compile error.
the only way I was able to get out of this scenario was:
rename the file
refactor the references to it, so it will compile
npm start
stop it
rename and refactor the file back to its original name
Do you try to use rebuild or something like that or npm cache clean insted of npm --force cache clear?
I had the same problem after a cancelled git rebase. The only way I could fix this was to change something in those files & revert the change after.
I recently faced this issue. If you are using typescript in your project, you may have used a wrong configuration in your tsconfig.json file that may have built the typescript files into their corresponding js files and these js files are the ones that runs every time you run the project.
for me clear catching my browser it works
Fixed by Pressing Ctrl+s !
For me vsc by default doesn't save automatically changed code like PyCharm.
Try to delete .next folder it will delete the catched files

Categories