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.
Related
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
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.
I am trying to create a plugin that utilizes components from another Vuejs plugin (Vuetify). Basically, I have some common components I want to share across multiple applications with our company.
I thought it would just be a matter of:
Create a github repo for the shared components
Author the plugin
Reference the repo in consuming apps via npm install
Here is the gist of the plugin:
// src/index.js <-- package.json/main is set to "src"
import MyComponent from "./MyComponent.vue";
import * as api from "./api";
export default function install(Vue) {
Vue.component("myComponent", MyComponent );
Vue.prototype.$myApi = api;
}
At the moment, the behavior I'm seeing is:
GOOD
plugin install function is being executed
functions from api attached to Vue.prototype are available in app components
my-component is available in the app and renders markup
BAD
$myApi and Vuetify components are not available in an application instance of of my-component
If I copy the same files into the app and change my import, all works as expected. So, I now wonder if I'm missing something regarding sharing code via external modules.
I've tried these alternatives with the same issue:
use npm link to link the plugin module to the app
manually, use mklink (Windows sym link) to link plugin module to node_modules in the app folder
use a long relative path reference to the plugin module: import MyPlugin from "../../../my-plugin"
I've put this issue off for a while, but for anyone wondering, the issue is with using Single File Components and webpack not compiling those in external modules.
The 2 options I have are:
Don't use Single File Components. I.e.: Just use .js instead of .vue. I've seen some libs like Vuetify.js take this approach
Compile the .vue files in the library module and include them in the source such as ./dist folder.
I tried to use browserify to load my node modules to be used in browser. My main.js file depends on fs, cheerio, json-to-xlsx. When i bundle them using browsesrify, it bundles without any error. But when i load the bundled file,it always says cannot find module 'jszip', if i remove that dependency from my main.js and load, it shows same error with 'fs' module.
How do i use it? Or is there any other better loader to be tried to use node_modules on browser. i have tried webpack, wreq.js
this is the error in console
Any assistance is appreciated
The 'json-to-xlsx' module uses 'xlsx' module inside it. The xlsx.js uses 'jszip.js' like 'js'+'zip'. But browserify doesn't work with concatenation, hence you have to manually go and change the require('js'+'zip') to require('jszip').
Similar with the fs module also.
I am using ES6 style module inclusion within webstorm and I have an express app which has a custom d.ts (For middleware which alters objects) which looks something like this:
declare module Express {
export interface Application {
getLogger(): LoggerInstance;
getRepository(collectionName): IRepository;
getEnvironmentVars(): any;
}
}
Now the IDE sees this and whenever I were to use it there are no errors, however when I run this through TSC it blows up saying 'getRepository' does not exist on type 'Application'
I have plenty of other d.ts files which are working fine but there are no errors listed and nothing odd I can see there.
An example use case of this may be:
import { Express } from "express"
export function SomeMiddleWare(app: Express){...};
(Express in the express.d.ts extends Application which contains the augmentations in the other file.)
So I am baffled as to why it works in the IDE but not in the TSC, which is including all the *.d.ts files within a typing directory, there are no errors being listed with the d.ts files just with the usages which are defined in this specific d.ts.
TSC it blows up saying 'getRepository' does not exist on type 'Application'
Make sure that this new .d.ts is included in the compilation context for tsc using something like tsconfig.json