I'm trying to do platform specific imports as I add support for web app as well. But I keep running into an import error for "ActionSheetIOS". I don't use this anywhere in my code, but this is a dependency for some number of my packages (react-native-map-link, react-native-share, etc). I've read that having .native.js and .js files for the package would fix an issue like this. How can I change this dependency and have my other packages installed by npm read from these edited files? Is there another easier fix to this?
Edit: This is the specific error I am getting if it helps.
./node_modules/react-native-map-link/src/utils.js
Attempted import error: 'ActionSheetIOS' is not exported from 'react-native'.
I've tried wrapping the code in the main files in Platform.OS selectors, so that's not the fix.
You can create specific js file like YourComponent.ios.js and YourComponent.android.js.
then import "ActionSheetIOS" in YourComponent.ios.js file. Also check this.
Related
I want to import some .cube files to use with FFmpeg to generate filters on my video.
Like images, I have them in a folder (LUT) in my src folder.
But when I try to import them the same way I would import an image, I am getting the following error:
Error: While resolving module `buds/src/LUT/Arabica-12.CUBE`, the Haste package `buds` was found. However the module `src/LUT/Arabica-12.CUBE` could not be found within the package. Indeed, none of these files exist:
The file does exist, I cant seem to import these files without running into this error.
Is it possible to load .cube files into React Native, I don't see why not...
I appreciate any help I can get with this.
Cheers.
I am trying to add a paintworklet to my application, but I am having a really hard time.
The worklet is a npm dependency, but worklets can't be inlined, they need to be registered like so:
CSS.paintWorklet.addModule('url/to/module.js');
I am having a hard time, because even though that currently works in my application, I am not sure if this is the right way to go about it, or if it will work in production. Currently, my url points to a file inside node_modules and I am not sure if nuxt will do anything with this.
I am currently doing this with a .client.js file inside the plugins folder. But they need an export default function(), but the worklet code does not have an export.
What I am currently trying to do, is tell nuxt somehow to grab certain files from node_modules and serve them as assets somehow, and then reference them some other way. But I cannot find any resources on this.
Any ideas would be appreciated.
If the file path is specified in a literal string, containing node_modules, the paint worklet might appear to work in development mode, but the worklet file will not be bundled in the build output:
CSS.paintWorklet.addModule('./node_modules/extra-scalloped-border/worklet.js')
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
❌ file not bundled in build output
Solution: Import the file
Importing a file enables the bundler to track the file, and include it in the build output. Nuxt 3 uses Vite by default, and the Vite docs describe how to import the file to use with paint worklets:
Explicit URL Imports
Assets that are not included in the internal list or in assetsInclude, can be explicitly imported as an URL using the ?url suffix. This is useful, for example, to import Houdini Paint Worklets.
import workletURL from 'extra-scalloped-border/worklet.js?url'
CSS.paintWorklet.addModule(workletURL)
Since the CSS.paintWorklet API is only available in the browser, make sure to use this in the mounted() hook, which only occurs client-side:
import workletURL from 'extra-scalloped-border/worklet.js?url'
export default {
mounted() {
CSS.paintWorklet.addModule(workletURL)
}
}
demo
This is my babelrc file. installed module-resolver and declared root and aliases.
actually this do works!! but underline annoying me... please click images below I cannot post images cause I'm new here.
[https://i.stack.imgur.com/ZzN5O.png]
warning like this - module is not installed i think intelliJ recognize it as module..
[https://i.stack.imgur.com/GTcWx.png]
I changed my root "./" -> "./src" but it didn't work.
I also installed eslint but don't know about that well I think that won't help this problem
has anyone solved this kind of issue before?
IDEA provides no special support for babel-resolver; please follow WEB-28241 for updates.
The problem is that there are dozens of plugins defining their own ways to resolve modules, we can't afford providing special support for all them... You can try using webpack aliases instead, or try a workaround from https://youtrack.jetbrains.com/issue/WEB-22717#focus=streamItem-27-1558931-0-0:
create a file config.js (you can use a different name if you like) in your project root dir
define your aliases there using the following syntax:
System.config({
"paths": {
"components/*": "./src/components/*"
}
});
components here is the alias you have defined in .babelrc
Now you can use imports like
import MyComponent from 'components/core/MyComponent';
in your code
I am trying to install https://github.com/SteveDunlap13/MaterialTimeControl under Angular 6. The installation succeeds without errors but I still cannot import the MaterialTimeControlModule.
All I can see is in my node_modules/ this is the only directory which is not marked as "orange" so I guess that means there's something wrong?
What am I missing here or could this be due to my recent update from Angular 5 to Angular 6?
As you write in comments under your question:
I am following this stackblitz example. I add it to my imports in my
app.module.ts
As you can see, in that example,in app.module.ts there is import MaterialTimeControlModule from.... SRC directory (not node_modules) !
This mean that you should create similar materia-time-control.module.ts file in your SRC directory and import it in app.module.ts in similar way. You probably should also create similar src/time-control directory (may be with som local changes depend on your particular project).
I have installed vue-star-rating module with npm. I want import this module in my JS file
var StarRating = require('vue-star-rating');
When I hover on 'vue-star-rating' shows full path to module and module also exists in noe_modules folder, but when I run my app in console I get a
ReferenceError: require is not defined
message. I have tried also other methods to import, but it still doesn't work.
import StarRating from 'vue-star-rating'
Also, you will need something like Webpack to compile and create the bundle properly. It will not work without a bundler.
Are you using a compiler to generate a bundle?
You can't reference modules this way as require doesn't exist on the client. You need to use something like fuse-box, webpack, etc. to properly handle the require function and include the modules you're referencing in your client bundle.