could someone help me please?
i have got problems with ual-anchor
what i do:
cd /public_html
yarn add ual-reactjs-renderer
yarn add ual-anchor
index.html
<script type="module" src="./anchor.js">
anchor.js
import { Anchor } from './ual-anchor';
import { UALProvider, withUAL } from './ual-reactjs-renderer';
and got
was blocked because of a disallowed mime type (“text/html”).
what is wrong?
Related
I am self-learning react and I am just confused about a lot of things.
I thought that if I add React to my index.html via a script like the below:-
//index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bill Details</title>
</head>
<body>
<div id="billTable"></div>
<script src="BillTable.js" type="text/javascript"></script> ------------- Problem Line 1
</script>
</body>
</html>
and this is my js file where I am trying to return react component
//BillTable.js
import React from "react";
import ReactDOM from "react-dom";
function BillTable() {
return <h1>HELLO TABLE</h1>;
}
ReactDOM.render(<BillTable/>, document.getElementById("billTable"));
when I try to open index.html directly in firefox or through express server I get the below error in console:-
Uncaught SyntaxError: import declarations may only appear at top level of a module.
I then got rid of this error by changing the script type in problem line 1 in index.html to
<script src="BillTable.js" type="text/babel"></script>
but then also my webpage is completely blank and even console is not showing any errors.
Please suggest how to solve this issue. I am right now trying to learn React with functional approach only, so if any changes are required to be done on the react side, please make them in the functional approach.
I don't think you have included the correct packages to handle React components and JSX yet. These packages react, react-dom, etc. are usually in a package.json and are required to tell the browser what tools will be used to run the code. These packages handle the "script" or components you create and places the elements constructed in your components to the DOM. You can solve this by loading react with additional script tags before your component's script tag. This will let the browser know how and what to use to run your react component. Also, in your function, it does not know that it is a React Component. Check out an explanation for why you would have to use React.createElement I have attached an example of using only an index.html page here:
example of using an index.html page
Your Component file:
"use strict";
function BillTable() {
return React.createElement("h1", "", "HELLO TABLE");
}
const domContainer = document.querySelector("#billTable");
const root = ReactDOM.createRoot(domContainer);
root.render(React.createElement(BillTable));
and your index.html:
<body>
<div id="billTable"></div>
<!-- Load your React packages -->
<script
src="https://unpkg.com/react#18/umd/react.development.js"
crossorigin
></script>
<script
src="https://unpkg.com/react-dom#18/umd/react-dom.development.js"
crossorigin
></script>
<!-- Load your React component. -->
<script src="BillTable.js"></script>
</body>
Let's start with jQuery. I first ran:
npm install jquery-ui --save-dev
Then in my own file custom.js I added the following lines:
import $ from 'jquery';
$('#logo').on('click', function(){
alert("Hello")
})
In the main html file I imported the custom js file
<script src="{{ asset('js/custom.js') }}" type="module"></script>
Does not work and I get the error:
Uncaught TypeError: Error resolving module specifier “jquery”. Relative module specifiers must start with “./”, “../” or “/”.
If I remove the type=module from the main html file I get a different error:
Uncaught SyntaxError: import declarations may only appear at top level of a module.
What am I doing wrong and what step miss to install jQuery so it can work pls?
Next I tried Alpine JS
I cleared my custom.js file and tried to install alpine js doing the following:
npm install alpinejs
then in my empty custom.js file:
import Alpine from 'alpinejs'
window.Alpine = Alpine
Alpine.start()
Then I ran
npm run dev
In the main html file I added the script tag
<script src="{{ asset('js/app.js') }}" defer></script>
and in the body to test if it works I added:
<div x-data="{ show: false }">
<button #click="show = !show">Show</button>
<h1 x-show="show">Alpine Js is working !</h1>
</div>
<hr>
<div x-data>
<button #click="alert('Alpine Js is working !')">Click</button>
</div>
If I click the button I get the following error in the console:
[Vue warn]: Property or method "alert" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.
(found in <Root>) 2 app.js:28785:15
[Vue warn]: Error in v-on handler: "TypeError: alert is not a function"
(found in <Root>) app.js:28785:15
TypeError: alert is not a function
click http://127.0.0.1:8000/js/app.js line 39872 > Function:3
invokeWithErrorHandling http://127.0.0.1:8000/js/app.js:30027
invoker http://127.0.0.1:8000/js/app.js:30352
_wrapper http://127.0.0.1:8000/js/app.js:35755
add$1 http://127.0.0.1:8000/js/app.js:35759
updateListeners http://127.0.0.1:8000/js/app.js:30384
updateDOMListeners http://127.0.0.1:8000/js/app.js:35789
invokeCreateHooks http://127.0.0.1:8000/js/app.js:34270
createElm http://127.0.0.1:8000/js/app.js:34157
createChildren http://127.0.0.1:8000/js/app.js:34254
createElm http://127.0.0.1:8000/js/app.js:34155
createChildren http://127.0.0.1:8000/js/app.js:34254
createElm http://127.0.0.1:8000/js/app.js:34155
patch http://127.0.0.1:8000/js/app.js:34717
_update http://127.0.0.1:8000/js/app.js:32119
updateComponent http://127.0.0.1:8000/js/app.js:32240
get http://127.0.0.1:8000/js/app.js:32654
I know I can just add a script line with a CDN with either of the scripts I need, but I would really like to know why this is not working as I followed the instructions carefully on more than one website.
regarding the Jquery import, is it as simple as defining it to window ?
like this
import jQuery from 'jquery';
window.$ = window.jQuery = jQuery;
I had problems with the Jquery syntax $("#alertbox").alert("close");
and as ".alert" is a bootstrap thing, i´m doing "import 'bootstrap';" in the file to be compiled.
But somehow i think the .js compiler removes it bc it cant se any use of it, Bc as you said i get it to work if i use the CDN link directly to the bootstrap in the header of the page.
But i think we both have some kind of missing command of "import it on this page because i use it"
I try to understand how the next.js Script tag with the strategy beforeInteractive works. For testing i just used lodash. But i keep getting a ReferenceError: _ is not defined. I thought when a script is loaded with beforeInteractive it should be globally available inside my page Component since it get injected into the initial Html from the server and i could use it for example in the useEffect hook to alter a div.
Can someone explain to me why it's not working or what i'm doing wrong?
I don't installed it via npm because im trying to figure out how it works.
I have a simple _document.js and i added a Next.js script tag with the strategy beforeInteractive to this _document.js. The next.js docs says:
This strategy only works inside _document.js and is designed to load scripts that are needed by the entire site (i.e. the script will load when any page in the application has been loaded server-side).
import { Html, Head, Main, NextScript } from 'next/document'
import Script from 'next/script'
export default function Document() {
return (
<Html>
<Head />
<body>
<Main />
<NextScript />
<Script
src="https://unpkg.com/lodash#4.17.20"
strategy="beforeInteractive"
></Script>
</body>
</Html>
)
}
Then i have a simple page Component inside the pages folder. I added the getServerSideProps function to use ServerSideRendering.
If you export a function called getServerSideProps (Server-Side Rendering) from a page, Next.js will pre-render this page on each request using the data returned by getServerSideProps.
import Head from 'next/head';
import {useEffect, useState} from 'react';
const TestComponent = () => {
const [change,setChange] = useState('not changed');
useEffect(()=> {
console.log(_);
setChange(_.join(['one','two'],' - '));
});
return (
<>
<Head>
<title>Test</title>
</Head>
<div>{change}</div>
</>
);
};
export async function getServerSideProps(context) {
return {
props: {},
}
}
export default TestComponent;
Update
Seems like it is indeed a bug which is fixed but not released yet
https://github.com/vercel/next.js/discussions/37098
Putting aside the fact that you should be importing Lodash as a node module, there does seem to be an issue when using next/script in _document (no matter what the external script actually is).
It turns out this is a Next.js bug that has been addressed in this PR in pre-release version v12.1.7-canary.8. To fix the issue in your project simply update Next.js to version >=12.2.0 (npm install next#latest).
As an alternative, you can use the <script> tag directly in the _document's <Head> with the defer property. This closely matches what the next/script would output.
import { Html, Head, Main, NextScript } from 'next/document'
export default function Document() {
return (
<Html>
<Head>
<script
type="text/javascript"
src="https://unpkg.com/lodash#4.17.20/lodash.js"
defer
></script>
</Head>
<body>
<Main />
<NextScript />
</body>
</Html>
)
}
First and foremost, I'm failing to see virtually any reason you'd want to do this, when you can (and should) simply use install it to node_modules. You're also going to possibly run the risk of the bundle having issues if the library type isn't a module and the next configuration requires a module.
Solution based on the question:
There's two ways.
Firstly, see the docs on this exact thing.
Please use the above method mentioned in the docs.
If that's not an option for whatever reason...
The second is a less than ideal, but working solution.
Create a folder for your static files. Ex: <root>/static/js/hello.js. Then in your _document file,
<script type="text/javascript" src="/static/hello.js"></script>
I have added <style src="vue-multiselect/dist/vue-multiselect.min.css"> to my vue component, its styles working when running npm run dev but not when running npm run prod. How to fix that?
<template>
<multi-select :id="id" v-model="value" :options="options" :multiple="multiple" :max="max"></multi-select>
</template>
<script>
import multiSelect from 'vue-multiselect';
export default {
name: "my-multi-select",
components: { multiSelect },
}
</script>
<style src="vue-multiselect/dist/vue-multiselect.min.css"></style>
The problem is, that you using a relative path. What you need is to add a ref to your src folder, to tell vue-cli, that you want to include it in your production build.
<style>
#import './assets/styles/vue-multiselect.min.css';
</style>
The # refers your src path. Where you store it or what you call your folders is up to you.
EDIT: Another approach could be to reinstall the package with this command:
npm install vue-multiselect#next --save
Or just import it like you do with the component:
import Multiselect from 'vue-multiselect'
import 'vue-multiselect/dist/vue-multiselect.min.css'
EDIT 2: vue.config.js, create this file in your root. The content should be:
module.exports = {
publicPath: './'
};
I am trying to get started building a site in ReactJS. However, when I tried to put my JS in a separate file, I started getting this error: "Uncaught SyntaxError: Unexpected token <".
I tried adding /** #jsx React.DOM */ to the top of the JS file, but it didn't fix anything. Below are the HTML and JS files. Any ideas as to what is going wrong?
HTML
<html>
<head>
<title>Page</title>
<script src="http://fb.me/react-0.12.2.js"></script>
<script src="http://fb.me/JSXTransformer-0.12.2.js"></script>
<script src="http://code.jquery.com/jquery-1.10.0.min.js"> </script>
<script src="./lander.js"> </script>
</head>
<body>
<div id="content"></div>
<script type="text/jsx">
React.render(
<Lander />,
document.getElementById('content')
);
</script>
</body>
</html>
JS
/**
* #jsx React.DOM
*/
var Lander = React.createClass({
render: function () {
var info = "Lorem ipsum dolor sit amet... ";
return(
<div>
<div className="info">{info}</div>
</div>
);
}
});
EDIT: I realized that I need to add type="text/jsx" to the script tag which includes my lander code. However, after adding this and reloading I get this warning
"You are using the in-browser JSX transformer. Be sure to precompile your JSX for production - http://facebook.github.io/react/docs/tooling-integration.html#jsx"
followed by this error:
"XMLHttpRequest cannot load file:///Users/.../lander.js. Cross origin requests are only supported for protocol schemes: http, data, chrome-extension, https, chrome-extension-resource."
it seems like there is something else that I need to do in order to get in browser jsx transform working, but I'm not sure what it is.
EDIT: OOOOH do I need to host it using MAMP or something?
UPDATE --
use this instead:
<script type="text/babel" src="./lander.js"></script>
Add type="text/jsx" as an attribute of the script tag used to include the JavaScript file that must be transformed by JSX Transformer, like that:
<script type="text/jsx" src="./lander.js"></script>
Then you can use MAMP or some other service to host the page on localhost so that all of the inclusions work, as discussed here.
Thanks for all the help everyone!
JSTransform is deprecated , please use babel instead.
<script type="text/babel" src="./lander.js"></script>
Add type="text/babel" as an attribute of the script tag, like this:
<script type="text/babel" src="./lander.js"></script>
Add type="text/babel" to the script that includes the .jsx file and add this: <script src="https://npmcdn.com/babel-core#5.8.38/browser.min.js"></script>
If you have something like
Uncaught SyntaxError: embedded: Unexpected token
You probably missed a comma in a place like this:
var CommentForm = React.createClass({
getInitialState: function() {
return {author: '', text: ''};
}, // <---- DON'T FORGET THE COMMA
render: function() {
return (
<form className="commentForm">
<input type="text" placeholder="Nombre" />
<input type="text" placeholder="Qué opina" />
<input type="submit" value="Publicar" />
</form>
)
}
});
If you are getting an error like this :
SyntaxError: embedded: Unexpected token (107:9) 105
It could be you are missing a curly bracket
The code you have is correct. JSX code needs to be compiled to JS:
http://facebook.github.io/react/jsx-compiler.html
In my case, using src="./<file>.js" didn't work. Using %PUBLIC_URL% did the trick.
<script defer async src="%PUBLIC_URL%/some-file.js"></script>
Try adding in webpack, it solved the similar issue in my project. Specially the "presets" part.
module: {
loaders: [
{
test: /\.jsx?/,
include: APP_DIR,
loader: 'babel',
query :{
presets:['react','es2015']
}
},
In my case, using src="./<file>.js" didn't work. Using `%PUBLIC_URL%
I have the same issue with you and I have change something in my server
you might try this
const root = require("path").join(__dirname, "./build");
app.use(express.static(root));
app.get("*", (req, res) => {
res.sendFile("index.html", { root });
});
In addition to Dee Jee solution, After trying out his solution, My error never went.
I noticed(after two days of head scratch) that the browser has cached the files improperly.
My browser wasn't able to load the preview of the cached files and status code from express was 301.
In the networks tab of the browser dev tools, I get that those files are server from disk cache.
Solution
Remove the cached files. By clearing the browser history in a span of 1 hour, so that all the cached files get deleted.