I have created monorepo using yarn workspace which have two microfrontends app developed using webpack module federation and one ui lib application which has storybook also. When I am trying to run storybook in monorepo, it is giving below error
Cannot read property 'createSnapshot' of undefined
at/node_modules/html-webpack-plugin/lib/webpack5/file-watcher-api.js
When I am running my ui lib outside of monorepo, it is running fine, but when I am including ui lib as part of monorepo, it is hoisting node modules and started using webpack5 which is causing an issue. I am not able to figure it out how to make it work. I don't want to create polyrepo as then sharing ui lib become bit tedious but because of storybook and ui lib sharing I want to go with monorepo but it is causing an issue.
Related
I am trying to transition an electron application built with create-react-app to ViteJS. So far, I've managed to get a lot of things fixed, but I'am having an issue with one of our dependencies.
My project uses an internal library built in golang for performance reasons, and this library is called from the main process of the electron application. However, I get the following error when running vite build.
[commonjs--resolver] Unexpected character '�' (Note that you need plugins to import files that are not JavaScript)
This happens with the following line
module.exports = require('./build/Release/goapi.node');
goapi.node is the compiled library. This library is compiled using node-gyp, and I'm 100% sure that the compilation is right, because it is working with the current setup that uses create-react-app.
Is there a plugin to add in the vite config to support importing native modules? If not, how can I get around this problem?
I have a React application (called MyApp) which has a dependency (called Dep, also in React). I own both the applications.
In Dep, I have used dynamic imports at multiple places for lazy loading. I build it using rollup, and the code is properly split as I want it to. I then create an npm package and use it as a dependency in MyApp.
Now I build MyApp using webpack, but the issue is that webpack bundles everything in Dep. I want it to still remain split so that I can load my webpages faster.
What am I doing wrong?
I am working on a project originally created with Create React App (CRA), that I eventually switched over to using CRACO due to the need to handle some LESS files. I am now trying to integrate a separate WebAssembly project that exports a struct that I would like to use in the react project. I wrote bindings using wasm-bindgen, and published the result with wasp-pack as an npm module (bundler build). That produces an NPM package that I published.
Next I followed this tutorial that uses CRACO and imports the wasm code from a library. Essentially the code is the same on the react end, but I have a struct that should be wrapped instead of a function. However it doesn't work as expected. When running, I get an error below:
./node_modules/#my_scope/my_pkg/my_pkg_lib_bg.js
Attempted import error: '__wbg_jsmystruct_free' is not exported from './my_pkg_lib_bg.wasm' (imported as 'wasm').
I am not exactly sure what might be causing this specific error (whether that is some issue in webpack, craco, the wasm wrappers, or some combination of the above). If there would be any additional info that would be useful, I would be happy to provide it. Thanks for all the help!
I tried to implement react-native with workspaces to share the business logic across mobile and web application, it works well on the web, but it doesn't work or even load files on react-native. I ended up using wml but it cannot load a file from the shared package that's importing packages like axios or so.., although these packages are already installed there, and it works as expected on web.
I fixed it by using lerna instead of yarn workSpaces / wml
I want to use my UI components as a reusable seperate repo/project for my react-native iniit App.
So i creatd a seperate project folder like this
and installed these dependencies
and few dependencies externally with my other app.
Then i used
yarn link
to link this project to my working app as a module just like a node module. but i get this error when i try to run my app?
Is there an issue with my method, or is there a sure way i can try to reach my goal because i found multiple ways and various configuration of creating such component libraries.but i didn't use any since the end goal is different.
This is a known issue with the React Native packager. See this discussion: https://github.com/facebook/react-native/issues/637.
This may have to do with using watchman, although there seem to be a few different cases where this can crop up.
TL;DR: React Native packager does not respect symlinks to projects, so npm and yarn link do not work like you would expect them to. Apparently this is being resolved in metro-bundler: https://github.com/facebook/metro-bundler/issues/1.
Unfortunately the workarounds are not that pretty, but there are a few options discussed in the issue 637 discussion. It also looks like you may be using a github repo for your package.
You could tell npm to get your library from github via your project's package.json, so you probably do not need npm link, though you will not be able to link to your local files for your module this way.