webpack-config | Configuration for Webpack projects at Madewithlove | Plugin library

The issue is that previously, the React app also served as the server that provided the index.html file along with other static assets (eg. your localized translation json files). In single-spa, that is no longer the case; that is instead now the root-config. You'll need to update your i18next-http-backend loadPath configuration so that the library tries to retrieve them from the right path which is no longer the root url. Without being familiar with what you want to achieve, you have two options:

• use __webpack_public_path__ to dynamically create the correct URL to point to the assets served by this microfrontend, eg. loadPath: `${__webpack_public_path__} /locales/{{lng}}/{{ns}}.json`,
• if you have a separate i18n service, point the URL to that. This may also require crossDomain and withCredentials depending on how that is also configured.

you are probably not having react-native-screens in your node_modules? For react-navigation for each module you are using you have other modules that you need to import in addition. This is not done automatically.

You are using useScreens() outside of a component. By the way useScreens() is deprecated and should be replaced with enableScreens

Finally I succeeded to use wasm-based sqlite in PWA service worker, by using this module:

https://www.npmjs.com/package/sql-wasm

This module includes 2 files

• node_modules/sql-wasm/dist/esm/sql-wasm-browser.js
• node_modules/sql-wasm/dist/sqlite3.wasm

use them with some modification, it works fine.

1. Put sql-wasm-browser.js to same folder with service worker's source code.

2. Add some modification to sql-wasm-browser.js, to avoid error saying "document is not defined"

I found a working solution on cypress discussion

Just gonna dump what made it work for me

Updated NextJS to the latest version.

Then I also did

try this

You're right, if you just want to use this code trying to do it in a TypeScript project is a pain. You either need to make some changes so props and its children are properly typed for TypeScript, or change the imports so they're not typed. Working to make the props properly typed seems pointless since the code is already using prop-types to type them.

However, changing the imports isn't actually too hard. Just create Button.tsx with your Button.js code as in my original answer, and then replace the import React from "React" and import PropTypes from "prop-types" statements with the code below. You'll see this makes React and PropTypes of type 'any' if you hover over them, and means TypeScript won't try type-checking everything.

For that to work, you need to passe the configration using double --

Ok, I fixed the problem. Now it compiles!

The actual problem was:

When using nodeExternals webpack skips bundling the node_modules into the final bundle, so you till need to run your production dependency install command on your production server.

This is done due to low level dependencies of some node packages, like pg needing C++ bindings or bcrypt using node-pre-gyp and python. Bundling these dependencies into your code isn't compatible, which is why they need to be left external. There's a lot of discussion that goes more into depth on this here