I am using a react app inside another react app. The one within is having IPFS usage. I am getting this error.
Found he solution. Install all dependencies at one place at outer react app and not individually.
Related
How is it possible to integrate in the same project next js (for multilingual seo) and react app for the admin part of the user ?
What you are building with next.js is actually a React app, what do you really mean? If the one application is next.js based and the other one is create-react-app or something like that, then no, you need to run (or serve) them separately.
I understand we can create and test React Native Components in isolation in Storybook. But how do we export/publish the components to integrate in our app?
In React -
I used react-docgen that will allow me to create and document components as a standalone project
Then I will build and publish my doc app as a package to npm registry and npm install as dependency in my app to import those components
How do we do same in Storybook with React Native? Should I -
copy files/code of tested components in my actual app?
export everything just in stories folder and build and publish as package and install as dependency in my app?
Install storybook in my actual app? But I guess that's not an option as storybook is supposed to be run as standalone app in itself
May be I am missing something obvious as no tutorial/article/doc talk about how to consume the created Components in final apps? Can someone please shed some light? Thank you.
Ok, someone finally said this in a tutorial-
Once you find the component and the state that you want, you can see the source code you need to place in your application to get the exact same functionality
So, after all it will act simply like a UI library documentation from where you need to copy code from example and cannot add stories as dependency to your project.
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.
These are the problems that I have faced yet:
Integration: I tried integrating Stencil and React as stated on the official Stencil website. It turned out that I have to build my Stencil component before adding it to my App and I need to copy it to the node_modules or else it throws some error in the Polyfills file.
I can't pass a function or an object as prop from my React App to Stencil component
It doesn't have any example on setting up react with stencil
Can anybody please help me?
Personally i use my own github instance where i upload the whole web-components project with dist and loader folder to github. Afterwards you can use this command to load the project into your npm-modules of your React app. It works a bit like a npm install from your github repo.
git+https://my-github-instance/web-components/my-components.git
Here are some details if you have problems get it running.
How to install an npm package from GitHub directly?
Than you can just npm update / npm install to get the freshest version of your web-components in your React app.
The Documentation of Stencil is pretty detailed how you can use the web-components in React:
https://stenciljs.com/docs/react
Good Luck
Out of the box React has issues integrating with Custom Elements (such as Stencil components) - you can see more details at https://custom-elements-everywhere.com/ as well as a few workarounds.
To aid in this integration, Stencil components can be extended with a bindings layer for React which convert the custom elements into consumable React components. See here for details: https://github.com/ionic-team/stencil-ds-plugins#react
without using webpack and create-react-app how to create a React app
i would like to use following in my react application
1.redux
2.react routing
You can simply copy the cdn and implement your component to the project. That is if you have already a web page and you want to implement a few components with reactJs. Check this page has your answer.
https://reactjs.org/docs/add-react-to-a-website.html