Import path differences in React and React Native - javascript

I am trying to share logic components between a React appliacation and a React Native application with a similar structure as shown below:
-source
|-appLogic
|-logicComponent1.js
|-logicComponent2.js
|-moreAppLogic
|-moreLogic.js
|-appviews
|-reactView.js
|-reactNativeView.js
I have a problem during the import of modules in the logic components.
The reactView.js will import the logic components like this:
import {moreLogic} from "appLogic/moreAppLogic/moreLogic.js"
whereas the reactNativeView.js will import the same file like this:
import {moreLogic} from "../appLogic/moreAppLogic/moreLogic.js"
My problem arises in the case of moreLogic.js importing for example logicComponent1. Since react, in the moreLogic.js, will want something like this:
import {logicComponent1} from "appLogic/logicComponent1.js"
and react-native will want:
import {logicComponent1} from "../logicComponent1.js"
I have tried to do the import in moreLogic.js both ways but if I do it the react way, the native app cant find the file and vice versa..
Is there a way to go around this problem?? I cannot change the file structure, that is really not an option.

put package.json file in source/appLogic with the following content:
{
"name": "appLogic"
}
After that you can use import {moreLogic} from "appLogic/moreAppLogic/moreLogic.js" in both react js and react native

Related

Cannot destructure import from node_modules, but can from file

I find a weird behaviour when writing my vite program,
import { Store } from '#decky.fx/react-native-essentials/lib/index';
the code above is working fine, but if i change it into
import { Store } from '#decky.fx/react-native-essentials';
Store will yield undefined
I have to load all modules like this
import All from '#decky.fx/react-native-essentials';
All.Store // this is working
package json for the modules are like this
...
"main": "lib/index.js",
"types": "lib/index.d.ts",
...
any ideas why it behave like this?
the repository is at https://github.com/deckyfx/react-native-essentials/example
Should be able to destructure modules like how react library does
react, {useState} from "react"
Hey not sure but i think its happenig because import { Store } from '#decky.fx/react-native-essentials' is looking for store in the react-native-essentials but its not in that file its in the sub-folder of it react-native-essentials/lib/index not in the root and so that's why you not able to destructure it from the react-native-essentials and as for why this is working import All from '#decky.fx/react-native-essentials'; its because you importing everything from the file even its subfiles/folders .
And in this case react, {useState} from "react" react have everything in the "react" file so that's why this works import{useSatte} from react

Unable to import an API module into a nested component (Vue)

I've been struggling with a very odd bug(?) with regards to importing an API module into a nested component in a Vue app.
This is the simplest I could reduce the issue down to.
https://codesandbox.io/s/rough-tree-fqj7o
Essentially, the DogsCreate component renders the CreateDogsModal, which is importing the dogs module from the API directory.
As you can see, the codesandbox errors out even on the base URL with the error Cannot read property 'default' of undefined. If running this code locally not on codesandbox, the base URL renders ok, but if you go to /dogs/create, the error then becomes Failed to resolve component: CreateDogsModal.
The things I've found that fix this are:
Commenting out the API import statement in CreateDogsModal (not an option for us, we need to be able to create and import API modules)
Commenting out the TopNav component in main.js (...also not an option for us)
Importing the TopNav component in App.vue with a relative import or #/components/TopNav.vue works fine, but strangely importing CreateDogsModal and CreateTemplate in DogsCreate.vue with a relative import or #/components/[component-name].vue does not. Also, the latter would be somewhat acceptable as a long-term solution, but I'd prefer the #/components shorthand and that still leaves the root cause undetermined.
I'm using the default vue-cli webpack configuration and have checked via vue inspect that the alias seems to be set properly.
I've been spinning my wheels for a week trying to figure this out and just...cannot. Does anyone have any ideas for what may be happening?
It seems like a race condition in Webpack, using parallel builds, but I'm honestly not sure. I can see CreateDogsModal being pulled in from two places, starting from main.js:
'main.js'
- import 'App.vue'
- import '#/components/index.js'
- import and export 'CreateDogsModal.vue'
- import 'router/index.js'
- import '#/views/Dogs/DogsCreate.vue'
- import '#/components/index.js'
- import and export 'CreateDogsModal.vue'
One workaround is to remove the race by making the CreateDogsModal an async component in DogsCreate:
// DogsCreate.vue
import { defineAsyncComponent } from "vue";
import { CreateTemplate } from "#/components";
export default {
name: "DogsCreate",
components: {
CreateTemplate,
CreateDogsModal: defineAsyncComponent(() => import("#/components/CreateDogsModal.vue")),
},
};
demo

