I am trying to add the example v-calendar Example Github code
When I am pasting the code, I get an error that
File was processed with these loaders:
* ./node_modules/#quasar/app-webpack/lib/webpack/loader.vue.auto-import-quasar.js
* ./node_modules/vue-loader/dist/index.js
You may need an additional loader to handle the result of these loaders.
|
> ::-webkit-scrollbar {
| width: 0px;
| }
Another error is that, I am getting an error that says:
Failed to resolve component: v-calendar
Related
I'm trying to create an API on Vercel which returns images, generated based on the request. I would like to use #vercel/og for this, because it can generate images from HTML, and it is very quick. However, it seems to require React, which seems entirely unnecessary for something serving no actual HTML at all.
I have an edge function in api/test.ts:
import { ImageResponse } from '#vercel/og';
export const config = {
runtime: 'experimental-edge',
};
export default function () {
return new ImageResponse({
type: "div",
props: {
children: "Hello, World",
style: {
backgroundColor: "black",
color: "white",
width: "100%",
height: "100%",
}
}
}, { width: 500, height: 500 });
}
This runs completely fine when deployed to Vercel, but when I use vercel dev it gives me these errors:
Failed to instantiate edge runtime.
Invalid URL: ../vendor/noto-sans-v27-latin-regular.ttf
Error: Failed to complete request to /api/test: Error: socket hang up
node_modules/#vercel/og/dist/og.d.ts:1:35 - error TS2307: Cannot find module 'react' or its corresponding type declarations.
1 import type { ReactElement } from 'react';
~~~~~~~
node_modules/satori/dist/index.d.ts:1:27 - error TS2307: Cannot find module 'react' or its corresponding type declarations.
1 import { ReactNode } from 'react';
~~~~~~~
node_modules/satori/dist/index.d.ts:14:11 - error TS2580: Cannot find name 'Buffer'. Do you need to install type definitions for node? Try `npm i --save-dev #types/node`.
14 data: Buffer | ArrayBuffer;
~~~~~~
Found 3 errors.
There are two errors saying that #vercel/og and satori can't find React. Is there a way around this? I shouldn't need react for this, right?
I worked around the React-related errors and the inability to run .tsx edge functions without Next.js by installing #types/react and defining my own JSX function and using it without JSX syntax just in a .ts file.
function h<T extends React.ElementType<any>>(
type: T,
props: React.ComponentPropsWithRef<T>,
...children: React.ReactNode[]
) {
return {
type,
key: "key" in props ? props.key : null,
props: {
...props,
children: children && children.length ? children : props.children,
},
};
}
After this you can run it in Vercel deployment preview.
However, in vercel dev locally, I'm still getting the following error.
Failed to instantiate edge runtime.
Invalid URL: ../vendor/noto-sans-v27-latin-regular.ttf
Error: Failed to complete request to /api/og: Error: socket hang up
I had also forced vercel CLI to use the newer TypeScript version with pnpm.overrides in package.json to solve some TypeScript parse errors I was getting.
Question
Hey, guys. I'm trying to document my React-Native project using Docz. Thing is my project is using Native-Base.
Description
When I try to build, I keep getting this error:
./node_modules/native-base-shoutem-theme/src/StyleProvider.js 10:19
Module parse failed: Unexpected token (10:19)
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 default class StyleProvider extends React.Component {
> static propTypes = {
| children: PropTypes.element.isRequired,
| style: PropTypes.object,
This is my doczrc.js file:
import { reactNative } from 'docz-plugin-react-native';
export default {
title: 'Recarga Styleguide',
plugins: [reactNative()],
native: true,
src: './app/components/ui/' // <== where the components are located inside the project
};
I've been researching and it seems to be quite a common error with Native-Base.
I found this solution in stackoverflow:
[Expo for Web failed to compile because of native base module for Web failed to compile because of native base module)
I suspect this solution might work for me, thing is: I don't think my project is using expo. I think I would like to try some setting on my babel.config or metro.config file, but I'm not sure how it would work.
Could you help me?
Thanks!
When I checked the library you used, I realized that it was Docs Deprecated
I recommend using this library THIS as the library itself recommends
Using a stylus block level import:
# vuetify-style.styl
.myapp
#import '~vuetify/src/stylus/main'
This is to ensure that the vuetify css doesn't interfere with elements from other parts of the page which aren't using vuetify.
But unfortunately it doesn't work, I can't compile it.
ERROR Failed to compile with 1 errors 2:13:28 pm
error in ./src/stylus/main.styl
Module build failed (from ./node_modules/stylus-loader/index.js):
Error: node_modules/vuetify/src/stylus/settings/_el
evations.styl:85:33
81| 0px 9px 46px 8px $shadow-key-ambient-opacity
82|
83| // MIXINS
84| elevation($z, important = false)
85| box-shadow: $shadow-key-umbra[$z],
---------------------------------------^
86| $shadow-key-penumbra[$z],
87| $shadow-key-ambient[$z] (important ? !important : )
88|
cannot perform $shadow-key-umbra[((0))]
It compiles only when I delete the first line (.myapp)
Link to the issue on github: https://github.com/vuetifyjs/vuetify/issues/4864
BTW I also tried to use less and import css from the package
# vuetify-style.less
vuetify-styles {
#import (less) 'vuetify/dist/vuetify.css';
}
But in this way I also got an error:
ERROR Failed to compile with 1 errors 11:57:30 AM
error in ./src/plugins/vuetify-styles.less
Module build failed:
// load the styles
var content = require("!!../../node_modules/css-loader/index.js??ref--9-1!../../node_modules/p
ostcss-loader/lib/index.js??ref--9-2!../../node_modules/less-loader/dist/cjs.js??ref--9-3!./vu
etify-styles.less");
^
Unrecognised input
in /Users/zvadym/WorkProjects/motos_as/odin/vue/src/plugins/vuetify-styles.less (line 4,
column 12)
# ./src/plugins/vuetify-styles.less 4:14-334 13:3-17:5 14:22-342
# ./src/plugins/vuetify.js
# ./src/crm/main.js
# multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/crm/ma
in.js
Found a way to deal with it. Actually I just specified the full relative path to the style file
.vuetify-styles {
#import (less) '../../node_modules/vuetify/dist/vuetify.css';
}
and installed less of course npm install -D less less-loader
I am trying to create a module that will be used by other modules. However, this module contains html files.
Module 1 location c:/module_1
- Base HTML <img src="##__dirname/img/icon.png">
In module 1 he uses his icon.png.
In module 2, I would like it to use the icon.png of Module 2
I tried this:
plugins: [
new HtmlReplaceWebpackPlugin([
{
pattern: '##__dirname',
replacement: __dirname
},
...
html-replace-webpack-plugin
But compilation error occurs:
ERROR in Error: Child compilation failed:
Module not found: Error: Can't resolve './##_dirname/img/icon.png'
I noticed that it is possible to replace src after compiling
<img src="img/icon.png">
new HtmlReplaceWebpackPlugin([
{
pattern: /src=\"([^\"]*)\"/g,
replacement: function (match, $1)
{
return 'src="' + __dirname + '/src/img/' + $1 + '"';
}
}
]),
But I would like to replace before, and that when compiling it it takes the icon of the module in which it is being reused.
Is it possible to modify the img src dynamically in npm, even though it is a module that will be used as a dependency?
ps. I do not know much about the web and I do not know if I'm trying to do the project correctly. Just thought about reusing html code this way. If I'm doing something absurd, please let me know.
I solve the problem using React and this tutorial Setting Up a React.js Environment Using Npm, Babel 6 and Webpack
tried to use the bootstrap-vue for the first time but got issue upon compiling assets. When I run npm run watch, I got an error something like below.
Module parse failed: C:\projects\portfolio\node_modules\bootstrap-vue\lib\mixins\dropdown.js Unexpected token (110:8)
You may need an appropriate loader to handle this file type.
| },
| methods: {
| ...clickOut.methods,
| noop() {
| // Do nothing event handler (used in visible watch)
# ./node_modules/bootstrap-vue/lib/mixins/index.js 2:0-38
app.js
import BootstrapVue from 'bootstrap-vue/dist/bootstrap-vue.esm';
Vue.component('b-navbar', require('./components/Navbar.vue'));
Navbar.vue
<template>
<div>
<!-- navbar contents here.. -->
</div>
</template>
<script>
import { bNavbar } from 'bootstrap-vue/lib/components'
export default {
components: { bNavbar }
}
</script>
Expected result
Must display the navbar component
It seems, that you try to use single BV component. In that case you need to setup your dev enviroment to be able to compile BV sources by installing babel plugin https://babeljs.io/docs/plugins/transform-object-rest-spread/ and configuring babel to include node_modules/bootstrap-vue/lib folder