Starting with the 5 minute quick start I've been playing around the angular2 beta and have run across a problem that has me stumped.
Here is a dumbed down version that shows the problem I have. First here a hello world app working perfectly.
package.json
{
"name": "...",
"version": "0.0.1",
"description": "...",
"author": {
"name": "...",
"email": "..."
},
"scripts": {
"tsc": "tsc",
"tsc:w": "tsc -w",
"lite": "lite-server",
"start": "concurrent \"npm run tsc:w\" \"npm run lite\" "
},
"license": "ISC",
"dependencies": {
"angular2": "2.0.0-beta.0",
"bootstrap": "^3.3.6",
"es6-promise": "^3.0.2",
"es6-shim": "^0.33.3",
"reflect-metadata": "^0.1.2",
"rxjs": "5.0.0-beta.0",
"systemjs": "0.19.6",
"zone.js": "^0.5.10"
},
"devDependencies": {
"concurrently": "^1.0.0",
"lite-server": "^1.3.1",
"typescript": "^1.7.3"
}
}
index.html
<head>
<title>Title</title>
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
<link href="styles.css" rel="stylesheet" />
<!-- 1. Load libraries -->
<script src="node_modules/es6-shim/es6-shim.js"></script>
<script src="node_modules/angular2/bundles/angular2-polyfills.js"> </script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="node_modules/rxjs/bundles/Rx.js"></script>
<script src="node_modules/angular2/bundles/angular2.dev.js"></script>
<!-- 2. Configure SystemJS -->
<script>
System.config({
packages: {
app: {
format: 'register',
defaultExtension: 'js'
}
}
});
System.import('app/boot')
.then(null, console.error.bind(console));
</script>
</head>
<!-- 3. Display the application -->
<body>
<my-app></my-app>
</body>
app/boot.ts
import {bootstrap} from 'angular2/platform/browser'
import {AppComponent} from './app.component'
import {AccountService} from './accounts/account.service'
bootstrap(AppComponent);
app/app.component.ts
import {Component, View} from 'angular2/core';
import {RegisterFormComponent} from './accounts/register-form.component'
#Component({
selector: 'my-app',
})
#View({
template: 'hello world',
})
export class AppComponent {
}
I evntually want to call my Web Api service so I am trying to follow the docs for Http, I update boot.ts as follows:
new app/boot.ts
import {bootstrap} from 'angular2/platform/browser'
import {AppComponent} from './app.component'
import {AccountService} from './accounts/account.service'
import {HTTP_PROVIDERS} from 'angular2/http';
bootstrap(AppComponent, [HTTP_PROVIDERS]);
And here's where things choke.
Chrome gives me:
uncaught SyntaxError: Unexpected token < - http:1
uncaught SyntaxError: Unexpected token < - angular2-polyfills.js:138
evaluating http://localhost:3000/angular2/http
error loading http://localhost:3000/app/boot.js
It also fails if I try to set the HTTP_PROVIDERS as a viewProvider on my component.
Has anyone else had any luck getting Http to inject properly in the angular2 beta?
Visual Studio 2015
Node.JS & Node.JS tools for visual studio
Using 'NPM start' to compile and run
This error occurs when you try to import something that is not being included in your HTML when using SystemJS. Module bundlers like Webpack handle all that for you.
For your case you have to add the Http bundle that's a separated bundle, for example
<script src="https://code.angularjs.org/2.0.0-beta.0/http.dev.js"></script>
You'll see this same error when trying to use the router and you forgot to add the router bundle.
Check the difference between these two configurations from #pkozlowski-opensource's repos
Using SystemJS : For this case he would've to add http bundle, or router bundle if he wanted to use them.
Using Webpack : In this case Webpack bundles everything in that bundle.js file for you.
Glad it helped.
If you're using npm, include a script tag with the http reference to your local installation:
<script src="node_modules/angular2/bundles/http.dev.js"></script>
Related
Problem: My vue3 app which uses a Pinia store works as expected when deployed locally. When deployed to a server it fails to display the page which accesses the store.
The problem is the same on Firebase (emulator and live site) and with Netlify which makes me think there is some (probably very simple!) explanation hidden in the code.
To pare it down I have made what I think are minor changes to the vanilla vue-create app.
main.js
import { createApp } from "vue";
import { createPinia } from "pinia";
import App from "./App.vue";
import router from "./router";
import "./assets/main.css";
const app = createApp(App);
app.use(createPinia());
app.use(router);
app.mount("#app");
App.vue
<script setup>
import { RouterLink, RouterView } from "vue-router";
import HelloWorld from "./components/HelloWorld.vue";
</script>
<template>
<header>
<img
alt="Vue logo"
class="logo"
src="#/assets/logo.svg"
width="125"
height="125"
/>
<div class="wrapper">
<HelloWorld msg="You did it!" />
<nav>
<RouterLink to="/">Home</RouterLink>
<RouterLink to="/about">About</RouterLink>
</nav>
</div>
</header>
<RouterView /></template>
<style>
...
</style>
views/AboutView.vue
<script setup>
import { useCounterStore } from "../stores/counter";
const newCounter = useCounterStore();
</script>
<template>
<div class="about">
This is an about page
{{newCounter.count}}
</div>
</div>
</template>
<style></style>
stores/counter.js
import { ref, computed } from "vue";
import { defineStore } from "pinia";
export const useCounterStore = defineStore("counter", () => {
const count = ref(0);
const doubleCount = computed(() => count.value * 2);
function increment() {
count.value++;
}
return { count, doubleCount, increment };
});
package.json
{
"name": "firebase-tester",
"version": "0.0.0",
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview",
"lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs --fix --ignore-path .gitignore"
},
"dependencies": {
"pinia": "^2.0.23",
"vue": "^3.2.41",
"vue-router": "^4.1.5"
},
"devDependencies": {
"#rushstack/eslint-patch": "^1.1.4",
"#vitejs/plugin-vue": "^3.1.2",
"#vue/eslint-config-prettier": "^7.0.0",
"eslint": "^8.22.0",
"eslint-plugin-vue": "^9.3.0",
"prettier": "^2.7.1",
"vite": "^3.1.8"
}
}
Commands to build
nom run dev
(Runs as expected on local server, with value of count shown on 'about' page
npm run build
Builds a dist folder
firebase emulators:start
Emulator shows home page as expected but clicking does nothing, and no further navigation possible.
firebase deploy
Same issues as with emulator
To test if firebase was the problem, I have also deployed to a Netlify site, which has identical problems.
No doubt there is a really obvious problem staring me in the face, but I'm not seeing it!
All help appreciated.
In order for SPA to route correctly, a configuration file must be supplied with Firebase and Netlify. For both, as far as I remember correctly, this must be located unchanged in the dist, i.e. application root. So the best place before the build will be public.
For firebase it is firebase.json and for Netlify it is _redirect.
Deploy Firebase
Redirects explained (Netlify)
Rewrites
I am not sure if this fixes the problem with the Pinia store but this is an initial requirement before continuing troubleshooting the Pinia issue.
I am having trouble building a custom component library for Vue 3 using ViteJS and NPM. I have included a basic illustration of my issue below, can someone please tell me what I am doing wrong or point me in the right direction, I have been stuck on this for 2 days :(.
My folder structure:
dist
node_modules
src
components
Paragraph.vue
paragraph.js
.gitignore
package.json
README.md
vite.config.js
package.json
{
"name": "paragraph",
"private": true,
"version": "0.0.0",
"description": "The paragraph test component.",
"main": "./dist/paragraph.umd.js",
"module": "./dist/paragraph.es.js",
"exports": {
".": {
"import": "./dist/paragraph.es.js",
"require": "./dist/paragraph.umd.js"
},
"./dist/style.css": "./dist/style.css"
},
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview"
},
"dependencies": {
"vue": "^3.2.25"
},
"devDependencies": {
"#vitejs/plugin-vue": "^2.3.1",
"vite": "^2.9.5"
}
}
vite.config.js
import { fileURLToPath, URL } from 'url'
import { defineConfig } from 'vite'
import vue from '#vitejs/plugin-vue'
// https://vitejs.dev/config/
export default defineConfig({
build: {
lib: {
entry: fileURLToPath(new URL('./src/paragraph.js', import.meta.url)),
name: 'Paragraph',
fileName: (format) => `paragraph.${format}.js`,
},
rollupOptions: {
external: ['vue'],
output: {
globals: {
vue: 'Vue'
},
},
},
},
plugins: [vue()],
resolve: {
alias: {
'#': fileURLToPath(new URL('./src', import.meta.url))
},
},
})
paragraph.js
import Paragraph from './components/Paragraph.vue';
export default {
install: (app) => {
app.component('Paragraph', Paragraph);
},
};
Paragraph.vue
<script setup>
console.log('Test');
</script>
<template>
<p class="paragraph">
<slot />
</p>
</template>
<style>
.paragraph
{
color: black;
}
</style>
When I run npm run build it works successfully and creates the correct files, I then include the es file into my test Vue project as a plugin.
import { createApp } from 'vue'
import App from './App.vue'
import Paragraph from '../../paragraph/dist/paragraph.es.js'
createApp(App).use(Paragraph).mount('#app')
The component doesn't work when used liked this.
<Paragraph>Hello World 2!</Paragraph>
The following error is reported back in the console.
TypeError: Cannot read properties of null (reading 'isCE')
I have looked into the issue and it seems a lot of people have had the same issue, although I cannot find a fix for myself.
I have tried the solutions mentioned in the following links:
https://github.com/vuejs/core/issues/4344
When Importing Self Made Vue 3 Library Into Vue 3 Project: "Uncaught TypeError: Cannot read properties of null (reading 'isCE')"
Neither of the solutions mentioned here are working.
Can someone please help!!!
I have noticed if I exclude the <slot /> it works fine, but slots are vital to components.
I know it is bundling the Vue code into the build file, but how do I stop it doing so.
Thanks in advance.
I've also encountered this very frustrating issue. According to this answer, it is caused by having Vue imported from multiple packages instead of using just one singleton, as you do suspect.
Presumably, you are building your consumer application using Vite. In that case, setting the dedupe option in its vite.confg.js should solve it.
resolve: {
dedupe: [
'vue'
]
},
I've also encountered this issue :) the problem is you have two distinct copies of the Vue package being used
just read this and you will find your answer. for me, changing the workspace to yarn was the solution.
https://github.com/vuejs/core/issues/4344
Try to remove node_modules + yarn.lock
And then reinstall packages (yarn)
This question was first asked on vuejs forum but didn't receive an answer (I know it's holidays seasons :)
I’m driving nuts with grids in vue3. It used to work some weeks ago but after some changes in the versions of the packages, I can’t get it working anymore (not sure it’s linked though). I created a small reproducer:
Package.json contains:
{
"name": "test",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve"
},
"dependencies": {
"vue": "3.2.26",
"vue-class-component": "8.0.0-rc.1",
"vue-router": "4.0.12",
"primeflex": "^3.1.0",
"primeicons": "^5.0.0",
"primevue": "^3.9.1"
},
"devDependencies": {
"#types/node": "17.0.0",
"#vue/cli-plugin-babel": "4.5.15",
"#vue/cli-plugin-router": "4.5.15",
"#vue/cli-plugin-typescript": "4.5.15",
"#vue/cli-service": "4.5.15",
"typescript": "4.5.4"
},
"browserslist": [
"> 1%",
"last 2 versions",
"not dead"
]
}
src/main.ts contains:
import { createApp } from "vue";
import MyApp from "./App.vue";
import PrimeVue from "primevue/config";
import "primevue/resources/themes/saga-blue/theme.css";
import "primevue/resources/primevue.min.css";
import "primeicons/primeicons.css";
import "primeflex/primeflex.min.css";
createApp(MyApp)
.use(PrimeVue)
.mount("#app");
and src/App.vue contains basically a copy of the example named “Vertical Layout with Grid” using the vuue 3 syntax with vue-class-component:
<template>
<h2>test</h2>
<div class="p-fluid p-formgrid p-grid">
<div class="p-field p-col">
<label for="firstname">Firstname</label>
<InputText id="firstname" type="text" />
</div>
<div class="p-field p-col">
<label for="lastname">Lastname</label>
<InputText id="lastname" type="text" />
</div>
</div>
</template>
<script lang="ts">
import { Options, Vue } from "vue-class-component";
import InputText from "primevue/inputtext";
#Options({
components: {
InputText,
},
})
export default class MyApp extends Vue {}
</script>
This should display something like this:
But it actually shows (using Firefox):
and I’m totally unable to get both fields side by side…
Can someone please point me in the right direction?
Thank you!
[1]: https://i.stack.imgur.com/44P2h.png
[2]: https://i.stack.imgur.com/75nZk.png
#BenSouchet Thanks for your comment, you pushed me to the right track.
Precisely, I first looked only at p-fluid which I was able to find in the CSS but after your comment I looked closer and I found I was unable to find p-formgrid, p-grid, or p-field in the page nor in the node_modules directory.
Running grep -R 'p-grid' node_modules/prime* does not return anything...
So, I looked twice at https://www.primefaces.org/primeflex/migration and discovered that with primeflex 3, all classes named p-xxx are now named xxx (eg p-formgrid becomes formgrid) so I changed the classes in the template above and it's now working fine again...
Now, the next question is why such a breaking change??? I need to pass through my whole application to fix that :/
The simple process below does not work, though I do not understand why ...
using :
npm
vue
parcel
mkdir samat
cd samat
npm init -y
npm install vue --save
package.json
{
"name": "samat",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"vue": "^2.6.12"
}
}
Then I create index.html and index.js:
<!DOCTYPE html>
<html>
<head>
<script src="./index.js"></script>
</head>
<body>
<div id="app">
{{ message }}
</div>
</body>
</html>
import Vue from 'vue'
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
Finally, I run parcel index.html, and then look at localhost:1234 but see only this in the browser:
{{message}}
To use in-DOM templates (i.e., the <div id="app>{{ message }}</div>), import the full build of Vue that includes the runtime template compiler:
// import Vue from 'vue'
import Vue from 'vue/dist/vue.esm.browser' // full build
I have a basic ReactJS application. I use webpack and would like to use moduls from bower. I installed bower-webpack-plugin and add jquery library in bower.
webpack.config.js
var BowerWebpackPlugin = require("bower-webpack-plugin");
var webpack = require("webpack");
module.exports = {
entry: './index.jsx',
output: {
filename: 'bundle.js',
publicPath: 'http://localhost:8090/assets'
},
module: {
loaders: [
{
//tell webpack to use jsx-loader for all *.jsx files
test: /\.jsx$/,
loader: 'jsx-loader?insertPragma=React.DOM&harmony'
}
]
},
plugins: [
new BowerWebpackPlugin(),
new webpack.ProvidePlugin({
$: 'jquery',
})
],
externals: {
//don't bundle the 'react' npm package with our bundle.js
//but get it from a global 'React' variable
'react': 'React'
},
resolve: {
extensions: ['', '.js', '.jsx'],
alias: {
jquery: "./bower_components/jquery/dist/jquery.js"
}
}
}
Edit: Now I am using this webpack config with bower dependencies and without bower-webpack-plugin
bower.json
{
"name": "jquery",
"version": "2.1.4",
"main": "dist/jquery.js",
"license": "MIT",
"ignore": [
"**/.*",
"build",
"dist/cdn",
"speed",
"test",
"*.md",
"AUTHORS.txt",
"Gruntfile.js",
"package.json"
],
"devDependencies": {
"sizzle": "2.1.1-jquery.2.1.2",
"requirejs": "2.1.10",
"qunit": "1.14.0",
"sinon": "1.8.1"
},
"keywords": [
"jquery",
"javascript",
"library"
]
}
index.html
<!DOCTYPE html>
<html>
<head>
<title>Basic Property Grid</title>
<!-- include react -->
<script src="./node_modules/react/dist/react-with-addons.js"></script>
</head>
<body>
<div id="content">
<!-- this is where the root react component will get rendered -->
</div>
<!-- include the webpack-dev-server script so our scripts get reloaded when we make a change -->
<!-- we'll run the webpack dev server on port 8090, so make sure it is correct -->
<script src="http://localhost:8090/webpack-dev-server.js"></script>
<!-- include the bundle that contains all our scripts, produced by webpack -->
<!-- the bundle is served by the webpack-dev-server, so serve it also from localhost:8090 -->
<script type="text/javascript" src="http://localhost:8090/assets/bundle.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("body").append("This is Hello World by JQuery");
});
</script>
</body>
</html>
When I open main page, I get error message: "$ is not defined".
project structure
First, maybe you just forgot, but to be sure, I want to point out that it seems you showed us the jquery bower.json file in your question.
Your project doesn't actually seem to have a bower.json file at its root.
If you want to use Bower to manage dependencies, make sure you have a bower.json by running bower init at the root of your project and then run for instance bower install --save jquery.
See the bower doc for more info ;)
Besides that, the problem is that you're trying to use jQuery in index.html, so not in a webpack-managed module.
Webpack is not actually processing anything on your index.html.
What I mean is, put your jQuery code in index.jsx, instead of putting it in index.html:
// index.jsx
$(document).ready(function(){
$("body").append("This is Hello World by JQuery");
});
And it should work!
You can also remove this code, since the BowerWebpackPlugin handles that for you:
alias: {
jquery: "./bower_components/jquery/dist/jquery.js"
}
How does it work?
index.jsx is loaded through Webpack.
$ is used as a free variable, but thanks to the ProvidePlugin, it will resolve to require("jquery")
require("jquery") resolves to import jQuery from the bower components folder
thanks to the BowerWepackPlugin.
Without the ProvidePlugin and only the BowerWebpackPlugin, you would have had to write:
// index.jsx
var $ = require("jquery");
$(document).ready(function(){
$("body").append("This is Hello World by JQuery");
});
add a resolve field:
resolve: {
alias: {
jquery:"/your/path/to/jquery"
}
}
and add this to your plugin:
plugins: [
new webpack.ProvidePlugin({
$: 'jquery',
})
]
hope it helped