I am trying to create a project with React and Webpack. I am new in using these, but none of the solutions found related to the error that I have did work.
I have my StartPage.html, using StartPage.js which builds, is present in bundle.js and runs perfectly.
StartPage.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Copyright application</title>
</head>
<body>
Image Upload
<div id="root2"></div>
</body>
</html>
StartPage.js
import React, { Component } from 'react'
import ReactDOM from 'react-dom'
class StartPage extends Component {
render() {
return (
<div> StartPage </div>
);
}
}
ReactDOM.render(
<StartPage />,
document.getElementById('root2')
);
export default StartPage
But now I have ImageUploader.html which is build in the same style, but with a more complex side on ImageUploader.js
ImageUploader.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Upload Image</title>
</head>
<body>
<div id="image"></div>
</body>
</html>
ImageUploader.js - just the render and the DOM
render() {
return (
<div className="ImageUploader">
<nav className="navbar pure-menu pure-menu-horizontal">
IPFS File Upload DApp
</nav>
<main className="container">
<div className="pure-g">
<div className="pure-u-1-1">
<h1>Your Image</h1>
<p>This image is stored on IPFS & The Ethereum Blockchain!</p>
<h2>Upload Image</h2>
<form onSubmit={this.onSubmit} >
<input type='file' onChange={this.captureFile} />
<input type='submit' />
</form>
</div>
</div>
</main>
</div>
);
}
}
ReactDOM.render(
<ImageUploader />,
document.getElementById('image')
);
export default ImageUploader
This one is not created in bundle.js, although the webpack creates it.
Webpack folder after npm run build
But I have this error in the console: _registerComponent(...): Target container is not a DOM element .. which I have exhaustively researched and none of the found solutions worked for me: like changing the order of the div id="" with the bundle.js script
like this one, where the script is created automatically by webpack
I have spent quite a lot of time on this error or trying to find another solution to create the multiple pages with Webpack.
This is webpack.config.prod.js and dev is defined in the same way regarding the pages:
webpack.config.prod.js
plugins: [
new InterpolateHtmlPlugin({
PUBLIC_URL: publicUrl
}),
new HtmlWebpackPlugin({
template: './src/public/StartPage.html',
inject: true,
chunks: ['start'],
filename: 'StartPage.html'
}),
new HtmlWebpackPlugin({
template: './src/public/ImageUploader.html',
inject: true,
chunks: ['image'],
filename: 'ImageUploader.html'
}),
And I have specified the .js file in the entry of module.exports:
entry: {
image: './src/ImageUploader/ImageUploader.js',
start: './src/StartPage/StartPage.js'
If someone has an idea about what could be wrong with this..
Related
I am trying to render a simple HTML page in Nuxt,
I tried
layouts/empty.vue
<template>
<nuxt />
</template>
<script>
export default {
components: {},
};
</script>
and page
pages/simple.vue
<template>
<div>Redirecting to <a :href="dynamicUrl">{{dynamicUrl}}</a>.</div>
</template>
<script>
export default {
layout: "empty",
asyncData() {
// ... code to get dynamicUrl for the user
}
}
</script>
It works, but the page is loaded with styles, javascript other nuxt-related things.
What I need is - just a simple HTML page(like a static page) but with dynamic content(without any styles and javascript files).
How to do it in nuxt?
This is what I need in the output:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="refresh" content="0;url=\'.....dynamicUrl'" />
<title>Redirecting...</title>
</head>
<body>
<div>Redirecting to <a :href="dynamicUrl">{{dynamicUrl}}</a>.</div>
</body>
</html>
I am trying to integrate Paypal Payouts to my React app. However, I am stuck at the AAC part where I generate a component to let the user connect.
I tried to either load the script in index.html or to load it using the paypal-checkout package.
In the first case, I get told that paypal isn't defined and in the second case, I get told that I can't get the property driver from undefined.
Here is my code and my index.html.
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
const AACComponent = paypal.PayoutsAAC.driver('react', {
React,
ReactDOM
});
export class Affiliation extends Component {
render () {
const { t } = this.props;
const { data, candidates, hirees } = this.state;
return (
<Screen type="background-white" loading={this.state.loading} title={this.props.t('pages:affiliation')}>
<div className="container tw-space-y-3">
<div className="row">
<div className="col-lg-6 tw-mx-auto">
<div className="tw-card">
<h2 className="tw-text-xl tw-font-bold">{t('affiliationHired')}</h2>
<AACComponent
clientId={process.env.REACT_APP_PAYPAL_CLIENT_ID}
merchantId={process.env.REACT_APP_PAYPAL_MERCHANT_ID}
env={process.env.REACT_APP_PAYPAL_ENV}
pageType="login"
onLogin={() => {}} />
</div>
</div>
</div>
</div>
</Screen>
);
}
}
Affiliation.propTypes = {
t: PropTypes.func.isRequired
};
export default withRouter(withTranslation('common')(Affiliation));
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<base href="/" />
</head>
<script src="https://www.paypalobjects.com/payouts/js/payouts_aac.js"></script>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
</body>
</html>
I removed the unecessary code to not clutter my code.
Any idea?
I have two files created in LWC OSS app
first file at src/client/index.html and src/client/index.js
second file at src/client/index2.html and src/client/index2.js
I want to navigate to index2.html when clicked on the button in my-app (LWC component) which is appended using index.js
Am new to express js and node js. Please help!
Below is the code of the files,
index.html (File location: src/client/index.html)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>My LWC App</title>
<style>
body {
font-family: Arial, Helvetica, sans-serif;
}
</style>
<!-- Block zoom -->
<meta
name="viewport"
content="width=device-width, initial-scale=1, maximum-scale=1"
/>
<link rel="shortcut icon" href="./resources/favicon.ico" />
</head>
<body>
<div id="main"></div>
</body>
</html>
index.js (File location: src/client/index.js)
import { createElement } from 'lwc';
import MyApp from 'my/app';
const app = createElement('my-app', { is: MyApp });
// eslint-disable-next-line #lwc/lwc/no-document-query
document.querySelector('#main').appendChild(app);
app.html (File location: src/client/modules/my/app/app.html)
<template>
<!-- LWC sample component <my-greeting> -->
<div class="center greeting">
<!-- <my-greeting speed="slow"></my-greeting> -->
<my-greeting speed="medium"></my-greeting>
<!-- <my-greeting speed="fast"></my-greeting> -->
</div>
<div class="center">
<img src="./resources/lwc.png" />
</div>
<!-- Page code -->
<div class="center">
<div class="container">
<!-- prettier-ignore -->
<p class="info">
Edit <strong class="code">src/client/modules/my/app/app.html</strong>
<br />and save for live reload.
</p>
</div>
<div>
Learn LWC
<button onclick={redirect}>Click to redirect</button>
</div>
</div>
</template>
app.js (File location: src/client/modules/my/app/app.js)
import { LightningElement } from 'lwc';
export default class App extends LightningElement {
redirect(){
//code for to navigate to index2.html
}
}
index2.html (File Location: src/client/index2.html)
<html lang="en">
<body>
<div id="main"></div>
</body>
</html>
index2.js (File Location: src/client/index2.js)
import { createElement } from 'lwc';
import MyNewApp from 'my/newApp';
const app = createElement('my-app', { is: MyNewApp });
// eslint-disable-next-line #lwc/lwc/no-document-query
document.querySelector('#main').appendChild(app);
7.newApp.html (File location: src/client/modules/my/newApp/newApp.html)
<template>
<h1> Redirected to index2 --> newApp </h1>
</template>
Please let me know if you need more information.
Thanks,
Navaprasad
i try to add readspeaker webreader to my project in React. Working but only when push to edit options and pulse button play. When he read options and close, play again in webapp page and read OK. I send email to support im waiting for reply and adding the solution here...
For websites that heavily use JS to build the website client-side, the solution is to add general: { usePost: true }. That will send the whole loaded website in base64 to Readspeaker servers instead of just sending the URL that needs to be read.
Example:
public/index.html:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1"
/>
</head>
<body>
<noscript>
You Need JS
</noscript>
<div id="root"></div>
<script>
window.rsConf = {
params: `//cdn1.readspeaker.com/script/${ID_CUSTOMER}/webReader/webReader.js?pids=wr`,
general: { usePost: true }
};
</script>
</body>
</html>
important: window.rsConf
Component .jsx
import React, { useEffect } from "react";
import { Container } from "reactstrap";
const ReadSpeakerReader = () => {
useEffect(() => {
var oHead = document.getElementsByTagName('HEAD').item(0);
var oScript= document.createElement("script");
oScript.type = "text/javascript";
oScript.src=`//cdn1.readspeaker.com/script/${ID_USER}/webReader/webReader.js`;
oHead.appendChild(oScript);
}, [])
return (
<React.Fragment>
<section className="readspeaker-button-section mt-3 mb-2">
<Container>
<div id="readspeaker_button1" className="rs_skip rsbtn">
<a rel="nofollow"
className="rsbtn_play"
accessKey="L"
title="Escucha esta página utilizando ReadSpeaker webReader"
href={`//app-na.readspeaker.com/cgi-bin/rsent?customerid=${ID_CUSTOMER}&lang=es_co&readid=main-content-privateBCI&url=${encodeURIComponent( document.location.href )}`}
>
<span className="rsbtn_left rsimg rspart">
<span className="rsbtn_text">
<span>Escuchar</span>
</span>
</span>
<span className="rsbtn_right rsimg rsplay rspart"></span>
</a>
</div>
</Container>
</section>
</React.Fragment>
)
}
export default ReadSpeakerReader
With this your readspeaker webreader working well when your component is mounted in DOM
I want to integrate a component into existing legacy application which uses angular js 1. I want to replace it with vuejs 3 and problem is that I cannot use webpack. I have created a standalone webpage with vuejs3 and bootstrap vue but somehow the component does not render. Any help or guidance what I am doing wrong? Is it doable with vuejs 3 to run a standalone component without any webpack?
Interesting thing is that it render the html page with a warning in console.
Index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Test</title>
<!-- Add Bootstrap and Bootstrap-Vue CSS to the <head> section -->
<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap/dist/css/bootstrap.min.css"/>
<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap-vue#latest/dist/bootstrap-vue.min.css"/>
<!-- Add Vue and Bootstrap-Vue JS just before the closing </body> tag -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/3.0.1/vue.global.js"></script>
<script src="https://unpkg.com/bootstrap-vue#latest/dist/bootstrap-vue.min.js"></script>
</head>
<body>
<h1>Static HTML With Vue.js Single File Component</h1>
<div id="app">
</div>
<script type="module">
import app from './app.js'
const {createApp} = Vue;
createApp(app).mount('#app');
</script>
</body>
</html>
app.js
export default {
data() {
return {
perPage: 3,
currentPage: 1,
items: [
{ id: 1, first_name: 'Fred', last_name: 'Flintstone' },
.............
]
}
},
computed: {
rows() {
return this.items.length
}
},
template: `
<div class="overflow-auto">
<b-table
id="my-table"
:items="items"
:per-page="perPage"
:current-page="currentPage"
small
></b-table>
<b-pagination v-model="currentPage" :total-rows="rows" :per-page="perPage" aria-controls="my-table"></b-pagination>
<p class="mt-3">Current Page: {{ currentPage }}</p>
</div>
`,
};
Version 2.x.x of BootstrapVue does not support Vue 3.
The next major release BootstrapVue 3 (not yet released), will however support it. As of this post, an alpha of BootstrapVue 3 is aimed for Q1 of 2021.