Hello I am new to stack overflow and even JS so sorry in advance if i get something wrong.
So i am having issues with trying to import a navbar from daisyUI, I made a file called navBar.js and i wrote this:
const navbar = () => {
return (
<div className="navbar bg-primary text-primary-content">
<a className="btn btn-ghost normal-case text-xl">daisyUI</a>
</div>
);
}
export default navbar;
and for my app.js file:
import navBar from "./navBar";
import './App.css';
import {useState, useEffect} from "react";
import {db} from "./firebase-config"
import {collection, getDocs, addDoc} from "firebase/firestore";
function App() {
return (
<div className="flex">
<navBar />
</div>
);
}
export default App;
the issue is that the server shows a blank file. I have two errors:
ERROR in ./src/App.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: /src/App.js: Unexpected token, expected "..." (10:10)
8 | return (
9 | <div className="flex"{
> 10 | <navBar />
| ^
11 | </div>
12 | }
13 | );
And
ERROR in [eslint]
src/App.js
Line 10:10: Parsing error: Unexpected token, expected "..." (10:10)
Can someone please help me with this? I honestly searched around and couldn't find nothing.
Thank you
I tried searching online for some form of help. I was following this tutorial on youtube as well.
text
Related
I am trying to include Google Adsense in a React component using 'react-adsense'.
I have followed the creator's instructions here.
I am getting the following error:
{message: 'adsbygoogle.push() error: No slot size for availableWidth=0', name: 'TagError', pbr: true, stack: 'TagError: adsbygoogle.push() error: No slot size f…oogle.js?client=ca-pub-1034524975771842:102:1098)'}
I have looked into this error and tried the suggestions here, here, and here.
From what I can tell it has something to do with a parent div's width. I've gone through and made sure everything has a set width but no luck. Am I overlooking something super obvious??
REACT COMPONENT
import React from 'react';
import '../styles/ads.css';
import AdSense from 'react-adsense';
const Ads = () => {
return (
<div className='ads'>
<AdSense.Google
client='ca-pub-1034524975771842'
slot='3468851388'
style={{ display: 'block' }}
format='auto'
responsive='true'
layoutKey='-gw-1+2a-9x+5c'
/>
</div>
);
};
export default Ads;
APP.JS
import './styles/app.css';
import React from 'react';
import Ads from './components/Ads';
function App() {
return (
<div className='app'>
<Ads />
</div>
);
}
export default App;
I'm just learning some react stuff at the moment and am running into an error when trying to implement https://www.npmjs.com/package/textarea-markdown this.
I think the error comes from the fact that the script is attempting to change the textarea before the textarea is loaded, but I don't know how to fix it.
Any help is much appreciated
Code below
text.js
import React, { Component } from 'react';
import './texts.css';
import TextareaMarkdown from 'textarea-markdown'
let textarea = document.querySelector("textarea");
new TextareaMarkdown(textarea);
function Texts() {
return (
<div >
<h2>Editor</h2>
<textarea id="editor" data-preview="#preview"></textarea>
<h2>Preview</h2>
<div id="preview"></div>
</div>
);
}
export default Texts;
App.js
import logo from './logo.svg';
import './App.css';
import Texts from './components/texts/texts';
function App() {
return (
<div className="App">
<header className="App-header">
<Texts></Texts>
</header>
</div>
);
}
export default App;
The error I receive is this
TypeError: Cannot read property 'getAttribute' of null
TextareaMarkdown.setPreview
node_modules/textarea-markdown/lib/textarea-markdown.js:65
62 | value: function setPreview() {
63 | var _this2 = this;
64 |
> 65 | var selector = this.textarea.getAttribute('data-preview');
| ^ 66 | if (selector) {
67 | Array.from(document.querySelectorAll(selector), function (e) {
68 | return _this2.previews.push(e);
View compiled
You can use you following code inside a useEffect
as like following
import React, { Component, useEffect } from 'react';
import './texts.css';
import TextareaMarkdown from 'textarea-markdown'
function Texts() {
useEffect(()=>{
let textarea = document.querySelector("textarea");
new TextareaMarkdown(textarea);
},[]);
return (
<div >
<h2>Editor</h2>
<textarea id="editor" data-preview="#preview"></textarea>
<h2>Preview</h2>
<div id="preview"></div>
</div>
);
}
export default Texts;
TaskList.js
import React from 'react';
export default () => {
return {
<p>
Hi
</p>
};
}
I wonder why couldn't I use the HTML code here in this TaskList.js file in order to make the word "Hi" appear in the front end (localhost:3000) ?
I also found the following error in the front end:
Failed to compile
src\TaskList.js
Line 6:9: 'Hi' is not defined no-undef
Search for the keywords to learn more about each error.
and here's another file that's related to TaskList.js
App.js
import logo from './logo.svg';
import './App.css';
import React from 'react';
import TaskList from './TaskList.js';
function App() {
const tasks = [
{id: 0, description: 'do this', done: false},
{id: 1, description: 'do that', done: false}
];
return (
<div>
<TaskList />
</div>
);
}
export default App;
I came up with the above code as I followed the instructor of a course named "Web Development for Blockchain". Unfortunately, he hasn't answered this question for me yet. So, I post this question here as I really need help from you guys on StackOverflow.
Return like this (change the {} with () )
return (
<p>
Hi
</p>
)
MasonryPost
src/components/common/masonry-post.js:4
import React from 'react'
export default function MasonryPost ({post, tagsOnTop}) {
const style = {backgroundImage: `url("${require(`../../assets/images/${post.image}`)}")`};
return (
<a className="masonry-post overlay" style={style} href={post.link}>
Answer
How about url(`${require(../../assets/images/${post.image})}`)}
I mena back tick > `
I have compiled the below code it's getting me the Parsing error: Unexpected token, expected "..."
Error Don't know why.
import React,{Component} from 'react';
import EditableContetnt from './Fuck';
import Mymenu from './Mymenu';
import 'react-contexify/dist/ReactContexify.min.css';
import { MenuProvider } from 'react-contexify';
class App extends Component
{
constructor()
{
super();
this.state={name:'Hello World'};
}
render()
{
const {name}=this.state;
console.log(name);
return(
<div>
<MenuProvider id="menu_id">
<EditableContetnt {name}/>
</MenuProvider>
<Mymenu/>
</div>
)
}
}
export default App;
when i run the module it shows Parsing error: Unexpected token, expected "..."
Try to pass your name variable to MenuProvider component different way. Like this:
<EditableContetnt name={name} />
try to change: import 'react-contexify/dist/ReactContexify.min.css';
to
import './react-contexify/dist/ReactContexify.min.css';
(if it's in the same directory)