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!
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'm following this guide to make a react component library for my company. I set up all as the guide and then tried running npm rollup -c. It works on my machine (it builds without errors).
But when I try plugging it into CircleCI (the tool we use for builds), it throws this error:
The config is all the same, the server uses Linux and the node version is the same. Is there something I'm missing? Or something I can test?
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.
Already tried suggestions here and here with no luck
I have a project with a directory structure like this:
.
- /app
- /web
app is a react native app (created manually, not with create-react-native-app).
web is a react app created using create-react-app.
Both use TypeScript.
I'm trying to render a component from app in the web application using react-native-web, but TypeScript doesn't seem to be parsing the file as I get this error:
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|
> export type Props = {
Given that TypeScript is working fine within app and web independently, I'm not sure what I'm missing. One slight quirk of the project is that, because create-react-app doesn't allow relative imports from outside its own src folder, I've had to symlink app using npm link app in the web directory in order to import the app components.
Not sure if that's causing the problem, but I'm pretty stumped so any suggestions would be greatly appreciated.
Solution ended up being to add ts-loader to the webpack config of my React for web app. This was made slightly harder by the fact that create-react-app doesn't allow modifying its config files, but I was able to do so using react app rewired
I also had to change TypeScript's noEmit to false to ensure tsc is used for compilation as well as type checking (had to do this in react-app-rewired too, because CRA overwrites that setting in tsconfig.json if you try to change it).
Still slightly confusing to me why this was needed, given TypeScript was being parsed perfectly fine in the web and mobile apps individually.
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.