Angular UI-Router works with template but not component - javascript

I am attempting to use angular-ui-router on an angular 1 project. The issue that I'm running into is that I can get angular-ui-router to work when I specify a template, but not when I specify a component.
For instance, this works:
var groceryListRoutes = function($stateProvider) {
var listOfGroceryLists = {
name: 'listOfGroceryLists',
url: '/lists',
template: '<grocery-list-component></grocery-list-component>',
};
$stateProvider.state(listOfGroceryLists);
};
However, when I attempt to specify the component, nothing shows up, and no error is given in the console:
var groceryListRoutes = function($stateProvider) {
var listOfGroceryLists = {
name: 'listOfGroceryLists',
url: '/lists',
component: 'groceryListComponent',
};
$stateProvider.state(listOfGroceryLists);
};
Here is my grocery-list.module.js, which register the component and the routs:
import angular from 'angular';
import 'angular-resource';
import uiRouter from 'angular-ui-router';
import groceryListComponent from './grocery-list.component';
import groceryListAPIService from './grocery-list.service';
import groceryListRoutes from './grocery-list.routes';
import groceryListDetailComponent from './grocery-list-detail.component';
const GroceryListModule = angular.module('groceryList', [
// Dependencies
'ngResource',
'ui.router',
])
.config(($resourceProvider) => {
$resourceProvider.defaults.stripTrailingSlashes = false;
})
.factory('groceryListAPIService', groceryListAPIService)
.component('groceryListComponent', groceryListComponent)
.component('groceryListDetailComponent', groceryListDetailComponent)
.config(groceryListRoutes);
export default GroceryListModule;
And my grocery-list.component.js:
import template from './grocery-list.template.html';
import groceryListController from './grocery-list.controller';
const groceryListComponent = {
template,
controller: groceryListController,
controllerAs: 'groceryListCtrl',
}
export default groceryListComponent;
And my packages.json:
{
"name": "shopping-list",
"version": "1.0.0",
"description": "An app to keep track of your grocery shopping",
"repository": "https://github.com/thomascothran/shopping_list.git",
"scripts": {
"start": "gulp",
"test": "echo \"Error: no test specified\" && exit 1",
"eslint": "eslint"
},
"author": "",
"license": "ISC",
"devDependencies": {
"babel-core": "^6.17.0",
"babel-eslint": "^7.0.0",
"babel-loader": "^6.2.5",
"babel-preset-es2015": "^6.16.0",
"eslint": "^3.7.1",
"eslint-config-airbnb": "^12.0.0",
"eslint-plugin-import": "^1.16.0",
"eslint-plugin-jsx-a11y": "^2.2.2",
"eslint-plugin-react": "^6.3.0",
"gulp": "^3.9.1",
"raw-loader": "^0.5.1",
"webpack": "^1.13.2",
"webpack-stream": "^3.2.0"
},
"dependencies": {
"angular": "^1.5.8",
"angular-resource": "^1.5.8",
"angular-ui-router": "^0.3.1",
"js-cookie": "^2.1.3",
"ramda": "^0.22.1"
}
}

Refer to this question:
Angular - UI.Router not loading component
Looks like you are using 0.3.x as per your package.json, which won't work. Upgrade to 1.0.0 and try please.
component attribute is available from ui-router#1.0.0(see here and in CHANGELOG.MD - it was added in 1.0.0-aplpha) so it's not available 0.3.1

Related

.env file loading without dotenv package

