I have a few html files that contains a few charts that i must show in mu vue page.
However when i try to import them i get the following error:
./src/components/graphs/myHtml_js.html 2:0
Module parse failed: Unexpected token (2:0)
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
|
> <!doctype html>
| <html lang="en">
| <head>
I tried using v-html and this solution but the same error is shown.
This is how i tries to import it:
<template>
<v-main>
<v-container>
<v-row align='center' justify="center">
<v-col
class="d-flex justify-center"
cols="6"
>
<v-card
class="mx-auto"
width="100%"
min-height="200px"
outlined
>
<htmlImport />
</v-card>
</v-col>
</v-row>
</v-container>
</v-main>
</template>
<script>
import { htmlImport } from '#/components/graphs/myHtml_js.html'
export default {
component: {
htmlImport
},
data: () => ({
}),
methods: {
}
};
</script>
Related
I need to render vuetify v-image in v-html of vuejs
please see the code and attached image
<template>
<v-card>
<v-card-title>2</v-card-title>
<div v-html="test"></div>
</v-card>
</template>
<script lang="ts">
import Vue from "vue";
export default Vue.extend({
name: "slot2",
data() {
return {
test: `<v-img
lazy-src="https://picsum.photos/id/11/10/6"
max-height="150"
max-width="250"
src="https://picsum.photos/id/11/500/300"
></v-img>`,
};
},
});
</script>
As #kissu said, v-html is used to render HTML not a Vue component.
Also, I did not see any use case here to pass whole Vuetify component into HTML template. Instead you can bind the data dynamically (i.e image src) instead of passing/binding the whole Vuetify component.
new Vue({
el: '#app',
vuetify: new Vuetify(),
data: () => ({
imgLazySrc: 'https://picsum.photos/id/11/10/6',
imgSrc: 'https://picsum.photos/id/11/500/300'
}),
})
<script src="https://unpkg.com/vue#2.x/dist/vue.js"></script>
<script src="https://unpkg.com/vuetify#2.6.9/dist/vuetify.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/vuetify#2.6.9/dist/vuetify.min.css"/>
<div id="app">
<v-app id="inspire">
<v-img
:lazy-src="imgLazySrc"
max-height="150"
max-width="250"
:src="imgSrc"
></v-img>
</v-app>
</div>
I created a test react component library (React, Typescript) and am trying to use Rollup to package it up into UMD to I can import the component into an HTML page.
The sample component I created just takes a label prop and colors it orange. Something super simple so complex logic would be taken out of the equation.
React code to render the above text:
import * as React from 'react';
import * as Test from 'react-webpack-demo';
function App() {
return (
<div>
<h1>
{
React.createElement(Test.Brand, { label: 'Brand Label Text'})
}
</h1>
</div>
);
}
export default App;
The above component was packaged via Rollup into CJS format to be imported. I have also attempted to package the same content into UMD so it can be imported into HTML. The full rollup.config.js file is below:
import resolve from '#rollup/plugin-node-resolve';
import commonjs from '#rollup/plugin-commonjs';
import typescript from '#rollup/plugin-typescript';
import external from 'rollup-plugin-peer-deps-external';
import packageJson from './package.json';
export default [
{
input: 'src/index.ts',
output: [
{
file: packageJson.main,
format: 'cjs',
sourcemap: true
},
{
file: packageJson.module,
format: 'umd',
name: 'Test',
sourcemap: true
}
],
plugins: [
resolve(),
babel({
exclude: 'node_modules/**',
presets: [
'#babel/preset-react',
'#babel/preset-typescript'
]
}),
external(),
commonjs(),
typescript({ tsconfig: './tsconfig.json' })
],
external: [
...Object.keys(packageJson.dependencies || {}),
...Object.keys(packageJson.peerDependencies || {})
]
}
]
I then attempt to import the newly packaged UMD file into my HTML page and render it into a DOM element as such:
<html lang="en-US">
<head>
<title>Test</title>
<meta charset="utf-8" />
<script src="./react-webpack-demo/dist/umd/index.js" crossorigin></script>
<script src="https://unpkg.com/react#17/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom#17/umd/react-dom.development.js" crossorigin></script>
</head>
<body>
<h1>Testing rollup in plain HTML</h1>
<hr />
<div id='brand-test'></div>
<script>
const el = React.createElement;
const domContainer = document.getElementById('brand-test');
ReactDOM.render(el(
Test.Brand,
{
label: 'Demo works!'
}
), domContainer);
</script>
</body>
</html>
But I get the following error:
The above error occurred in the component:
Brand#file:///Users/jacorbello/repos/temp/react-webpack-demo/dist/umd/index.js:33:1
Uncaught TypeError: React__namespace.createElement is not a function
Brand Brand.tsx:8
React 17
test.html:20 Brand.tsx:8:11
Any help would be greatly appreciated here.
Thanks in advance for your time!
Seems like the script tag is in incorrect order. Your library needs React to be imported before it's script can be executed.
Just fix the order to get it working
<script src="https://unpkg.com/react#17/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom#17/umd/react-dom.development.js" crossorigin></script>
<script src="./react-webpack-demo/dist/umd/index.js" crossorigin></script>
I am trying to binding vue js component into django HTML template file, but it is not showing any content. I am not getting any error. Just blank component.
Here is my django HTML template:
{% load render_bundle from webpack_loader %}
{% render_bundle 'product-filter-app' %}
{% block section_more %}
<section id="section_more" class="guide_section">
<div id="product-filter-app">
<product-filter-app></product-filter-app>
</div>
</section>
{% endblock %}
Here is my vue js app.
main.js
import Vue from 'vue'
import * as Sentry from '#sentry/browser'
import 'vue-select/dist/vue-select.css'
import ProductFilterApp from './ProductFilterApp'
import { sentryOptions } from '#/utils/settings'
if (process.env.VUE_APP_MODE !== 'dev') {
Sentry.init(sentryOptions)
}
new Vue({
components: { ProductFilterApp }
}).$mount('#product-filter-app')
Here is ProductFilterApp.vue
<template>
<h1>Test</h1>
</template>
<script>
export default {
name: 'ProductFilterApp',
components: {
},
props: {
},
data () {
return {
}
},
methods: {
}
}
</script>
<style scoped>
</style>
Web-pack is generating app successfully there is not any error but just showing empty component as per screen shot.
Any help will be appreciated.
Actually, you shouldn't really even need to include the template in your view, as long as your element with ID of #product-filter-app is there. Give this a shot:
new Vue({
el: '#product-filter-app',
components: { ProductFilterApp },
template: '<ProductFilterApp/>'
})
And you can remove <ProductFilterApp><ProductFilterApp/> from your view.
[$injector:modulerr] Failed to instantiate module starter due to: [$injector:nomod] Module 'starter' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.
I started getting this bug in my console while I was working on a new feature for my Ionic app. I have gone over my modules, moved some script tags around, and I still can't figure this out. I have seen other people with this error put the ng-app in the head, which I did and it didn't work. I hadn't touched the ng-app or the angular.module at the top of app.js when I started getting this error. Can someone help point me in the right direction?
Error: [$injector:modulerr] Failed to instantiate module starter due to:
[$injector:modulerr] Failed to instantiate module starter.services due to:
[$injector:nomod] Module 'starter.services' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.
http://errors.angularjs.org/1.5.3/$injector/nomod?p0=starter.services
minErr/<#http://localhost:8100/lib/ionic/js/ionic.bundle.js:13443:12
module/<#http://localhost:8100/lib/ionic/js/ionic.bundle.js:15409:17
ensure#http://localhost:8100/lib/ionic/js/ionic.bundle.js:15333:38
module#http://localhost:8100/lib/ionic/js/ionic.bundle.js:15407:14
loadModules/<#http://localhost:8100/lib/ionic/js/ionic.bundle.js:17899:22
forEach#http://localhost:8100/lib/ionic/js/ionic.bundle.js:13696:11
loadModules#http://localhost:8100/lib/ionic/js/ionic.bundle.js:17883:5
loadModules/<#http://localhost:8100/lib/ionic/js/ionic.bundle.js:17900:40
forEach#http
app.js
// Ionic Starter App
// angular.module is a global place for creating, registering and retrieving Angular modules
// 'starter' is the name of this angular module example (also set in a <body> attribute in index.html)
// the 2nd parameter is an array of 'requires'
angular.module('starter', ['ionic', 'starter.services'])
.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
if(window.cordova && window.cordova.plugins.Keyboard) {
// Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
// for form inputs)
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
// Don't remove this line unless you know what you are doing. It stops the viewport
// from snapping when text inputs are focused. Ionic handles this internally for
// a much nicer keyboard experience.
cordova.plugins.Keyboard.disableScroll(true);
}
if(window.StatusBar) {
StatusBar.styleDefault();
}
});
})
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('app', {
url: '/app',
templateUrl: "templates/menu.html",
controller: 'AppCtrl',
abstract: true
})
.state('app.home', {
url: '/home',
views: {
'menuContent': {
templateUrl: 'templates/home.html',
controller: 'HomeCtrl'
}
}
});
$urlRouterProvider.otherwise('/app/home');
})
.controller('AppCtrl', function($scope, WC){
var Woocommerce = WC.WC();
Woocommerce.get('products/categories', function(err, data, res){
console.log(res);
})
})
.controller('AppCtrl', function(){
})
.controller('HomeCtrl', function(){
})
services.js
angular.module('starter.services',[])
.service('WC', function(){
return {
WC: function(){
var Woocommerce = new WoocommerceAPI({
url: 'http://samarth.cloudapp.net',
consumerKey: 'ck_98def17ffa4f32048cb5906d1de4fb35a2cc646a',
consumerSecret: 'cs_858089ad34205ced8dd85f91e28ad88677c85644',
wpAPI: true, //or false if you want to use the legacy API v3
version: 'wc/v2' //or wc/v1
})
return Woocommerce;
}
}});
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title></title>
<link rel="manifest" href="manifest.json">
<!-- un-comment this code to enable service worker
<script>
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('service-worker.js')
.then(() => console.log('service worker installed'))
.catch(err => console.log('Error', err));
}
</script>-->
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
<link href="css/ionic.app.css" rel="stylesheet">
-->
<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
<!-- your app's js -->
<script src="js/app.js"></script>
</head>
<body ng-app="starter">
<ion-nav-view></ion-nav-view>
</body>
</html>
menu.html
<ion-side-menus>
<ion-side-menu-content>
<ion-nav-bar class = "bar-stable">
<ion-nav-back-button> </ion-nav-back-button>
<ion-nav-buttons side = "left">
<button class = "button button-icon button-clear ion-navicon" menu-toggle = "left">
</button>
</ion-nav-buttons>
<ion-nav-buttons side = "right">
<button class = "button button-icon button-clear ion-android-cart">
<span class = "badge badge-assertive"> 2 </span>
</button>
</ion-nav-buttons>
</ion-nav-bar>
<ion-nav-view name = "menuContent"> </ion-nav-view>
</ion-side-menu-content>
<ion-side-menu>
<ion-list>
<ion-item> Login </ion-item>
<ion-item> Home </ion-item>
<ion-item> Browse </ion-item>
<ion-item class = "item-divider">Categories</ion-item>
</ion-list>
</ion-side-menu>
</ion-side-menus>
I think you forgot to add services.js file in index.html, can you add the below line in index.html after app.js like below.
`<!-- your app's js -->
<script src="js/app.js"></script>
<script src="js/services.js"></script>`
I was trying to import certain script depending on which URL I'm.
Simple <script> tag in my HTML is:
<html ng-app="myApp">
...
<script type="text/javascript" src="{{srcRoute}}" language="JavaScript"></script>
...
</html>
I was trying to get this after main module "myApp", in a run block:
angular.module('myApp', [])
.config(function($routeProvider) {
$routeProvider.
when('/', {controller: MyController, templateUrl: 'partials/home.html'}).
otherwise({redirectTo: '/'});
})
.run(function($rootScope) {
$rootScope.srcRoute = 'some/route/here.js';
});
but when running this I get something like:
GET myRoute/%7B%7BsrcRoute%7D%7D 404 (Not Found)
What I want to do is add a conditional sentence in the run block to decide which route to use. Is there a way to do this?
Thanks!