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?
Related
I don't know what's going on I am making a frontend using vite + react for my mern project and suddenly starts encountering this error.
Error: Module "events" has been externalized for browser compatibility. Cannot access "events.EventEmitter" in client code.
git repo link : https://github.com/Gaurav200247/E-Book-Store-Mern-Project
Had the same issue, the "events" module was in sub-dependencies, I added it manually by "npm install events", then the issue disappeared.
Make sure that:
You are importing the correct library in your code.
The library you are attempting to use is directly installed in your project, libraries available as sub-dependencies will not work.
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 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.
I created a native OCR module using N-API (node-addon-api) with bindings to tesseract OCR.
My intention is to get native OCR working under electron. I basically checked all the npm packages related to OCR and they all don't work with electron. And here is my own test project
based on electron, which uses my node-native-ocr module:
https://github.com/stoefln/electron-ocr
My problem:
I don't manage to package all the dependencies when bundling electron. Or there seems to be a problem with the way I do it, because I am currently getting this error when running the electron project in production:
dyld: Symbol not found: _fmemopen Referenced from: /Volumes/Shared
Folders/Downloads/Electron
OCR.app/Contents/Resources/app/node_modules/node-native-ocr/build/Release/dependencies/liblept.5.dylib
Expected in: /usr/lib/libSystem.B.dylib
The way I am currently trying to package: The .node file which is generated depends on tesseract (built with brew) which depends on a lot of other libraries installed on the system.
What I came up with is a script which recursively reads dependencies (otool -l), copies them into the .node folder and changes the link (install_name_tool -change ...) to point to the copied dylib file.
I am not even sure if that's the right way of doing it. Shouldn't the node-gyp linker take care of linking AND packaging everything?
Here is somebody asking basically the same question: https://github.com/nodejs/node-gyp/issues/2258
More information if you want to reproduce my problem:
Run npm run export-mac
Copy the .app file to some other machine, to make sure it does not use the libararies in the system and only the ones which are packaged.
Start the app via the command line (otherwise you won't see the error): ./your_path_to_the_app_file/Electron\ OCR.app/Contents/MacOS/Electron\ OCR
Click the single button in the UI and check the terminal output
I'm building a web app with the frontend done in react, and I was wondering if it's possible to compile my react code into static HTML and JS files to be used with any server. So far I've been using the server run with
npm start
but for my final project I need to use a different one.
npm run build
This command creates a built version of your application in the build folder
Static builds are a standard in react deploying pipelines. You have to setup a build pipeline with webpack configuring it for minification assets management and so on.