Transformer hangs in recent versions of React Native when using Baobab - javascript

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.

Related

Angular application won't run - Cannot read properties of undefined (reading 'write')

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.

Dependency relying on older Webpack version breaking ESLint testing

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!

React : Invalid hooks call without changing the React code

I am working on a full-stack app. My front-end, built on React was working fine. I installed cors for my back-end and it suddenly started giving me Invalid hook call error in my react app.
I tried uninstalling the dependency and also reverting to 2 old commits but it didn't work. I'm thinking it might be because of a peer dependency causing multiple versions of React. I tried npm ls react and npm ls react-dom but I have only one version for each i.e. 17.0.2.
The error message is also not helpful as I cannot understand where to start digging from. Attaching it below.
Here's the code repo (I couldn't figure out which part of code to share). The React code is inside the client directory. If someone can pinpoint me where to look or help me with the issue I'll be obliged. Thanks!
Error message

React is undefined while using rollup to bundle as esm

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.

how to migrate a react-native-vanilla project to expo?

right now, I have a React-native project which I created with the vanilla CLI.
I just heard of expo, and I wanted to use it, but it seems I must create my project on it first.
is there a way to migrate a react-native-vanilla project to expo?
Yes, if you have exp installed, you can run exp convert in your project directory. Note that this process won't check whether you have any native modules in your project, and if you do you'll likely have some issues.
As of this writing, there's one notable bug in this process where it may leave your project with both an exp.json file and an app.json file, which need to be manually merged.

Categories

Resources