This is my first time dealing with typescript and I have no idea of what is happening. When I start my application with the command yarn dev:server the app loads the environment variables defined on the .env file, although i removed the dotenv package.
// package.json
{
"name": "server",
"version": "1.0.0",
"main": "index.js",
"license": "MIT",
"scripts": {
"dev:server": "ts-node-dev --respawn --transpile-only src/index.ts",
"typeorm": "npx ts=node ./nodemodules/typeorm/cli.js",
"test": "NODE_ENV=test jest"
},
"devDependencies": {
"#types/cors": "^2.8.10",
"#types/express": "^4.17.11",
"#types/jest": "^26.0.23",
"#types/node": "^14.14.41",
"#typescript-eslint/eslint-plugin": "^4.22.0",
"#typescript-eslint/parser": "^4.22.0",
"eslint": "^7.25.0",
"eslint-config-node": "^4.1.0",
"eslint-config-prettier": "^8.3.0",
"eslint-plugin-node": "^11.1.0",
"eslint-plugin-prettier": "^3.4.0",
"jest": "^26.6.3",
"prettier": "^2.2.1",
"supertest": "^6.1.3",
"ts-node-dev": "^1.1.6",
"typescript": "^4.2.4"
},
"dependencies": {
"cors": "^2.8.5",
"express": "^4.17.1",
"pg": "^8.6.0",
"reflect-metadata": "^0.1.13",
"typeorm": "^0.2.32"
}
}
// app.js
import "reflect-metadata";
import express, { Application } from "express";
import cors from "cors";
import "./database/connect";
import custumerRoutes from "./app/routes/Custumer";
interface IAppController {
express: Application;
}
class AppController implements IAppController {
express: Application;
constructor() {
this.express = express();
this.middlewares();
this.routes();
}
middlewares() {
this.express.use(cors());
this.express.use(express.json());
}
routes() {
this.express.use("/custumer", custumerRoutes);
this.express.get("/", (req, res) => {
res.send("🔥 server up and running");
});
}
}
const app = new AppController().express;
export { app };
is it possible that one of the packages i'm using is automatically loading the environment variables? if so, would it be possible to disable this functionality?
I found out that dotenv is a dependency of the package typeorm. This is why it was loading automatically.

Error: The result of this StaticQuery could not be fetched. This is likely a bug in Gatsby and if refreshing the page does not fix it

