I have an angular application I haven't touched in a while. I haven't made any changes since the last time it was working. Now I need to modify a few things. But the application won't serve locally so I can't make the changes. I don't understand what's wrong.
The npm install worked just fine and I don't have any code errors preventing it from running. I get the following error message when trying ng serve, but it seem extremely unhelpful. Any ideas?
Unfortunately without an exact reproduction of your project this will be really hard to pin point, but looking at what is given in the screen shot and prior experience with similar issues, I think this could be an issue with your package.json. Newer versions of node and npm look for the carets symbol (^) in both your package.json and the installed modules' package.json. When found, it will install newer versions of the package without error. Then when you go to run the project, the typings will break and Angular will refuse to compile and you get errors like these.
I would recommend removing all carets in older Angular projects to prevent this from happening as it is common occurence even when upgrading from more modern versions (I had this happen to me when upgrading from Angular 13 to Angular 14). However, with Angular 1.7/AngularJS not being supported anymore, I would recommend that you look into upgrading or rewriting the project in a modern version of Angular or another modern framework that fits the projects needs.
Related
I have a project that uses Webpack for bundling and ESLint for code quality. I just upgraded from Webpack 4.35.2 to version 5.64.2, which seems to have broken the ESLint test.
The project has a third-party dependency that itself uses Webpack v3 and relies on NamedModulesPlugin which existed in that version. This was still present in v4 but removed from v5 and I now get the error TypeError: webpack.NamedModulesPlugin is not a constructor when running the ESLint test.
Obviously, the dependency is not using version 3 as specified in its own package.json but rather the version of the main project. This is clearly very wrong and I don't understand how this is even meant to work.
I'm using eslint-plugin-import and eslint-import-resolver-webpack to resolve the import statements in my source files and I guess that simply doesn't handle incompatible versions of the same package used across the dependency tree? Everything works fine when running and building the project.
I'm at a loss as to how I can resolve this or work around it so if anyone has any pointers I would greatly appreciate it!
Rather than having a single bundle for my rollup react app in development, I split it into two bundles. One for the dependencies and one for the app itself.
This way the watch mode stays fast (as it now doesn't has to parse the dependencies continously) and I don't have to write (or use third party) es module wrappers for libraries such as React.
While the code is bundled without any errors, I run into TypeError: React is undefined while running it. When I check the network panel in developer tools I do see the dependency bundles getting downloaded.
Here is how I am using rollup with its API.
You can see the rest of the relevant code here.
Can anyone point out what am I doing wrong? Any help appreciated!
This is a bug in the latest #rollup/plugin-commonjs version (14.0.0). It was fixed with the merge of this PR, but this hasn't been released to NPM yet. I went and built the latest version from GitHub, and used it with the repo in question, and React is now working.
So for now the solution is to use the latest source on GH until the next version is published.
I've entered the brave new world of MVC core and using NPM to get various JavaScript packages. However, I've hit a problem which I'm not entirely sure what the best option to solve is. Just to set the scene, I've got a gulpfile which is copying JS from various NPM packages in my project (such as jQuery and bootstrap etc...) to the 'wwwroot/lib' folder.
I now want to add a typeahead 'autocomplete' search box to a particular view, so I added typeahead to the package.json file and updated my gulpfile to copy the additional *.js files to 'wwwroot/lib'. All fine so far, the problem is when I debug my project and open that particular page I get an error where the typeahead.js file has some code at the beginning:-
require('xtend')
I wasn't aware of this command in JavaScript, but a quick search on the internet reveals this is part of JS when run on 'node' or node.js?
I have not used 'node' before (yes, ignoring the fact I'm using NPM to get packages - I only ended up doing that due to a Visual Studio bug in how Bower works) so the question is how do I now get (this particular) typeahead to run within a browser? So I figure options are:-
1) just manually download typeahead instead - but is that not defeating the point of having all these package managers in the first place?
2) start using Bower again (don't think the 'version' bug has been fixed yet)
3) use something to 'fake' the node 'require' commands so that it will work in browser
4) something else...
I've seen a few things that may solve this problem on the internet, but I didn't want to spend ages sorting out a fix which may be the complete wrong way of doing it. Has anyone any suggestions for the best route to follow?
Scratch that, I found another typeahead package on NPM called 'typeahead.js' instead of 'typeahead' and this is just standard JS no NODE stuff. Works perfectly in browser
I was trying to upgrade my RN from 0.19 to 0.27 using the commands from the doc,
i.e.
npm install --save react-native#0.27
react-native upgrade (I chose the overwrite option when asked to update the latest RN files)
The npm install step worked fine but the upgrade step wiped out all my code in android plugin folders and any changes made to MainActivity.java. My environment is : MacOS, Genymotion, Android development
Thanks!
You've missed that react-native upgrade asked you if you want to overwrite your files. react-native upgrade replaces your files with newer version if it's different than the default one. It does not merge your changes. Also jump from 0.19 to 0.27 is a big one so probably there was a lot of changes.
Yes, react-native upgrade will wipe everything out. There's a command line option now (react-native link) that will put most of it back in, but not everything.
If you choose not to overwrite the files you are risking not including something very important and it may break the upgrade.
I don't know of a good way around this. My process is to use a good ide that shows me exactly what has changed between upgrades. Then I go though each change and see if I'm missing something. The java code and android studio files tend to be quite easy. But the xCode stuff is not, the pbxproj file is particularly awkward. You mostly need to reconstruct it by using Xcode. So... every time you do something to the xCode project, make a note of it! Yes this is a terrible solution, but I don't know what else to do.
I've ended up making detailed notes about everything I do during an upgrade. And I upgrade recently because its easy to forget.
I started my React Native project with version 0.12.0 and Baobab. Everything worked great until React Native 0.14.2. In any version since then, the transform in the packager stops at 98% and the JS load fails.
I have used some of the advice in this github issue to determine that it's transforming a file in Baobab (baobab/dist/update.js or baobab/dist/watcher.js in different runs).
I have confirmed that Baobab is the issue by creating a clean React Native 0.16.0 install and only putting Baobab in it (with the required require)
At this stage, I'm not sure whether I should raise an issue with React Native or with Baobab, so I'm looking for advice on how to get some sort of error message that I can use to debug the issue and work out what's going wrong.
Ok. Worked this out myself:
By adding debug=babel to the environment the packager is running in, I got a huge amount of output and hidden in there was an error that .babelrc in the baobab package had an optional entry and the React Native packager doesn't understand optional. I deleted the .babelrc from the baobab package and everything works.