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!
Related
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.
I have built a small practice project using React and Vite, and everything worked well in the development environment.
However, when I built it and attempted to preview it, I encountered the following error:
"Uncaught ReferenceError: require is not defined."
The issue is that I do not use the 'require' function in my code, I only use imports. Is this related to the npm packages that I have installed?
If so, how can I find the correct package to fix it or are there any other solutions?
I attempted to install a plugin called 'vite-require' but it did not work (maybe I did something incorrectly).
I am writing here in hopes of finding a solution to this issue.
Thank you for any answers in advance.
I apologize, my lack of knowledge of how to build modern Javascript apps is showing.
We have a Capacitor app that uses plain Javascript, without any build tools. This works fine. We're trying to add Microsoft Code Push support, via https://github.com/mapiacompany/capacitor-codepush, and we're running into a problem with how to integrate it into our app.
For Capacitor and its plugins, we use tags to include the plugin.js files from the various node_modules/.../dist directories.
If we do this with node_modules/capacitor-codepush/dist/plugin.js, we get an error about missing acquisitionSdk. Including node_modules/code-push/script/acquisition-sdk.js doesn't help.
Ok, so maybe there are a bunch of dependencies? We tried using rollup to see if we could get that to work, but cannot. Using this simple input file:
import { codePush } from 'capacitor-codepush';
console.log("hello");
we get [!] Error: Invalid value "iife" for option "output.format" - UMD and IIFE output formats are not supported for code-splitting builds.
Any help would be appreciated.
The only way I was able to get it working was to switch to using webpack. For reasons I don't understand, my initial attempts using rollup did not work. webpack was the key.
You should run the dist version of your app. Meaning, you should use a bundler like webpack. Unbundled (pure) code can't use these features.
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 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.