This error appears when I try to load an image using gatsby-image inside my gatsby project using static query. To give you some context, I made a monorepo with multiple gatsby websites altogether and reusing shared components. The hierarchy of folders is:
packages
shared-ui
images
lightlogo.png
components
lightlogo.js
index.js
ventures
src
pages
404.js
The index.js file exports the lightlogo component for the page to access it.
The code of the index.js is as follow:
export { default as LightLogo } from "./components/lightlogo"
And the code of the component is:
import React from "react"
import { useStaticQuery, graphql } from "gatsby"
import Img from "gatsby-image"
const LightLogo = ({ style }) => {
const { data } = useStaticQuery(graphql`
query {
lightlogo: file(relativePath: { eq: "light_logo.png" }) {
childImageSharp {
fluid(maxWidth: 78) {
...GatsbyImageSharpFluid_withWebp
}
}
}
}
`)
return <Img style={style}
fluid={data.lightlogo.childImageSharp.fluid} alt="Light HAG Logo"
/>
}
export default LightLogo
The code of the 404 page is:
import React from "react"
import { LightLogo } from "../../../shared-ui"
const NotFoundPage = () => (
<div>
<LightLogo />
<h1>NOT FOUND</h1>
<p>You just hit a route that doesn't exist... the sadness.</p>
</div>
)
export default NotFoundPage
The gatsby config in the ventures folder is as follow:
module.exports = {
plugins: [
`gatsby-plugin-react-helmet`,
{
resolve: `gatsby-source-filesystem`,
options: {
name: `images`,
path: `../shared-ui/images`,
},
},
`gatsby-transformer-sharp`,
`gatsby-plugin-sitemap`,
`gatsby-plugin-sass`,
`gatsby-plugin-styled-components`,
{
resolve: `gatsby-plugin-sharp`,
options: {
useMozJpeg: false,
stripMetadata: true,
defaultQuality: 75,
},
},
{
resolve: `gatsby-plugin-manifest`,
options: {
name: `HAG Ventures`,
short_name: `HAG`,
start_url: `/`,
background_color: `#663399`,
theme_color: `#663399`,
display: `minimal-ui`,
icon: `../shared-ui/images/light_logo.png`, // This path is relative to the root of the site.
},
},
// this (optional) plugin enables Progressive Web App + Offline functionality
// To learn more, visit: https://gatsby.dev/offline
// `gatsby-plugin-offline`,
],
}
My package.json is:
{
"name": "#lerna-monorepo/ventures",
"description": "A simple starter to get up and developing quickly with Gatsby",
"version": "0.1.0",
"author": "Kyle Mathews <mathews.kyle#gmail.com>",
"dependencies": {
"#lerna-monorepo/shared-ui": "^1.0.0",
"#fortawesome/fontawesome-svg-core": "^1.2.30",
"#fortawesome/free-brands-svg-icons": "^5.14.0",
"#fortawesome/free-regular-svg-icons": "^5.14.0",
"#fortawesome/free-solid-svg-icons": "^5.14.0",
"#fortawesome/react-fontawesome": "^0.1.11",
"babel-plugin-styled-components": "^1.10.7",
"bootstrap": "^4.4.1",
"framer-motion": "^1.8.4",
"gatsby": "2.23.3",
"gatsby-background-image": "^0.10.2",
"gatsby-cli": "^2.14.1",
"gatsby-image": "^2.2.38",
"gatsby-plugin-manifest": "^2.2.31",
"gatsby-plugin-offline": "^3.0.27",
"gatsby-plugin-react-helmet": "^3.1.21",
"gatsby-plugin-robots-txt": "^1.5.0",
"gatsby-plugin-sass": "^2.2.1",
"gatsby-plugin-sharp": "^2.3.5",
"gatsby-plugin-sitemap": "^2.2.26",
"gatsby-plugin-styled-components": "^3.2.1",
"gatsby-source-filesystem": "^2.2.2",
"gatsby-source-rss-feed": "^1.2.2",
"gatsby-transformer-sharp": "^2.3.7",
"gsap": "^3.5.1",
"lottie-player": "^1.0.0",
"lottie-react": "^2.1.0",
"lottie-web": "^5.7.4",
"node-sass": "^4.13.1",
"popper.js": "^1.16.1",
"prop-types": "^15.7.2",
"react": "^16.14.0",
"react-bootstrap": "^1.0.0",
"react-dom": "^16.14.0",
"react-helmet": "^5.2.1",
"react-hot-loader": "^4.13.0",
"react-lazyload": "^3.1.0",
"react-slick": "^0.27.10",
"react-waypoint": "^9.0.3",
"scrollmagic": "^2.0.7",
"scrollmagic-plugin-gsap": "^1.0.4",
"slick-carousel": "^1.8.1",
"styled-components": "^5.1.0",
"uninstall": "0.0.0"
},
"devDependencies": {
"prettier": "^1.19.1"
},
"keywords": [
"gatsby"
],
"license": "MIT",
"scripts": {
"build": "gatsby build",
"develop": "gatsby develop",
"format": "prettier --write \"**/*.{js,jsx,json,md}\"",
"start": "npm run develop",
"serve": "gatsby serve",
"clean": "gatsby clean",
"test": "echo \"Write tests! -> https://gatsby.dev/unit-testing\" && exit 1"
},
"repository": {
"type": "git",
"url": "https://github.com/gatsbyjs/gatsby-starter-default"
},
"bugs": {
"url": "https://github.com/gatsbyjs/gatsby/issues"
}
}
I tried to reinstall all packages using yarn and it didn't work. When I query the image in the GraphiQl, the query successfully fetches the file.
If the root of your Gatsby application is packages/ventures then Gatsby will not extract GraphQL queries from packages/shared-ui, even if you import them. This is because Gatsby uses static analysis to extract GraphQL queries before the code is parsed and evaluated, replacing the query with an identifier that refers to the resulting data for the query.
The way you would typically do something like this is as a Gatsby Theme, which provide a mechanism for sharing code that gets treated largely like local components with some additional hooks and replacement capabilities.
Alternately, you might have some luck using the Node APIs to hook into the build process and copy files around (e.g. parsing the query out of the shared-ui component and rewriting it into the ventures folder onPreBootstrap), but it's going to be an uphill battle.

