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
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 build a library (mostly some .vue components) to reuse in different projects (no public npm) with vue-cli-service. Apparently everything its already setup, and I can confirm that the build is fine (js, and css). However, I'm unable to use it in a separate project as an external module because it uses the spread operator (and probably more ES20XX features no yet parsed).
Module parse failed: Unexpected token (2683:8)
You may need an appropriate loader to handle this file type.
| params() {
| const queryParams = {
| ...this.filters,
| ...this.sorting,
| ...this.config.params,
This is the standard command I'm using to build the library
vue-cli-service build --target lib --name [mylibname] ./src/components/index.js
By default the bundle should be already polyfilled but it seems to me that it's not the case.
I've read that I might change the webpack configuration on the project I'm using into, but I'm against parsing the whole node_module folder and also I would love to just have the simplest workflow possible (like import a module and its css).
So my question is, how to polyfill my bundle to be perfectly usable in no matter what Vue project without any hassle ?
Ok, it seems that reinitializing the project with vue-cli without typescript and with separated configuration files instead of into package.json was a good idea, as now is transpiled as needed.
var queryParams = _objectSpread({}, this.filters, {}, this.sorting, {}, this.config.params);
Unfortunately the hidden configuration of vue-cli webpack can't help to see what has changed.
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.
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 have a situation where my module names need to be in a certain format. Typescript is fine when I do this:
// knockout interfaces, this is knockout.d.ts
declare var ko: KnockoutStatic;
declare module "core!lib/knockout" {
export = ko;
}
And then in my file that uses it:
import ko = require('core!lib/knockout');
IntelliJ doesn't like it though. It says "cannot find external module 'core!lib/knockout'. I'm using the latest stable version (14.1) and this happens with the in-built 1.4 compiler and a custom one.
I guess this may be a Jetbrains bug?
If you add this to the file with the import statement the error will probably go away
/// <reference path="test.ts" />
The real problem I think is that the configuration isn't fully correct. Is the config root correct or are you maybe using version control?
Relevant bits from the link:
From the Scope drop-down list, choose the scope to apply the compiler in. The available options are: – Project Files: all the files within the project content roots (see Content Root and Configuring Content Roots).
– Project Production Files: all the files within the project content roots excluding test sources.
– Project Test Files: all the files within the project test source roots.
– Open Files: all the files that are currently opened in the editor.
VCS Scopes: these scopes are only available if your project is under version control.
– Changed Files: all changed files, that is, all files associated with all existing changelists.
– Default: all the files associated with the changelist
See https://www.jetbrains.com/idea/help/transpiling-typescript-to-javascript.html