I was trying to add these Template into one of my Components, this component also gets other values dynamically.
But I'm getting this error instead
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
I also tried next-images in next.config.js but still gives me the same error.
This is my package.json
{
"name": "frontend",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"dev": "next",
"build": "next",
"start": "next start"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"#zeit/next-css": "^1.0.1",
"isomorphic-fetch": "^2.2.1",
"js-cookie": "^2.2.1",
"moment": "^2.25.3",
"next": "^9.3.6",
"nprogress": "^0.2.0",
"prop-types": "^15.7.2",
"query-string": "^6.12.1",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-modal": "^3.11.2",
"react-quill": "^1.3.5",
"react-render-html": "^0.6.0",
"reactstrap": "^8.4.1"
}
}
Update:
My next.config.js
const withCSS = require('#zeit/next-css')
module.exports = withCSS({
publicRuntimeConfig : {
APP_NAME : ' ',
API_DEVELOPMENT : '',
API_PRODUCTION : '',
PRODUCTION:false
}
})
Try this in your next.config.js:
// next.config.js
const withCSS = require('#zeit/next-css')
module.exports = withCSS({
cssLoaderOptions: {
url: false
}
})
Related
I am using reactjs in the front end and node js ,express js in backend which connects to the MySQL DB.
Both are two different folders where generally I was using on different ports.
how to combine them to deploy in tomcat server . what is the right method to do this ?
This is the index file from the backend folder inside my front end folder
....
....
app.post('/data/tournament/registration',(request, response)=>{
console.log(request.body);
connection.query("INSERT INTO registrationdata VALUES ?"
,[request.body],function(error, result, fields){
if(error){
throw error;
}else{
console.log(JSON.stringify(result));
response.send(JSON.stringify(result))
}
});
});
app.listen(8080,()=>{
console.log("Connected to port 8080");
});
....
....
The package JSON file from the backend folder inside the front end folder
{
"name": "mysql_db",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "node src/index.js"
},
"author": "",
"license": "ISC",
"dependencies": {
"body-parser": "^1.19.0",
"cors": "^2.8.5",
"express": "^4.17.1",
"mysql": "^2.18.1"
}
}
I use axios in the front end to fetch the data from backend.
import axios from 'axios';
export default axios.create({
baseURL:'http://localhost:8080'
});
I use the axios instance like in my front end to fetch from backend.
....
....
export const fetchTournaments=()=>async(dispatch)=>{
await mysqlDB.get('/data/tournament/fetch')
.then((response)=>{
console.log(response);
if(response.data !== {}){
dispatch( {
type: ActionTypes.FETCH_TOURNAMENT_SUCCESS,
payload:response.data
});
console.log("Fetched tournament")
History.push('/tournaments')
}else{
dispatch({type:ActionTypes.FETCH_TOURNAMENT_FAILED});
console.log("failed to Fetch tournament")
}
})
.catch((error)=>console.error(error));
};
....
....
This is the package json file of the front end which is basically the root folder
{
"name": "chess4loudoun",
"version": "0.1.0",
"private": true,
"dependencies": {
"#date-io/moment": "^1.3.13",
"#material-ui/core": "^4.9.14",
"#material-ui/icons": "^4.9.1",
"#material-ui/pickers": "^3.2.10",
"#testing-library/jest-dom": "^4.2.4",
"#testing-library/react": "^9.3.2",
"#testing-library/user-event": "^7.1.2",
"axios": "^0.19.2",
"concurrently": "^5.2.0",
"material-table": "^1.57.2",
"moment": "^2.26.0",
"react": "^16.13.1",
"react-countdown": "^2.2.1",
"react-dom": "^16.13.1",
"react-google-login": "^5.1.20",
"react-material-ui-carousel": "^1.4.5",
"react-redux": "^7.2.0",
"react-router-dom": "^5.2.0",
"react-scripts": "3.4.1",
"redux": "^4.0.5",
"redux-persist": "^6.0.0",
"redux-thunk": "^2.3.0"
},
"scripts": {
"start": "react-scripts start ",
"build": "react-scripts build ",
"test": "react-scripts test",
"eject": "react-scripts eject",
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
UPDATE
As for your other question about where to put your xml file etc that we discussed in comments, you will want to use this in your web.xml file to handle any 404 as per https://create-react-app.dev/docs/advanced-configuration/
<error-page>
<error-code>404</error-code>
<location>/index.html</location>
</error-page>
For Development you can use:
Add this in your express server.js or w/e
app.listen(8080)
Then in your React App's package.json use:
"proxy": "http://localhost:8080"
In production you will want to use the path module to serve the static react files...
const express = require('express')
const path = require('path')
const app = express()
app.use(express.static(path.join(__dirname, 'build')))
I am trying to set up a simple ES6 project to play with mocha, chai and sinon in the Terminal. But whenever I try to npm run test, I keep getting an error:
/Users/UserName/workspace/UnitTesting/mocha-sinon-chai/src/App.spec.js:1
(function (exports, require, module, __filename, __dirname) { import should from "chai";
^^^^^^
SyntaxError: Unexpected token import
Here are my:
1. Package.json:
{
"name": "mocha-sinon-chai",
"version": "1.0.0",
"description": "",
"main": "index.js",
"directories": {
"test": "tests"
},
"dependencies": {
"chai": "^4.1.2",
"chai-as-promised": "^7.1.1",
"sinon": "^4.4.1"
},
"devDependencies": {
"babel-cli": "^6.26.0",
"babel-preset-env": "^1.6.1",
"mocha": "^5.0.1"
},
"scripts": {
"build": "babel src -d lib",
"test": "mocha ./tests/*.spec.js"
},
"author": "",
"license": "ISC"
}
2. .babelrc:
{
"presets": ["env"]
}
3. Root folder structure:
4. App.spec.js:
import should from "chai";
import { findOne } from "../src/App.js";
describe("App.js", function() {
it("should return true if predicate exists in the array", function() {
findOne([1, 2, 3], 3).should().be.true;
});
});
5. index.js is empty
6. App.js simply contains a normal JS function
I have checked many other similar issues here on Stackoverflow and GitHub and none of those solved my problem.
Adding this --require babel-core/register to test script inside package.json solved the problem:
"scripts": {
"build": "babel src -d lib",
"test": "mocha ./tests/*.spec.js --require babel-core/register"
},
I have installed angularjs-gauge component using bower. You can see it shows up in my bower.json below
{
"name": "triangular",
"version": "0.0.0",
"dependencies": {
"jquery": "^3.2.1",
"angular": "1.5.8",
"angular-animate": "1.5.8",
"angular-cookies": "1.5.8",
"angular-material": "1.1.1",
"angular-messages": "1.5.8",
"angular-sanitize": "1.5.8",
"angular-ui-router": "^0.3.1",
"angular-translate": "~2.10.0",
"angular-translate-loader-partial": "~2.10.0",
"angular-translate-storage-cookie": "~2.10.0",
"angular-translate-storage-local": "~2.10.0",
"angular-local-storage": "~0.2.5",
"angular-digest-hud": "~0.1.13",
"highlightjs": "^9.2.0",
"angular-highlightjs": "^0.6.3",
"angular-dragula": "~1.2.2",
"angular-chart.js": "0.10.2",
"angular-google-chart": "~0.1.0",
"angular-nvd3": "^1.0.8",
"angular-google-maps": "2.3.2",
"angular-permission": "^3.2.1",
"angular-linkify": "~1.2.0",
"angular-material-data-table": "0.10.9",
"angular-ui-calendar": "~1.0.1",
"angular-moment": "~1.0.0-beta.4",
"animatewithsass": "~3.2.2",
"countUp.js": "1.6.1",
"font-awesome": "~4.5.0",
"material-design-iconic-font": "~2.2.0",
"weather-icons": "https://github.com/chk1/weather-icons.git#master",
"textAngular": "~1.5.0",
"ng-file-upload": "~12.0.1",
"angular-fixed-table-header": "^0.2.1",
"angularjs-gauge": "^2.1.0"
},
"devDependencies": {
"angular-mocks": "1.5.8"
},
"overrides": {
"angular-material": {
"main": [
"angular-material.js",
"angular-material.scss"
]
},
"weather-icons": {
"main": [
"./css/weather-icons.css",
"./font/*"
]
},
"angular-dragula": {
"main": [
"dist/angular-dragula.js",
"dist/dragula.min.css"
]
},
"font-awesome": {
"main": [
"./css/font-awesome.css",
"./fonts/*"
]
},
"ng-file-upload": {
"main": [
"ng-file-upload-shim.js",
"ng-file-upload.js"
]
}
},
"resolutions": {
"angular": "1.5.8",
"jquery": "~2.2.1"
},
"main": [
"triangular.js",
"triangular.css",
"triangular.scss"
],
"ignore": [
"README.md"
]
}
for some reason it shows up here but the tag never gets created in the index.html file for angularjs-gauge. the others seem to work fine. If I go into my bower_components folder and then click on the bower.json file for the angularjs-gauge component it shows this.
{
"name": "angularjs-gauge",
"version": "1.2.0",
"description": "A Gauge directive for Angular 1.x apps and dashboards",
"keywords": [
"angular",
"gauge",
"speedometer",
"js",
"dial",
"semi",
"full",
"arc"
],
"main": "src/angularjs-gauge.js",
"authors": ["Ashish Chopra"],
"license": "MIT",
"homepage": "https://github.com/ashish-chopra/angular-gauge",
"ignore": [
"**/.*",
"node_modules",
"bower_components",
"test",
"tests"
],
"dependencies": {
"angular": "~1.5.8"
}
}
I tried putting the main element in a list and tried using override as suggested in this post.
Grunt wiredep not wiring some bower components
But every time I ran my gulp tasks it just inserts all the bower components except angularjs-gauge. How do I get it to add the tag in the index file and not skip over this one?
look at this plugin https://www.npmjs.com/package/gulp-bower, haven't tested it but it seems suit you perfectly
I am trying to get basic karma-jasmine test running but I get the following error.
Chrome 51.0.2704 (Windows 7 0.0.0) ERROR
Uncaught TypeError: Unexpected anonymous System.register call.
at D:/git/ui-components/jspm_packages/system.src.js:2891
Chrome 51.0.2704 (Windows 7 0.0.0): Executed 0 of 0 SUCCESS (0 secs / 0 secs)
Test doesn't seem to be running as well.
Folder structure is as following:
components
-[individual components]
-tests folder with simple test
-app.js(includes master component which calls all child components)
Application is working fine, but I am running into lot of problems with testing.
Any kind of help is appreciated.
Following is my package.json file
{
"name": "ui-components",
"version": "1.0.0",
"description": "POC",
"main": "index.js",
"scripts": {
"install": "jspm install && typings install",
"start": "gulp serve"
},
"repository": {
"type": "git",
"url": ""
},
"author": "",
"license": "ISC",
"devDependencies": {
"gulp": "^3.9.1",
"gulp-typescript": "^2.12.2",
"gulp-watch": "^4.3.5",
"jasmine": "^2.4.2",
"jasmine-core": "^2.4.1",
"jspm": "^0.16.30",
"karma": "^0.13.22",
"karma-chrome-launcher": "^0.2.3",
"karma-cli": "file:C:\\Users\\*********\\Downloads\\karma-cli-master",
"karma-jasmine": "^0.3.6",
"karma-jspm": "^2.0.2",
"lite-server": "^2.2.0",
"typescript": "^1.8.10",
"typings": "^1.0.4"
},
"jspm": {
"dependencies": {
"angular": "github:angular/bower-angular#^1.5.0",
"angular-route": "github:angular/bower-angular-route#^1.5.0",
"bootstrap": "github:twbs/bootstrap#^3.3.6",
"css": "github:systemjs/plugin-css#^0.1.20"
},
"devDependencies": {}
}
}
karma.config.js file
module.exports = function(config) {
config.set({
basePath: '',
frameworks: ['jasmine', 'jspm'],
files: [
'components/**/*.js',
'components/*.js',
'components/tests/*.spec.js'
],
exclude: [
],
preprocessors: {
},
reporters: ['progress'],
port: 9876,
colors: true,
logLevel: config.LOG_INFO,
autoWatch: true,
browsers: ['Chrome'],
singleRun: false,
concurrency: Infinity
})
}
firstTest.spec.js file
import angular from 'angular';
describe("Hello World Tests", () => {
it("First", () => {
expect("TestString").toEqual("");
});
});
Index.html file
<html ng-app="app">
<head>
<script src="jspm_packages/system.js"></script>
<script src="config.js"></script>
<link rel="stylesheet" href="jspm_packages/github/twbs/bootstrap#3.3.6/css/bootstrap.css" />
<link rel="stylesheet" href="style.css" />
<script>
System.import("components/app.js");
</script>
</head>
<body>
<main-component></main-component>
</body>
</html>
app.ts file
import * as angular from 'angular'
import 'components/mainComponent/mainComponent'
angular.module("app", ['mainComponent']);
I figured out that I needed to pass in my .ts files in JSPM array object in karma.config.js file. I couldn't just pass files into following block.
files: [
'components/**/*.js',
'components/*.js',
'components/tests/*.spec.js'
]`
instead this is what it required.
jspm: {
config: "config.js",
packages: "jspm_packages/",
loadFiles: ['components/**/*spec.js'],
serveFiles: ['components/**/*.js']
},
Hopefully this helps someone else.
I followed a piece of code building and app that collect data from last.fm using angular2, typescript and firebase.
the source code can be found here: https://github.com/vtts/mytunes
QUESTION how can I cast the results from the json calls?
Source code on github
https://github.com/vtts/mytunes/blob/master/app/music/services/music.srv.ts
I receive the following errors:
app/music/services/music.service.ts(29,39): error TS2339: Property 'results' does not exist on type 'Response'.
app/music/services/music.service.ts(51,36): error TS2339: Property 'album' does not exist on type 'Response'.
package.json
{
"name": "mytunes",
"version": "1.0.0",
"scripts": {
"start": "tsc && concurrently \"npm run tsc:w\" \"npm run lite\" ",
"lite": "lite-server",
"postinstall": "typings install",
"tsc": "tsc",
"tsc:w": "tsc -w",
"typings": "typings"
},
"license": "ISC",
"dependencies": {
"angular2": "2.0.0-beta.15",
"bootstrap": "^3.3.6",
"es6-shim": "^0.35.0",
"firebase": "^2.4.2",
"reflect-metadata": "0.1.2",
"rxjs": "5.0.0-beta.2",
"systemjs": "0.19.26",
"zone.js": "0.6.10"
},
"devDependencies": {
"concurrently": "^2.0.0",
"lite-server": "^2.2.0",
"typescript": "^1.8.10",
"typings": "^0.7.12"
}
}
tsconfig.json
{
"compilerOptions": {
"target": "es5",
"module": "system",
"moduleResolution": "node",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"removeComments": false,
"noImplicitAny": false,
"outDir": "js"
},
"exclude": [
"node_modules",
"typings/main",
"typings/main.d.ts"
]
}
Last.fm REST API
I am using the following REST APIs:
http://www.last.fm/api/show/album.search
http://www.last.fm/api/scrobbling
Instead of reusing the variable res which is typed as Response
res = res.json();
create a new one
let result = res.json();
and then use result for the following lines instead of res