RollupJS library React Hook Error useState

I'm bulding a lib that allow to export react components to a nextjs application, at first time it works very well but when I started to check react hooks on that library it trigger a invalid hook error
Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.
In order to solve issues like that on webpack and microbundle, I was using npm link for development, cause this error happen on production build, that was my reference https://reactjs.org/warnings/invalid-hook-call-warning.html#duplicate-react
This strategy don't work on rollup stack, I tried to link react and do some configs and nothing is working
that's my rollup.config.js
import babel from 'rollup-plugin-babel'
import commonjs from 'rollup-plugin-commonjs'
import resolve from 'rollup-plugin-node-resolve'
import external from 'rollup-plugin-peer-deps-external'
import { terser } from 'rollup-plugin-terser'
import styles from "rollup-plugin-styles";
const input = 'src/index.js'
const output = 'dist/index'
export default [
{
input: input,
external: ['react', 'react-dom'],
output: {
file: `${output}.modern.js`,
format: 'es',
},
plugins: [
external('./package.json'),
resolve(),
commonjs({
include: ['node_modules/**'],
}),
babel({
exclude: 'node_modules/**'
}),
styles(),
terser()
],
},
]
An that's my package.json
{
"name": "project",
"version": "0.0.17",
"description": "",
"private": true,
"main": "dist/index.js",
"module": "dist/index.modern.js",
"umd:main": "dist/index.umd.js",
"source": "src/index.js",
"engines": {
"node": ">=10"
},
"scripts": {
"prebuild": "rimraf dist",
"build": "rollup -c --environment BUILD:production",
"watch": "rollup -c --watch",
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"devDependencies": {
"#babel/core": "^7.12.3",
"#babel/preset-env": "^7.12.1",
"#babel/preset-react": "^7.12.1",
"#webpack-cli/init": "^1.0.2",
"babel-loader": "^8.1.0",
"clean-webpack-plugin": "^3.0.0",
"css-loader": "^5.0.0",
"html-loader": "^1.3.2",
"html-webpack-plugin": "^4.5.0",
"microbundle-crl": "^0.13.11",
"mini-css-extract-plugin": "^1.2.1",
"node-sass": "^4.14.1",
"prop-types": "^15.7.2",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"rimraf": "^3.0.2",
"rollup": "^2.32.1",
"rollup-plugin-babel": "^4.4.0",
"rollup-plugin-commonjs": "^10.1.0",
"rollup-plugin-node-resolve": "^5.2.0",
"rollup-plugin-peer-deps-external": "^2.2.4",
"rollup-plugin-postcss": "^3.1.8",
"rollup-plugin-sass": "^1.2.2",
"rollup-plugin-scss": "^2.6.1",
"rollup-plugin-styles": "^3.11.0",
"rollup-plugin-terser": "^6.1.0",
"rollup-plugin-uglify": "^6.0.4",
"sass-loader": "^10.0.4",
"source-map-loader": "^1.1.1",
"static-site-generator-webpack-plugin": "^3.4.2",
"style-loader": "^2.0.0"
},
"peerDependencies": {
"react": "17.0.1",
"prop-types": "15.7.2",
"react-dom": "17.0.1"
},
"dependencies": {
"file-loader": "^6.2.0"
}
}
When I change my nextjs application on dev mode removing a test useState component it works, but if I reload the page or load directly with a useState component rendered it will trigger a react hook error :(
I found the reason for my case.
It's necessary peerDependencies setting on the package.json file.
"peerDependencies": {
"react": "^17.0.2",
"react-dom": "^17.0.2"
},
So you try dependencies to peerDependencies.
"peerDependencies": {
"react": "^17.0.2",
"react-dom": "^17.0.2",
"file-loader": "^6.2.0"
},
Hope this helps. :)

Electron React App

Im trying to make a Desktop App with Electron and React.
Im allerdings getting startet and the most components are working, but in my React component I need to make a new Funktion like:
add = () => {
//this.setState({active: !this.state.active})
}
But after adding this 3 (2) Lines i get the error:
app/app.js: Unexpected token (17:11) while parsing file: .../app/app.js
this is my package.json so far:
{
"name": "rac",
"productName": "rac-desktop",
"version": "1.0.0",
"description": "desktop",
"main": "main.js",
"scripts": {
"start": "electron main.js",
"watch": "watchify app/app.js -t babelify -o public/js/bundle.js -- debug --verbose"
},
"author": "timo",
"license": "MIT",
"dependencies": {
"axios": "^0.16.2",
"babel-preset-es2015": "6.24.1",
"babel-preset-react": "6.24.1",
"babelify": "7.3.0",
"classnames": "2.2.5",
"electron-prebuilt": "^1.4.13",
"electron-reload": "^1.2.2",
"react": "^16.0.0",
"react-dom": "^16.0.0",
"semantic-ui-react": "^0.75.1"
} }
The Repo
That is not valid syntax for a class function in Javascript.
A class has functions like so:
class Test {
constructor() {
// do stuff
}
// basic function
doSomething() {
this.test++;
}
}
So in your case you just need to make add use the correct syntax for a function in a class
add() {
this.setState({active: !this.state.active});
}
The syntax you have used is coming in the future as part of the Class Fields Proposal

How do you use mobx with react rails?

While trying to use react-rails, I've been running into issues incorporating mobx as state management into my app.
I was under the impression that the rails asset pipeline would bring in mobx to react, but, this hasn't been successful. I'm using the react-rails gem and trying to incorporate mobx into my react.es6.jsx sheets in the components folder.
my package.json file:
{
"name": "rent-pseudo",
"version": "1.0.0",
"description": "== Zipqode",
"main": "index.js",
"dependencies": {
"babel-plugin-syntax-async-functions": "^6.3.13",
"babel-plugin-transform-regenerator": "^6.3.18",
"babel-polyfill": "^6.3.14",
"babel-preset-es2015": "^6.3.13",
"babel-preset-react": "^6.3.13",
"babel-preset-stage-0": "^6.3.13",
"babelify": "^7.2.0",
"bourbon": "^4.2.7",
"bourbon-neat": "^1.8.0",
"browserify": "^13.1.0",
"browserify-incremental": "^3.1.1",
"font-awesome": "^4.6.3",
"graphql": "^0.6.2",
"mobx": "2.4.1",
"mobx-react": "^3.5.3",
"mobx-react-devtools": "^4.2.5",
"react": "^15.3.1",
"react-dom": "^15.3.1",
"react-google-maps": "^4.11.0",
"react-router": "2.6.1",
"es6-promise": "^3.0.2",
"fetch": "^0.3.6",
"jquery": "^2.1.4",
"jquery-ujs": "^1.0.4"
},
"devDependencies": {},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"repository": {
"type": "git",
"url": "git+https://alexung#github.com/alexung/rent-pseudo.git"
},
"author": "",
"license": "ISC",
"bugs": {
"url": "https://github.com/alexung/rent-pseudo/issues"
},
"homepage": "https://github.com/alexung/rent-pseudo#readme"
}
My first react file that's included in /components:
import { observer } from 'mobx-react'
const SearchResultsLayout = observer(React.createClass({
render: function() {
return (
<h1>Hello, World</h1>
)
}
}))
But I keep getting the error VM3275:1 Uncaught ReferenceError: SearchResultsLayout is not defined
Any ideas?
It seems like you either didn't declare React inside your jsx file via
import React from 'react'
or mobx package did not install
For those interested in knowing, the react_on_rails gem is better for incorporating mobx. Got it to work this morning by simply installing the gem and npm installing mobx into my package.json that's included in the client folder
You can use mobX from rails assets.
https://rails-assets.org/#/?query=mobx

Categories