I upgraded angular to 4 and angular cli to 1.03.
After I run the command npm ls typescript I get:
+-- #angular/cli#1.0.3
| `-- typescript#2.2.2
`-- typescript#2.2.2 invalid
npm ERR! invalid: typescript#2.2.2 C:\development\projects-git\mydoc\static-web\node_modules\typescript
What's the difference between the first and the second typescript, why is the second one invalid/how do I fix it?
I think the error above is the reason why I get the error below so I hope there is a fix for both so I can run my application again.
ERROR in AppModule is not an NgModule
ERROR in ./src/main.ts
Module build failed: TypeError: Cannot read property 'newLine' of undefined
at Object.getNewLineCharacter (..\static-web\node_modules\typescript\lib\typescript.js:9580:20)
at Object.createCompilerHost (..\static-web\node_modules\typescript\lib\typescript.js:66674:26)
at Object.ngcLoader (..\static-web\node_modules\#ngtools\webpack\src\loader.js:202:31)
# multi webpack-dev-server/client?http://localhost:4200 ./src/main.ts
I had a similar issue where i even had two different typescript versions listed when i did npm ls typescript.
What's the difference between the first and the second typescript
The first one is listed as a dependency of #angular/cli, the second one is a dependency of your own project.
why is the second one invalid/how do I fix it?
In my case, i had typescript defined under both, dependencies and devDependencies section in my package.json.
I removed it from dependencies and the duplicate output disappeared.
Related
Still somewhat of a beginner in Node, so apologies for what might be a newbie question. I have a small Chrome extension that I built where the only imported node module is one called node-fetch. I've never had trouble running yarn build to build a package that includes all the requisite dependencies. However, when I try to build my current package, yarn throws this error in the console:
🚨 /Users/me/Documents/GitHub/my-project/node_modules/node-fetch/src/index.js:9:17: Cannot resolve dependency 'node:http'
7 | */
8 |
> 9 | import http from 'node:http';
| ^
10 | import https from 'node:https';
11 | import zlib from 'node:zlib';
12 | import Stream, {PassThrough, pipeline as pump} from 'node:stream';
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
ERROR: "build:bg" exited with 1.
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
So, this error is coming from the node_modules file myself rather than the code I wrote. Inside the package.json, I only declare this one dependency:
"dependencies": {
"node-fetch": "^3.3.0"
}
I tried manually installing the referenced packages and referencing them in the dependencies but to no avail.
What am I missing?
Tried to yarn build a package with a dependency on the node-fetch module that I import into my code. yarn throwing an error on the node-fetch module itself when I attempt to build.
Reverting to ^2.6.1 resolves the problem. Still interested to learn a better solve.
I have a react application that was created with create-react-app and is using react-scripts version 3.4.2. The app works great but when I run eslint against it I get many invalid no-unused-vars errors. By invalid I mean that when I go to the file that variable is actually being used.
Based on this answer it seems the issue is related to #typescript-eslint/parser and #typescript-eslint/eslint-plugin. So I went ahead and executed npm list #typescript-eslint/parser #typescript-eslint/eslint-plugin on my app and this is what I get:
myapp#0.1.0 /Users/diego/myapp/client
└─┬ react-scripts#3.4.2
├─┬ #typescript-eslint/eslint-plugin#2.34.0
│ └── #typescript-eslint/parser#2.34.0 deduped
├── #typescript-eslint/parser#2.34.0
└─┬ eslint-config-react-app#5.2.1
├── #typescript-eslint/eslint-plugin#2.34.0 deduped
└── #typescript-eslint/parser#2.34.0 deduped
As seen all occurrences of the two potentially conflictive libraries are included by react-scripts app and that is why I am trying to update it.
I tried updating to 4.0.3 and when I do that eslint starts to work fine (those incorrect no-unused-vars are gone) but my app is unresponsive (I click on different buttons and/or links and nothing happen). The only error I see in the console after the update is this one:
Uncaught ReferenceError: process is not defined
at Object.4043 (<anonymous>:2:13168)
at r (<anonymous>:2:306599)
at Object.8048 (<anonymous>:2:9496)
at r (<anonymous>:2:306599)
at Object.8641 (<anonymous>:2:1379)
I was searching this error and I found this question. The error is the same maybe not what the developer describes but reading through the answers I see many of them point to react-scripts as the root cause and that maches my scenario.
I tried some of the solutions in that question, in particular method 1 from this answer (I did not try method 2 because I am not sure if adding craco is what I want) and the solution from this other answer too but they do not work.
I also tried updating to react-scripts version 5 but I get A LOT of errors.
Is someone facing this issue or at least has some clue that could help me?
Thanks in advance.
The error message that you shared seems to be related to a bug with react-error-overlay.
react-scripts 4.0.3. uses react-error-overlay 6.0.9. However, 6.0.10 is marked as a patch, so npm uses 6.0.10 instead of 6.0.9, but 6.0.10 is not compatible with 6.0.9.
On the other hand, react-scripts 5 does not use react-error-overlay, but might be causing breaking changes with your other packages, hence the other errors.
You can find more information about the react-error-overlay bug in these issues on the CRA repository:
Hot Reload Fails, DOM adds an additional iframe containing entire
contents of the html DOM element #11880
Is this the bug of react-error-overlay? #11773
v5 Regression react-error-overlay build - Uncaught ReferenceError:
process is not defined #11771
Here's a possible solution with react-scripts 4.0.3.:
In your project's package.json file:
In dependencies, ​set the react-scripts version to 4.0.3.
Under dependencies, in resolutions, add react-error-overlay 6.0.9.
In devDependencies, add react-error-overlay 6.0.9.
"dependencies": {
...
​ "react-scripts": "4.0.3",
...
},
"resolutions": {
​"react-error-overlay": "6.0.9"
},
...
"devDependencies": {
...
"react-error-overlay": "6.0.9",
...
}
Delete your project's node_modules folder and package-lock.json file.
Run npm install.
Run npm install react-error-overlay#6.0.9.
If I have the following monorepo set up
packages/app1 has is-even in it's package.json
packages/app2 does not have is-even in its package.json
packages/app2 tries to use is-even
Then currently, I don't get any warning from something like eslint-plugin-import, when preferably, I would like an error because if I publish app2, then any user that tries to install it from NPM will receive errors because it does not properly specify that it needs is-even as a dependency
Reproducible case here with a minimal monorepo https://github.com/cmdcolin/yarn_workspaces_eslint_plugin_import
This was fixed by adding
extends:
- eslint:recommended
- plugin:import/recommended
rules:
import/no-extraneous-dependencies: error
This makes it detect the error properly, e.g. this message is expected and good now
yarn run v1.22.15
$ eslint .
/home/cdiesh/test/packages/app2/src/index.js
1:1 error 'is-even' should be listed in the project's dependencies. Run 'npm i -S is-even' to add it import/no-extraneous-dependencies
✖ 1 problem (1 error, 0 warnings)
Details: running OS 10.11, using Angular version 1.2.6, npm 5.3.0, node 8.2.0.
So I'm learning Angular for the first time, and I keep running into the same problem where if I create a new project using 'ng new [PROJECT]' and then use 'ng serve' it compiles and displays properly, but then if I try to use 'ng g c [NEW_COMPONENT]' then it breaks the project. Specifically, it says that 'Module Not Found: Error: Can't resolve [PATH]' and it gives a valid path for the component, the path that ng itself generated. What's going on here? I've tried uninstalling #angular/cli and node and npm several times and I can't seem to get Angular to reliably generate new components on its own. What am I doing wrong here?
ERROR in /Users/{USER}/Dropbox/angularprojects/shadowrun-inventory/src/app/app.module.ts (5,36): Cannot find module './src/app/inventory/inventory.component'.
ERROR in Error encountered resolving symbol values statically. Could not resolve ./src/app/inventory/inventory.component relative to /Users/{USER}/Dropbox/angularprojects/shadowrun-inventory/src/app/app.module.ts., resolving symbol AppModule in /Users/{USER}/Dropbox/angularprojects/shadowrun-inventory/src/app/app.module.ts, resolving symbol AppModule in /Users/{USER}/Dropbox/angularprojects/shadowrun-inventory/src/app/app.module.ts
ERROR in ./src/app/app.module.ts
Module not found: Error: Can't resolve './src/app/inventory/inventory.component' in '/Users/{USER}/Dropbox/angularprojects/shadowrun-inventory/src/app'
# ./src/app/app.module.ts 10:0-77
# ./src/main.ts
# multi webpack-dev-server/client?http://localhost:4200 ./src/main.ts
webpack: Failed to compile.
This is the error I receive. What am I doing wrong here?
I'm creating a new React project and I have a dependency issue between react-router and history :
ERROR in ./~/react-router/lib/match.js
Module not found: Error: Cannot resolve module 'history/lib/Actions' in /app/node_modules/react-router/lib
# ./~/react-router/lib/match.js 15:15-45
ERROR in ./~/react-router/lib/useRouterHistory.js
Module not found: Error: Cannot resolve module 'history/lib/useQueries' in /app/node_modules/react-router/lib
# ./~/react-router/lib/useRouterHistory.js 6:18-51
ERROR in ./~/react-router/lib/createMemoryHistory.js
Module not found: Error: Cannot resolve module 'history/lib/useQueries' in /app/node_modules/react-router/lib
# ./~/react-router/lib/createMemoryHistory.js 6:18-51
ERROR in ./~/react-router/lib/useRouterHistory.js
Module not found: Error: Cannot resolve module 'history/lib/useBasename' in /app/node_modules/react-router/lib
# ./~/react-router/lib/useRouterHistory.js 10:19-53
ERROR in ./~/react-router/lib/createMemoryHistory.js
Module not found: Error: Cannot resolve module 'history/lib/useBasename' in /app/node_modules/react-router/lib
# ./~/react-router/lib/createMemoryHistory.js 10:19-53
ERROR in ./~/react-router/lib/browserHistory.js
Module not found: Error: Cannot resolve module 'history/lib/createBrowserHistory' in /app/node_modules/react-router/lib
# ./~/react-router/lib/browserHistory.js 5:28-71
ERROR in ./~/react-router/lib/hashHistory.js
Module not found: Error: Cannot resolve module 'history/lib/createHashHistory' in /app/node_modules/react-router/lib
# ./~/react-router/lib/hashHistory.js 5:25-65
ERROR in ./~/react-router/lib/createMemoryHistory.js
Module not found: Error: Cannot resolve module 'history/lib/createMemoryHistory' in /app/node_modules/react-router/lib
# ./~/react-router/lib/createMemoryHistory.js 14:27-69
I'm using react-router last release 3.0.0 which has history 3.0.0 as a dependency in its package.json.
I'm using npm version 3.10.8 and even if history module is installed by react-router dependency, I added it in my package.json too, as stated in react-router docs.
Thing is react-router is searching its requires in history/lib/ while history module has its files in history/ (no lib folder).
Since it doesn't depend on my configuration/installation but on third parties modules, I don't see what to do and I'm surprised to not find any issue regarding this.
The problem is actually to follow react-router installation instructions, adding history module in our own package.json.
Installing the last version of history on your own instead of the one required by react-router is creating this conflict.
With react-router >= 3.0, history is a dependency with a fixed version requirement, installed along with react-router itself :
└─┬ react-router#3.0.0
└── history#3.2.1
no need to install it manually in your package.json, it will create conflicts if you don't specify the right required version.
Thanks to #ShubhamKhatri for having pointing me in this direction.
If you are using npm version greater than 3.0.0 .
Note that you need to also install the history package since it is a peer dependency of React Router and won't automatically be installed for you in npm version freater than 3.0.0.
Run npm install history and you should be good.
The path needs to be updated it is no longer
history/lib/createHashHistory
It's just
history/createHashHistory
React Training Link
Also probably import HashRouter from react-route-dom. HashRouter replaces Router and no need to pass history as a prop anymore.