good practice to import asterisk for package/lib?

I've seen somewhere in github people import *, I have no clue why he did so, for instance:
import * as React from 'react';
export const doSomething = () => {
return React.useMemo(() => {
return {
something: window.location.href
};
}, []);
};
He did the same for other packages. Why don't we do
import { useMemo } from 'react' ?
Both of the suggestions for using * or explicit imports are possible and will work as expected.
The asterix will import all components, hooks, and more artifacts that are located under the "react" library, so when using
import * from "react";
you'll have the freedom to use any type of hook or Component without an explicit import.
The best practice though is to import only modules that are relevant to your application or components
import React, { useMemo } from "react";
This approach will make sure you don't import unused components that will be heavy on your bundle size for production and will be flagged as dead code.
Ok, to expand my answer I will say: You have two options
import React, { useMemo } from 'react';
Benefits? You are just importing the things you need, also, your code will be a little bit shorter compared to the second option since you can use useMemo(); directly
Also this is the way reactjs.org presents their examples https://reactjs.org/docs/hooks-intro.html which is a big -GOOD PRACTICE- signal
import React from 'react';
it's seem similar to the first option but you are using React directly.
how to access useMemo()? React.useMemo(). So yes, you guessed, it's a little bit longer sintax that the first option, but i do not think this is a problem.
Also this is the way https://material-ui.com/components/text-fields/ material ui presents their examples. It's also a nice way to do it (and the one I use)

prismjs not working between different routes using vuerouter in vuejs

I've imported prism.js globally in main.js file.
Code block syntax highlighting working fine in Home components, but after routing to another page using vue-router, there is no effect.
in main.js
// Global Import
import 'prismjs/prism.js'
import 'prismjs/components/prism-swift.min.js' // swift lang
import './theme/prism-swift-theme.css'
in my about page component...
<pre><code class="language-swift">
private func setupSubviews() {
let value = "Loading code block";
}
</code></pre>
Unable to understand what's wrong here. Is there any way I can import node_modules prismjs files globally? I thought keeping main.js will work fine, but it's not adding globally between routes...
Once you install it with npm the best approach is to import it whenever it is used in each component seperately with import Prism from 'prismjs'. Just make sure to use the Prism.highlightAll() method in the component where you're using prism after the DOM is rendered whether in mount() hook or in the updated Vuejs hook using nextTick method to make sure all the DOM is rendered before using prism. So in your case you should use it this way:
import Prism from "prismjs"
updated: function () {
this.$nextTick(function () {
Prism.highlightAll();
})
}
make sure you call highlightAll in yor components seperately and not globaly.

Most efficient way of importing files from children folders?

I have a parent directory that contains children directories, where each contains an SVG component and I only need to import some of them. I'm currently importing all the components I need by doing this:
import FacebookIcon from 'project/icons/Facebook';
import TwitterIcon from 'project/icons/Twitter';
import DiscordIcon from 'project/icons/Discord';
import MediumIcon from 'project/icons/Medium';
import YoutubeIcon from 'project/icons/Youtube';
However this seems very verbose. Is there a less verbose way of doing this?
I thought about destructuring, but I wasn't sure how to do this since each file is in a different folder.
Typically, you want to import similar components from a single source (you will get auto-complete too):
import {
FacebookIcon,
TwitterIcon,
DiscordIcon,
DiscordIcon,
MediumIcon,
YoutubeIcon,
} from "project/icons";
// Usage
<FacebookIcon/>
// Same
import Icons from './project/icons';
// Usage
const Icon = Icons.FacebookIcon;
<Icon/>
To achieve this, create index.js file in project/icons and make named export for each of the components.
export { default as FacebookIcon } from "./FacebookIcon";
...

Categories