I'm trying to make a component render as per an example I found online.
I created a sample project and it works fine there, but it crashes when I'm trying to use the same thing on the official code base.
here is the contents of the blade file which is rendered.
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Vue SPA Demo</title>
</head>
<body>
<div id="app">
asdfsadfsadsdf
<example-component></example-component>
</div>
<script src="js/app.js"></script>
</body>
</html>
then, here is app.js
window.Vue = require("vue").default;
import ExampleComponent from './components/ExampleComponent.vue';
Vue.component('example-component', ExampleComponent);
and here is ExampleComponent.vue
<template>
<div>
<div>Example Component</div>
</div>
</template>
<script>
export default {
mounted() {
console.log('Component mounted.')
}
}
</script>
here is what the page looks like:
and here is the error:
Fun fact: when I try to include the component like this instead, it displays "Test" as expected
Vue.component('example-component', {
template: '<div>Test</div>'
});
so it is clear to me that this line/file is the issue
import ExampleComponent from './components/ExampleComponent.vue';
I found the answer!! After almost 8 hours...
Turns out the "vue-loader" 16.1.2 from package.json was the mistake. I tried the exact same configuration but changed "16.1.2" to "15.9.2" and vice-versa 4-5 times and running
rm -rf node_modules/
rm package-lock.json
npm cache clear --force
npm install
in-between every package change.
Fun fact: after that, your component will render when you write
const app = new Vue({
el: '#app',
});
in your app.js
Related
I'm using a CDN for VUEjs because I don't want to use webpack or render from the server.
index.html and test-component.vue are in the same folder
my index.html:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>VUE</title>
<!-- vuejs -->
<script src="https://cdn.jsdelivr.net/npm/vue#2.6.11"></script>
</head>
<body>
<div id="app">
<!--HERE I WANT TO USE MY COMPONENT-->
<comp></comp>
</div>
<script>
//TRIED TO IMPORT MY COMPONENT
import comp from './test-component.vue';
const app = new Vue({
el: '#app',
});
</script>
</body>
</html>
my test-component.vue file:
<template>
<h1>im a component</h1>
</template>
<script>
console.log('testing component');
</script>
obviously .vue files are not natively supported by the browser
there are 2 possible solutions:
use a javascript bundler (like webpack or parcel)
use http-vue-loader
REACT HELP: Trying to build a very basic React boilerplate because doing Create-React-App seems like overkill for some basic practice. In this repo there is two boilerplate files, the second works but then all the code would be in one file. The second file point to start.js as the app component but when I run it in the browser nothing appears. What am I overlooking, I’ve seen several other boilerplates and doesn’t seem like I’m doing anything different.
https://git.generalassemb.ly/AlexMerced/PracticeRepo/tree/master/react
You are trying to import React from "react" which doesn't exist. In a standalone version I think you will get a global React and ReactDOM objects. You can use them to render the component. Remove the import statements from start.js Edited code below.
class Greeting extends React.Component {
render() {
return <p>Hello world</p>;
}
}
ReactDOM.render(<Greeting />, document.getElementById("start"));
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>React Boilerplate</title>
</head>
<body>
<div id="start"></div>
<script crossorigin src="https://unpkg.com/react#16/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom#16/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/#babel/standalone#7.6.2/babel.min.js"></script>
<script type="text/babel" src="./start.js"></script>
</body>
</html>
I think I have a problem with a script that doesn't load (or load too early).
I try to implement Stripe library for paiement. For that, I have to include a script before using Stripe functions in my code.
I added the given script src="https://js.stripe.com/v3/", in my public folder, in index.html in the header as follow:
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<script src="https://js.stripe.com/v3/"></script>
<title>React App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
</body>
</html>
I created an empty app, with only call of Stripe. here is App.js :
import React from 'react';
import './App.css';
import {Button} from 'react-bootstrap'
class App extends React.Component {
constructor() {
super();
this.handleClick = this.handleClick.bind(this);
}
handleClick(){
var stripe = Stripe('pk_test_XXXXXXXXXXXX');
// I will use stripe variable later. But for now I have an error with previous line
}
render() {
return(
<div>
<Button
className= "btn-xlBook"
variant="primary"
onClick={this.handleClick}>
OK
</Button>
</div>
)
}
}
export default App
But when I make a yarn start, I have the error 'Stripe' is not defined no-undef.
I don't understand, I call the script in the header, but the behavior is as if the script wasn't loaded yet.
Do you know how to solve it ? I I add a script in the header of index.html, it should load before the app, isn't it ?
You don't import Stripe anywhere. Like you do with Button for example. Check out React Stripe Elements for one example of how to use Stripe in React.
Use npm package of stripe instead and import it. Add the import statement and use the wrapper in your index.js
import {StripeProvider} from 'react-stripe-elements';
<StripeProvider apiKey="pk_test_12345">
<MyStoreCheckout />
</StripeProvider>
and then in your console install the package:
npm install --save react-stripe-elements
or
yarn add react-stripe-elements
I would like to statically serve a project, that uses webcomponents (using lit-html), without any packaging tools like webpack etc.
The example project is composed of this structure:
index.html
app.js
package.json
package.json:
{
"name": "lit",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"#webcomponents/webcomponentsjs": "^2.2.7",
"lit-element": "^2.0.1"
}
}
app.js:
import { LitElement, html } from 'lit-element';
class FooElement extends LitElement {
render() {
return html`<div>hello world!</div>`;
}
}
window.customElements.define('x-foo', FooElement);
and finally, index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title></title>
<script src="app.js" type="module"></script>
</head>
<body>
<x-foo></x-foo>
</body>
</html>
I serve this using a static http server and, of course, this doesn't work. The browser raises the error: Error resolving module specifier: lit-element.
So we try altering the import directive to:
import { LitElement, html } from './node_modules/lit-element/lit-element.js';
The browser then fails with: Error resolving module specifier: lit-html in lit-element.ts:14:29
I've tried using systemjs version 3.0.1 with the following modified index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title></title>
</head>
<body>
<script type="systemjs-importmap" src="systemjs.map.json"></script>
<script src="./node_modules/systemjs/dist/system.min.js"></script>
<script>
System.import('app');
</script>
<x-foo></x-foo>
</body>
</html>
and a systemjs.map.json file:
{
"imports": {
"app": "./app.js",
"lit-element": "./node_modules/lit-element/lit-element.js",
"lit-html": "./node_modules/lit-html/lit-html.js"
}
}
When loading this (again via a static webserver), we get in Firefox:
import declarations may only appear at top level of a module at app.js:1.
In Chrome:
Uncaught SyntaxError: Unexpected token { at app.js:1
In Safari:
Unexpected token '{'. import call expects exactly one argument. at app.js:1
All of which suggests that systemjs isn't treating app.js as a module.
Is there anyway that we can achieve static loading of modules that have a dependency tree within node_modules?
I've pushed the version of the code with systemjs to https://github.com/dazraf/lit-test.
Thanks.
You can perhaps use something like this in your app.js
import {LitElement, html} from 'https://unpkg.com/#polymer/lit-element/lit-element.js?module';
And this in your HTML code
<script type="module" src="./app.js">
It worked for me. If you don't want to use unpkg you can download it and serve it locally.
We have a server that does just this, and only this: https://open-wc.org/developing/owc-dev-server.html
It's simple server that does the minimal amount of work required and is specifically designed to work with the native es module loader available in all major browsers.
In the future, this should no longer be necessary when import maps are standardized.
Allow me to blow your mind. Difficult to find, a coworker actually found it.
https://codewithhugo.com/use-es-modules-in-node-without-babel/webpack-using-esm/
I'm making a simple flask app, using react for the front-end stuff. Right now I'm experimenting with importing React components from other files, without success. This is the error I'm getting:
Uncaught ReferenceError: require is not defined
This is my html file:
<html>
<head>
<meta charset="UTF-8">
<title>Index page</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react-dom.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.0.16/css/bulma.min.css">
<link rel="stylesheet" type="text/css" href="/static/css/style.css">
</head>
<body>
<div class="columns">
<div class="column">
some stuff
</div>
<div class="column">
<div id="index"></div>
</div>
</div>
<script type="text/babel" src="static/js/index.js"></script>
</body>
</html>
and my index.js:
import FormComponent from './FormComponent.js';
var MainClass = React.createClass({
render:function(){
return (
<div>
<div>this is the main component</div>
<div><FormComponent /></div>
</div>
);
}
});
ReactDOM.render(<MainClass />, document.getElementById('index'));
and finally the FormCommponent.js, which is in the same folder:
var FormComponent = React.createClass({
render: function() {
return (
<div>this is an imported component</div>
);
}
});
module.exports = FormComponent;
Does anyone know what am I doing wrong?
I'm not using any package managers.
EDIT
Solved the problem by using browserify, as mentioned below.
Thanks for the help
You need to use something like Rollup, Webpack, or Browserify. This statement import FormComponent from './FormComponent.js'; doesn't mean anything on the client. No browser natively supports it so you need something like the tools mentioned above to turn it into something the browser can actually use.
Without them you just have to load the files in your index.html.
Maybe if you try to include components like the first but declare like text/javascript should run.
I hope this solves your problem