I am working on an isomorphic react project and am attempting to use the Stripe node SDK (vs their REST API) within a Redux module. When Webpack builds the project I get the error: Module not found: Error: Cannot resolve module 'child_process'. I know this is a node only module, so I cannot use it on the browser (I only want Stripe API calls to originate on the server-side), I just don't know how to ensure that the Stripe node_module is not packaged in to the browser app.js file.
While I am importing the stripe module in the redux module, on the JSX side, I am only importing the IStripe interface from the stripe.model and the getPlansList dispatcher from my stripe redux module.
So my question is how does one use node-only modules within an isomorphic React project? Do I need to run a separate server-only node process that handles my Stripe calls? Or is it possible to contain this functionality within my isomorphic app?
Thanks!
Look at the issue, you should not run stripe-node in browser.
You can setup alias in webpack config:
{
resolve: {
alias: {
'stripe': './src/stripe-browser'
}
}
}
If you don't need to use Stripe in browser, you can just create an empty file stripe-browser as a stub for API.
If you are going to use API in browser, you have to create an adapter to Stripe.js client-side library.
Related
I am looking to publish a react component and web component from an angular library.
I followed a few tutorials that step you through creating a react component inside an angular library. For example you install react and react-dom into the workspace, you add "jsx": "react-jsx" to your tsconfig, you wrap your react component in a web component, you import your web component into your project app, you add CUSTOM_ELEMENTS_SCHEMA to the app.module.ts, and you use the webcomponent markup inside of the template of the component of your choosing. (I also added the line "include": ["./src/**/*.ts", "./src/**/*.js", "./src/**/*.tsx", "./src/**/*.jsx"], to the tsconfig.)
I am now trying to set up building the library. I added an index.ts file to the library as the entry point and export my web component from it:
export * as any from './lib/my-web-component.jsx';
I'm getting non-descriptive errors when I build that say
✖ Generating FESM2020
Could not resolve "./lib/my-web-component.jsx" from "dist/my-lib/esm2020/index.mjs"
I realize there is tooling that a createReact app uses to bundle the components. Is it possible to publish react components from an angular library? Does anyone have any insight into what this error is from, how to solve it, or how to get a more descriptive message?
We have two projects that share a API wrapper library (that we created) that makes use of the pusher-js library for websocket communication.
The API wrapper was originally built for the web version project built on NextJS, but now we wish to include it in our new React Native project. The issue is inside the API wrapper where we instantiate pusher, we import pusher from 'pusher-js whereas for this to work on React Native we need to import pusher from 'pusher-js/react-native. This lib is obviously unaware of the outer usage of who installs it and just sets these things up as a convenience wrapper.
How could this be achieved within either the mobile project or should this be setup within the API lib? I've looked into module resolution via a babel plugin but not sure how this would be setup for this instance.
You can have a platform specific file for mobile.
// pusher.ts
import pusher from 'pusher-js';
export default pusher;
// pusher.native.ts
import pusher from 'pusher-js/react-native';
export default pusher;
// whenever you need pusher
import pusher from './pusher';
React native will import from pusher.native for you. https://reactnative.dev/docs/platform-specific-code#native-specific-extensions-ie-sharing-code-with-nodejs-and-web
I have a web application developed in php, jquery and other technologies ... I need to add React to an existing web application only in a part of the application, I would like to know what would be the recommended configuration of webpack + babel
in order to do what you want, you need to get a bundle out of your react code (that is done with webpack, which you're already using).
Only instead of just calling React.render(...) in your index.js, you'll do something like so:
function initMyReactComponent(selector, props = {}) {
ReactDOM.render(
<MyComponent {...props}/>,
document.querySelector(selector),
);
}
and in your php code, you add the bundle via a <script> tag, and use the initMyReactComponent method in site.
React is very easy to use in that sense, because it can mount itself anywhere, anytime, all you have to do is tell it when to do it!
I'm currently trying to build a web app compatible with the Google Progressive Web Apps specs. To do this i use Angular with Dart and Polymer based Webcomponents instead of the Angular components. So far everything works as expected. To make the app offline capable utilizing the Service-Worker API i use the following dart lib: https://github.com/isoos/service_worker
Using either Polymer or Service-Worker works fine but combining booth just exits with an error on app startup.
This is my AppComponent startup routine:
// ... other imports
import 'package:service_worker/window.dart' as sw; // <-- import alone causes the error
Future main() async {
await initPolymer(); // <-- causes the error in combination with the import above
bootstrap(AppComponent);
if (sw.isNotSupported) {
print('ServiceWorkers are not supported.');
return;
}
//... initializing service worker
}
The error occurs even if i'm not initializing the Service-Worker, importing the Service-Worker module is enough to cause the error.
Building the app works without any errors.
I'm new to Dart and the Polymer and Angular eco systems and the error message i get is not very helpful to me:
Uncaught Error: NoSuchMethodError: method not found: js_helper.dart:1742 'h' (J.Q(...).h is not a function)
at Object.J.H (http://127.0.0.1:8080/index.bootstrap.initialize.dart.js:9747:15)
at http://127.0.0.1:8080/index.bootstrap.initialize.dart.js:10559:1584
at Isolate.e.(anonymous function) (http://127.0.0.1:8080/index.bootstrap.initialize.dart.js:10608:15)
at Object.yK (http://127.0.0.1:8080/index.bootstrap.initialize.dart.js:9291:22)
at http://127.0.0.1:8080/index.bootstrap.initialize.dart.js:9282:10
at yM.a (http://127.0.0.1:8080/index.bootstrap.initialize.dart.js:2612:72)
at yM.dart.yM.$2 (http://127.0.0.1:8080/index.bootstrap.initialize.dart.js:2828:24)
at y9.dart.y9.$1 (http://127.0.0.1:8080/index.bootstrap.initialize.dart.js:2824:31)
at xM.bi (http://127.0.0.1:8080/index.bootstrap.initialize.dart.js:3767:40)
at xk.$0 (http://127.0.0.1:8080/index.bootstrap.initialize.dart.js:3167:16)
Can you give me a hint what could cause the error and how to fix it? I would very much like to use the Polymer components instead of the plain Angular components but i need the Service-Worker for offline caching support.
This looks like an issue caused by incompatibility between dart:js (the old style, used by the original polymer package) and package:js (the new style, used by all new packages, including package:service_worker).
You might want to have a look at the polymerize project, which brings Polymer via the new-style interop. Then you'll have no conflict.
I'm currently using Webpack to manage configuration for my React JS app.
I have a config.development.json file that is loaded by my development build script. It contains
{
"primary1Color": "pink"
}
It's loaded in the Webpack script as follows
externals: {
configuration: JSON.stringify(require("./config.development.json"))
}
There's a similar set up for production builds.
I reference the config parameters in my app as follows
import configuration from "configuration";
const mainColor = configuration.primary1Color;
This is all working.
However, I'd like to allow the settings to be configured post-deployment---i.e. have the app read the config file when it runs. Then, if customers wish to change the color scheme, they can do so without me having to rebuild the app.
How can I get the app to dynamically load my JSON config file?
You don't have to bundle it with webpack. You can use normal ajax call to load the json or use script.js.
https://github.com/ded/script.js
However if you really want to use webpack loader, you can try external-loader.
https://github.com/sheerun/external-loader
More discussion here:
"Require external (unmanaged) file"
I think the best approach would be to create an API endpoint that react interacts with to load them.