I have the following use case: I need to generate static files with React and Next.js. For that I extended the next.config.js with the following content:
module.exports = {
exportTrailingSlash: true,
exportPathMap: async function () {
const paths = {
'/': { page: '/' }
}
const errorPages = [
{ id: 1, name: '404', lang: 'en' },
{ id: 2, name: '500', lang: 'en' }
]
errorPages.forEach(errorPage => {
paths[`/errorPage/${errorPage.id}`] = {
page: '/errorPage/[id]',
query: { id: errorPage.id }
}
})
return paths
},
}
This totally works. The files are beeing generated in the out folder after npm export
An additional use case however is this one:
The index.html file needs to work everywhere, not just in the exact place it has in the out folder. For example another webapp queries an API which scans the index.html and returns the html as string from that file. This html string has to work, but the references for the js files/bundles are relative (see link and script tags):
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width,minimum-scale=1,initial-scale=1"
/>
<meta name="next-head-count" content="2" />
<link
rel="preload"
href="/_next/static/UkokJ2QynwMCza2ya8Vuz/pages/index.js"
as="script"
/>
<link
rel="preload"
href="/_next/static/UkokJ2QynwMCza2ya8Vuz/pages/_app.js"
as="script"
/>
<link
rel="preload"
href="/_next/static/runtime/webpack-91b117697e716c22a78b.js"
as="script"
/>
<link
rel="preload"
href="/_next/static/chunks/framework.94bc9fd9a7de53a90996.js"
as="script"
/>
<link
rel="preload"
href="/_next/static/chunks/commons.6419ced117edf62014da.js"
as="script"
/>
<link
rel="preload"
href="/_next/static/runtime/main-2ba45c6c0e61dfa5f796.js"
as="script"
/>
</head>
<body>
<div id="__next">
<div style="margin:20px;padding:20px;border:1px solid #DDD">
<h1>Error Pages</h1>
<ul>
<li>test a</li>
<li>test 2</li>
</ul>
</div>
</div>
<script
nomodule=""
src="/_next/static/runtime/polyfills-2889d9d9fcf08314dd3a.js"
></script>
<script
async=""
data-next-page="/"
src="/_next/static/UkokJ2QynwMCza2ya8Vuz/pages/index.js"
></script>
<script
async=""
data-next-page="/_app"
src="/_next/static/UkokJ2QynwMCza2ya8Vuz/pages/_app.js"
></script>
<script
src="/_next/static/runtime/webpack-91b117697e716c22a78b.js"
async=""
></script>
<script
src="/_next/static/chunks/framework.94bc9fd9a7de53a90996.js"
async=""
></script>
<script
src="/_next/static/chunks/commons.6419ced117edf62014da.js"
async=""
></script>
<script
src="/_next/static/runtime/main-2ba45c6c0e61dfa5f796.js"
async=""
></script>
<script
src="/_next/static/UkokJ2QynwMCza2ya8Vuz/_buildManifest.js"
async=""
></script>
</body>
</html>
Is there a way to tell next to include this js files inline?
What I tried:
I am trying to use HtmlWebpackPlugin and HtmlWebpackInlineSourcePlugin and updated next.config.js like this:
const HtmlWebpackPlugin = require('html-webpack-plugin')
const HtmlWebpackInlineSourcePlugin = require('html-webpack-inline-source-plugin')
module.exports = {
exportTrailingSlash: true,
exportPathMap: async function () {
const paths = {
'/': { page: '/' }
}
const errorPages = [
{ id: 1, name: '404', lang: 'en' },
{ id: 2, name: '500', lang: 'en' }
]
errorPages.forEach(errorPage => {
paths[`/errorPage/${errorPage.id}`] = {
page: '/errorPage/[id]',
query: { id: errorPage.id }
}
})
return paths
},
webpack: (config, { buildId, dev, isServer, defaultLoaders, webpack }) => {
// Note: we provide webpack above so you should not `require` it
// Perform customizations to webpack config
// Important: return the modified config
config.plugins.push(new webpack.IgnorePlugin(/\/__tests__\//))
config.plugins.push(
new HtmlWebpackPlugin({
inlineSource: '.(js|css)$' // embed all javascript and css inline
})
)
config.plugins.push(new HtmlWebpackInlineSourcePlugin())
return config
}
}
it doesn't transform the resources into the inline format and keeps linking them. Is there a way to achieve the desired result with any other webpack addition or is the config wrong?
thanks in advance!
EDIT: this is my project.json dependency section:
"dependencies": {
"isomorphic-unfetch": "^3.0.0",
"next": "latest",
"react": "^16.12.0",
"react-dom": "^16.12.0",
"html-webpack-inline-source-plugin": "0.0.10",
"html-webpack-plugin": "^3.2.0"
}
What I ended up doing is using a StaticDocument instead of the default Document (when in the production environment). Then my StaticDocument is used with CustomHead during export. In there, all link preloads are removed. Like this, no link tag will be rendered in the <head> of the final exported HTML page.
~/pages/_document.js
import Document, { Main, Head } from 'next/document'
class CustomHead extends Head {
render () {
const res = super.render()
function transform (node) {
// remove all link preloads
if (
node &&
node.type === 'link' &&
node.props &&
node.props.rel === 'preload'
) {
return null
}
if (node && node.props && node.props.children) {
return {
...node,
props: {
...node.props,
children: Array.isArray(node.props.children)
? node.props.children.map(transform)
: transform(node.props.children)
}
}
}
if (Array.isArray(node)) {
return node.map(transform)
}
return node
}
return transform(res)
}
}
class StaticDocument extends Document {
render () {
return (
<html>
<CustomHead />
<body>
<Main />
</body>
</html>
)
}
}
export default process.env.NODE_ENV === 'production'
? StaticDocument
: Document
Related
I am using Next js with i18n-routing with following next.config.js
module.exports = {
i18n: {
locales: ['en', 'fr', 'nl'],
defaultLocale: 'en',
},
}
To set custom html lang attribute. I am overriding html lang attribute to en-IN using _document.js
export default function Document() {
return (
<Html lang="en-IN"> // overriding it to en-IN
<Head />
<body>
<Main />
<NextScript />
</body>
</Html>
)
}
But when I try to add query params to the url using router.replace(). It changes the html lang attribute to current local i.e. "en".
export default function IndexPage(props) {
const router = useRouter();
const addQueryParam = () => {
router.replace(
{ query: { foo: 'bar' } },
{ query: { foo: 'bar' } },
{ shallow: true }
);
};
return (
<div>
<h1>Index page </h1>
<button onClick={addQueryParam}>Add Query Param</button>
</div>
);
}
StackBlitz Code Sample: In this sample code when i click on button, it adds query param to url and also changes the html lang attribute to en.
I came to know through Next.js i18n-routing documentation that it does it for SEO.
So how can I prevent Next.js from changing html lang attribute?
In a https://vue-treeselect.js.org/ component, how can I load json? My code is not working
<html>
<head>
<!-- include Vue 2.x -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue#^2"></script>
<!-- include vue-treeselect & its styles. you can change the version tag to better suit your needs. -->
<script src="https://cdn.jsdelivr.net/npm/#riophae/vue-treeselect#^0.4.0/dist/vue-treeselect.umd.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/#riophae/vue-treeselect#^0.4.0/dist/vue-treeselect.min.css">
</head>
<body>
<div id="app">
<treeselect v-model="value" :multiple="true" :options="options" />
</div>
</body>
<script>
// register the component
Vue.component('treeselect', VueTreeselect.Treeselect)
var tree = new Vue({
el: '#app',
data: {
// define the default value
value: null,
// define options
options: function () {
return JSON.parse(this.json);
}
},
})
$.getJSON("my.json", function (json) {
tree.json = json;
});
</script>
</html>
Put the following code inside the mounted hook :
let vm = this;
$.getJSON("https://jsonplaceholder.typicode.com/users", function(json) {
vm.options = json;
});
you should update the options property directly in the callback of ajax request.
<html>
<head>
<!-- include Vue 2.x -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<!-- include vue-treeselect & its styles. you can change the version tag to better suit your needs. -->
<script src="https://cdn.jsdelivr.net/npm/#riophae/vue-treeselect#^0.4.0/dist/vue-treeselect.umd.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/#riophae/vue-treeselect#^0.4.0/dist/vue-treeselect.min.css">
</head>
<body>
<div id="app">
<treeselect v-model="value" :multiple="true" :options="options" />
</div>
</body>
<script>
// register the component
Vue.component('treeselect', VueTreeselect.Treeselect)
var tree = new Vue({
el: '#app',
data: {
// define the default value
value: null,
// define options
options: []
},
mounted() {
let vm = this;
$.getJSON("https://jsonplaceholder.typicode.com/users", function(json) {
vm.options = json;
});
}
})
</script>
</html>
Can't use Node.js, jsx, any extension or server, or any other thing (rule at work).
I have an HTML file with three scripts using React.js, this is the code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<script src="https://unpkg.com/react#16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom#16/umd/react-dom.development.js" crossorigin></script>
<script src="https://unpkg.com/babel-standalone#6.15.0/babel.min.js" crossorigin></script>
<title>HTML with multiple React.js scripts</title>
</head>
<body>
<p>HTML with multiple scripts using React.js... without Node.js, jsx or any other thing</p>
<div>
<div id="divComponent1"></div>
<div id="divComponent2"></div>
<div id="divComponent3"></div>
</div>
<script src="component1.js"></script>
<script src="component2.js"></script>
<script src="component3.js"></script>
</body>
</html>
component1.js:
'use strict';
const e = React.createElement;
class LikeButton extends React.Component {
constructor(props) {
super(props);
this.state = { liked: false };
}
render() {
if (this.state.liked) {
return 'This is the first React.js component.';
}
return e(
'button',
{ onClick: () => this.setState({ liked: true }) },
'Component number one!'
);
}
}
const domContainer = document.querySelector('#divComponent1');
ReactDOM.render(e(LikeButton), domContainer);
component2.js:
'use strict';
const list =
React.createElement('div', {},
React.createElement('h1', {}, 'Component number two'),
React.createElement('ul', {},
[
React.createElement('li', {}, 'Without Node.js'),
React.createElement('li', {}, 'Without jsx'),
React.createElement('li', {}, 'Without any server')
]
)
);
const divComponent2 = document.querySelector('#divComponent2');
ReactDOM.render(list, divComponent2);
component3.js:
var x = "Johnny B. Goode (Component three)";
class JohnnyBGoode extends React.Component {
render() {
return React.createElement('div', {},
React.createElement("h1", {}, x),
React.createElement("audio", { id: "woof", controls: "controls", src: "johnny.mp3"}),
);
}
}
const divComponent3 = document.querySelector('#divComponent3');
ReactDOM.render(
React.createElement(JohnnyBGoode, {}, null),
document.getElementById('divComponent3')
);
So, I want to add only one script in the HTML file, and run/render all the others scripts/components from there, something like that:
<script src="index.js"></script>
How can I achieve this? Remember, can't use Node or any other thing.
I've created a react application following the steps on the React Website, but I'm having issues utilizing the React-Select Library (particularly the Select Component).
I can only use cdn files to load dependencies, including the React-Select cdn file located on cdnjs
https://cdnjs.cloudflare.com/ajax/libs/react-select/2.1.2/react-select.js
I'm getting the following error with my react-app:
ReferenceError: Select is not defined[Learn More]
See below for my script and here for my codepen
<html>
<head>
<meta charset="utf-8">
<script src="https://unpkg.com/react#15.0.0/dist/react-with-addons.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/redux/3.0.4/redux.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-redux/4.4.5/react-redux.min.js"></script>
<script src="https://unpkg.com/react-dom#0.14.0/dist/react-dom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-select/2.1.2/react-select.js"></script>
<script src="https://unpkg.com/babel-standalone#6/babel.min.js"></script>
<title>Using React Select CDN</title>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
const options = [
{ value: 'chocolate', label: 'Chocolate' },
{ value: 'strawberry', label: 'Strawberry' },
{ value: 'vanilla', label: 'Vanilla' }
];
class App extends React.Component {
state = {
selectedOption: null,
}
handleChange = (selectedOption) => {
this.setState({ selectedOption });
console.log(`Option selected:`, selectedOption);
}
render() {
const { selectedOption } = this.state;
return (
<div>
Test Text
<Select
value={selectedOption}
onChange={this.handleChange}
options={options}
/>
</div>
);
}
}
ReactDOM.render(<App/>, document.querySelector("#root"))
</script>
</body>
</html>
I've also tried the following which throws the same error
<html>
<head>
<meta charset="utf-8">
<script src="https://unpkg.com/react#15.0.0/dist/react-with-addons.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/redux/3.0.4/redux.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-redux/4.4.5/react-redux.min.js"></script>
<script src="https://unpkg.com/react-dom#0.14.0/dist/react-dom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-select/2.1.2/react-select.js"></script>
<script src="https://unpkg.com/babel-standalone#6/babel.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.6/require.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-select/2.1.2/react-select.js"></script>
<title>Using React Select CDN</title>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
require(['react-select'])
import Select from 'react-select';
const options = [
{ value: 'chocolate', label: 'Chocolate' },
{ value: 'strawberry', label: 'Strawberry' },
{ value: 'vanilla', label: 'Vanilla' }
];
class App extends React.Component {
state = {
selectedOption: null,
}
handleChange = (selectedOption) => {
this.setState({ selectedOption });
console.log(`Option selected:`, selectedOption);
}
render() {
const { selectedOption } = this.state;
return (
<div>
Test Text
<Select
value={selectedOption}
onChange={this.handleChange}
options={options}
/>
</div>
);
}
}
ReactDOM.render(<App/>, document.querySelector("#root"))
</script>
</body>
</html>
How can I get React-Select to work? Perhaps
It looks for the latest react-select you need to add the latest dependencies -
Codepen
<script src="https://unpkg.com/react#16.7.0/umd/react.production.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/emotion#9.2.12/dist/emotion.umd.min.js"></script>
<script src="https://unpkg.com/react-dom#16.7.0/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/prop-types#15.5.10/prop-types.min.js"></script>
<script src="https://unpkg.com/react-input-autosize#2.2.1/dist/react-input-autosize.min.js"></script>
<script src="https://unpkg.com/react-select#2.1.2/dist/react-select.min.js"></script>
<script src="https://unpkg.com/babel-standalone#6/babel.min.js"></script>
Beginner programmer here.
I've been attempting to use CSS positioning to fix the Input element in this code. Essentially what I would like to do is let the chat Input float wherever I scroll, which I thought would be an easy fix with CSS fixed positioning.
However, I'm at an impasse as I've tried utilizing many different CSS methods to position the Input element. Each time I "fix" the position it destroys the layout of the rest of the page. I apologize if the code is unrefined as it is a collaborative project. All I want is for the Input to stay fixed regardless of where I scroll though I'm unsure if the problem lays deeper in the code.
I suspect it may have something to do with the way "Input" is rendered in the JSX (Javascript) file below. But I don't want to mess with another developer's code until I'm absolutely positive I can fix it. I apologize if this was asked before; I roamed for weeks looking for a solution and could not find one. If I'm missing any details I would be more than happy to provide.
Edit: The project I am working on is open sourced. You can find the project here.
The git branch I am working on is currently 'profile-page,' with the following files below:
sensorium-web\src\components\user\profileComponents\styles\ profile.css
sensorium-web\src\components\user\ Profile.jsx
You can open a test server using 'npm start' within the terminal. Though you will have to register in order to access the Chat.
import React, { Component, ReactDOM } from 'react'
import PropTypes from 'prop-types';
import { withRouter } from 'react-router-dom';
import { Image } from 'react-bootstrap';
import {Container, Row, Col, Jumbotron} from 'reactstrap';
import Fade from 'react-reveal/Fade';
import '../style/Home.css';
import '../style/style.css';
import '../style/responsive.css';
import './profileComponents/styles/profile.css';
import firebaseConf, {firebase} from './../../config/FirebaseConfig';
import ProfileDetails from './profileComponents/ProfileDetails';
import ProfileMenu from './profileComponents/ProfileMenu';
import Chat from './profileComponents/Chat';
import { Input, Button } from 'react-chat-elements';
import moment from 'moment';
class Profile extends Component {
constructor(props, context) {
super(props,context);
console.log(props);
this.state = {
authUser: props.authUser,
dateOfBirth: '',
desiredClusters: {},
name: '',
lastName:'',
secondLastName: '',
numSensatesInCluster: 0,
sensatesInCluster: [],
photo: require('./profilepic.png'),
messages: []
};
this.db = firebaseConf.firestore();
const settings = { timestampsInSnapshots: true};
this.db.settings(settings);
this.clusterChatId = '';
this.sensateListener;
this.clusterListener;
this.chatListener;
this.sensatesQueryArray = [];
this.sensatesList = [];
this.sensateListener = this.db.collection("sensies").doc(this.state.authUser.uid)
.onSnapshot((doc) =>{
if(doc.exists){
const sensate = doc.data();
this.clusterListener = this.db.collection("clusters").where("sensates."+doc.id, "==", true)
.onSnapshot((querySnapshot) =>{
querySnapshot.forEach((doc)=>{
const clusterData = doc.data();
let numSensatesInCluster = 0;
this.sensatesQueryArray = [];
Object.keys(clusterData.sensates).forEach((sensateId)=>{
if(clusterData.sensates[sensateId]){
numSensatesInCluster = numSensatesInCluster + 1;
this.sensatesQueryArray.push(
this.db.collection("sensies").doc(sensateId).get()
);
}
});
//subtract his own reference
numSensatesInCluster = numSensatesInCluster - 1;
this.setState({numSensatesInCluster: numSensatesInCluster});
this.sensatesList = [];
Promise.all(this.sensatesQueryArray).then((sensatesMembers)=>{
sensatesMembers.forEach((sensateMemberData)=>{
if(sensateMemberData.exists){
const sensateMemberInfo = sensateMemberData.data();
this.sensatesList.push({
uid: sensateMemberInfo.uid,
name: sensateMemberInfo.name,
lastName: sensateMemberInfo.lastName
});
}
});
this.setState({
sensatesInCluster: this.sensatesList
});
}).catch((err)=>{
console.log(err);
});
//Cluster chat
this.clusterChatId = doc.id;
this.chatListener = this.db.collection("clusters").doc(this.clusterChatId).collection('messages')
.orderBy("date", "desc").limit(50)
.onSnapshot((messages)=>{
var chatMessages = [];
messages.forEach((message)=> {
var msg = message.data();
//position
if(msg.user._id === this.state.authUser.uid){
msg['position'] = 'right';
}else{
msg['position'] = 'left';
}
console.log()
if(msg.date && msg.date.seconds){
msg['dateString'] = moment(msg.date.seconds * 1000).format('hh:mm a');
msg['date'] = moment(msg.date.seconds * 1000);
}
msg['title'] = msg.user.name;
msg['titleColor'] = 'blue'
chatMessages.push(msg);
});
var count = 0;
var chatMessagesReversed = [];
for(var i=chatMessages.length-1; i>=0; i--){
count = count + 1;
chatMessagesReversed.push(chatMessages[i])
}
this.setState({
messages: chatMessagesReversed
})
});
});
});
this.setState(sensate);
}else{
console.log("Sensate doesn't exist");
alert("Sensate doesn't exist");
}
});
}
sendMessageToChat(){
const serverDate = firebase.firestore.FieldValue.serverTimestamp();
console.log(serverDate);
const date = new Date();
const dateNumber = date.getTime();
const message = {
"_id": dateNumber,
"text": this.chatText.state.value,
"createdAt": serverDate,
"system": false,
"user": {
"_id": this.state.authUser.uid,
"name": this.state.name,
"avatar": this.state.photo
},
"id": dateNumber,
"type": "text",
"date": serverDate,
"status": "sent",
"avatar": this.state.photo
}
console.log(message, this.chatText.state.value)
this.chatText.clear();
this.db.collection("clusters").doc(this.clusterChatId).collection('messages').add(message).then((res)=>{
console.log(res, 'update state');
}).catch((err)=>{
console.log(err);
});
}
componentDidUpdate(prevProps) {
if (this.props.path === this.props.location.pathname && this.props.location.pathname !== prevProps.location.pathname) {
window.scrollTo(0, 0)
}
}
logout(){
//unsubscribe from all listeners to avoid memory leaks
this.sensateListener();
this.clusterListener();
if(this.chatListener){
this.chatListener();
}
firebaseConf.auth().signOut().then(()=> {
this.props.history.push("/");
}).catch((error)=> {
console.log(error);
alert('An error occurred during sign-out.');
this.props.history.push("/");
});
}
render() {
return (
<Row noGutters id="outer-container">
<Col md={3} className="no-padd">
<ProfileMenu photo={this.state.photo} name={this.state.name}
lastName={this.state.lastName} numSensatesInCluster={this.state.numSensatesInCluster}
sensatesInClusterData={this.state.sensatesInCluster}
menuOpen={this.props.menuOpen} handleStateChange={this.props.handleStateChange}
bigScreen={this.props.bigScreen}>
</ProfileMenu>
<p>{this.props.menuOpen}</p>
</Col>
<Col md={9} className="mt-7" id="page-wrap">
<Chat messages={this.state.messages}/>
<div className='input'>
<Input
placeholder="Type your message"
defaultValue=""
ref={(input) => { this.chatText = input; }}
multiline={true}
// buttonsFloat='left'
onKeyPress={(e) => {
if (e.shiftKey && e.charCode === 13) {
return true;
}
if (e.charCode === 13) {
if(this.chatText.state.value && /\S/.test(this.chatText.state.value)){
this.sendMessageToChat();
}
e.preventDefault();
return false;
}
}}
rightButtons={
<Button
text='Send'
type='outline'
color='black'
onClick={this.sendMessageToChat.bind(this)} />
} />
</div>
</Col>
</Row>
)
}
}
export default withRouter(Profile);
.no-padd{
padding: 0 !important;
}
.input{
flex: 1 0 auto;
bottom: 0px;
min-width: 50%;
}
.mt-7 {
position: absolute;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, user-scalable=no">
<meta name="theme-color" content="#000000">
<meta name="keywords" content="Sense8 Sensorium sensorium.online sensates find cluster">
<meta name="description" content="Sensorium.Online is a social networking website based on the idea of Sensorium from Netflix original series Sense8.">
<meta property="og:title" content="Sensorium.online | Pre-registration">
<meta property="og:description" content="Sensorium.Online is a social networking website based on the idea of Sensorium from Netflix original series Sense8.">
<meta property="og:image" content="%PUBLIC_URL%/assets/sense.jpg">
<meta property="og:url" content="sensorium.online">
<meta name="twitter:site" content="#SensoriumApp" />
<meta name="twitter:card" value="Sensorium.Online is a social networking website based on the idea of Sensorium from Netflix original series Sense8." />
<meta name="twitter:image" content="%PUBLIC_URL%/assets/sense.jpg" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
<link rel="stylesheet" type="text/css" href="%PUBLIC_URL%/index.css">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="%PUBLIC_URL%/assets/stylesheets/bootstrap337.min.css" >
<!-- <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous"> -->
<link rel="stylesheet" href="https://cdn.linearicons.com/free/1.0.0/icon-font.min.css">
<!-- MDB theme -->
<link href="%PUBLIC_URL%/assets/stylesheets/mdb.min.css" rel="stylesheet">
<title>Sensorium</title>
</head>
<body>
<noscript>
You need to enable JavaScript to run this app.
</noscript>
<div id="root"></div>
<!-- JQuery -->
<script type="text/javascript" src="%PUBLIC_URL%/assets/javascript/jquery321.min.js"></script>
<!-- MDB core JavaScript -->
<script type="text/javascript" src="%PUBLIC_URL%/assets/javascript/mdb.min.js"></script>
<!-- Socials share -->
<script async src="%PUBLIC_URL%/assets/javascript/addtoany.js"></script>
</body>
</html>
You should try to wrap your input element in a div element to make fixed positioning work.