While following the tutorial from Contentful for setting up a blog I encountered an error I'm unable to get past.
I've tried changing a few things inside the JSON file but am limited in what I can change.
.contentful.json
{
"CTF_SPACE_ID": "uw...oj",
"CTF_CDA_ACCESS_TOKEN": "yIQp...rs",
"CTF_PERSON_ID": "15...0m",
"CTF_BLOG_POST_TYPE_ID": "blogPost",
}
nuxt.config.js
const config = require('./.contentful.json')
module.exports = {
env: {
CTF_SPACE_ID: config.CTF_SPACE_ID,
CTF_CDA_ACCESS_TOKEN: config.CTF_CDA_ACCESS_TOKEN,
CTF_PERSON_ID: config.CTF_PERSON_ID,
CTF_BLOG_POST_TYPE_ID: config.CTF_BLOG_POST_TYPE_ID
},
Expected: When I run npm run dev the website is served
Actual: When I run npm run dev the error "Unexpected token } in .contentful.json
{
"CTF_SPACE_ID": "uw...oj",
"CTF_CDA_ACCESS_TOKEN": "yIQp...rs",
"CTF_PERSON_ID": "15...0m",
"CTF_BLOG_POST_TYPE_ID": "blogPost"
}
Remove the trailing comma from the last key value pair, otherwise it's not valid JSON
Related
I'm trying to read my i18n-strings from a JSON file following this guide.
I have en-US.json:
{
"world": "the world!"
}
And for setting up my Vue app I use:
import { createI18n } from 'vue-i18n'
import enUS from '../src/i18n/en-US.json'
// Type-define 'en-US' as the master schema for the resource
type MessageSchema = typeof enUS
const i18n = createI18n<[MessageSchema], 'en-US'>({
locale: 'en-US',
messages: {
'en-US': enUS
}
})
This works. But as soon as I add one non-ASCII char (e.g. "world": "the w#rld!"), I get the following error message:
[plugin:vite-plugin-vue-i18n] Cannot read properties of undefined (reading 'message')
/home/bernhard/wd/quasar2-project/src/i18n/en-US.json
Strangely, this works when I do the following straight in my .ts file:
const enUS = {
"world": "the w#rld!"
}
so maybe something wrong with the way the JSON is processed?
The answer has two layers.
As #jonrsharpe pointed out, there is a set of special characters: { } # $ | - i.e. for inserting variables. A # should i.e. be replaced by {'#'}.
A bug in how vite processes external json as described on this bug on Github. By default, quasar is using "#intlify/vite-plugin-vue-i18n": "^3.3.1". Changing that to "#intlify/vite-plugin-vue-i18n": "^7.0.0" solved the issue.
I'm trying to connect my react application (which is using gatsby) to an XAMPP server that's running an instance of Drupal to perform queries using GraphQL. I keep getting this error about my config file which says:
error Plugin gatsby-source-graphql returned an error
SyntaxError: Unexpected token < in JSON at position 0
Here's my config file code:
module.exports = {
siteMetadata: {
title: 'Gatsby Default Starter',
},
plugins: [
{
resolve: "gatsby-source-graphql",
options: {
typeName: "DRUPAL",
fieldName: "drupal",
url: "http://localhost:8888/graphql",
},
},
],
}
I've tried the localhost with and without the last "/graphql", just "localhost", and nothing's worked. I've restarted my frontend and backend server twice.
EDIT:
When I just go in "http://localhost:8888/graphql", it returns this:
{"errors":[{"message":"GraphQL Request must include at least one of those two parameters: \u0022query\u0022 or \u0022queryId\u0022","category":"request"}]}
I think it's not your config file which contains the error but the service behind http://localhost:8888/graphql.
Probably it returns an HTML page (error page?) or XML content when JSON is expected.
I have some JSON files in my Webpack application that I want to import. They have names such as 0.json, 1.json, 2.json, and so on and are inside of the directory src/res/level/. When I try to require() them in my code, it does not work:
private loadWorld() {
// load the level
// duplicate the object to avoid modifying the actual instance
// that json-loader created
this.state.level = JSON.parse(JSON.stringify(require(`#res/level/${this.level}.json`))) as LevelData;
// ...
}
This line in my method always throws an error:
Error: Cannot find module "#res/level/1.json".
at webpackContextResolve (webpack-internal:///9:16:11)
at webpackContext (webpack-internal:///9:9:11)
However, I cannot figure out why. And to make things more confusing, if I run Webpack in watch mode, and I edit this line before my program tries to run it, then the JSON files are suddenly loaded properly.
I have configured my alias for #res properly:
resolve: {
extensions: [".ts", ".js", ".glsl", ".json"],
alias: {
"#res": path.join(__dirname, "src/res"),
"#lib": path.join(__dirname, "src/lib"),
"#shader": path.join(__dirname, "src/shader"),
"#control": path.join(__dirname, "src/control"),
"#scene": path.join(__dirname, "src/scene"),
"#util": path.join(__dirname, "src/util"),
}
}
And because this is Webpack 4, I simply did not include a loader for JSON.
So why is this not working?
Additionally, I notice that when I inspect the generated code, I see this:
Which suggests that the JSON files are being loaded, but not under the directory that I expect.
The compiler began to load the JSON files consistently when I used string concatenation instead of a template string:
this.state.level = JSON.parse(JSON.stringify(require("#res/level/" + this.level.toString() + ".json"))) as LevelData;
I have a parse-server hosted by heroku, which has an index.js file utilized for its configuration. I want to use Mailgun to up functionality for the user to request a password reset, and I have set up the config file, following this answer, as follows:
var api = new ParseServer({
appName: 'App Name',
publicServerURL: 'https://<name>.herokuapp.com/parse',
databaseURI: databaseUri || 'mongodb://localhost:27017/dev',
cloud: process.env.CLOUD_CODE_MAIN || __dirname + '/cloud/main.js',
appId: process.env.APP_ID || 'myAppId',
masterKey: process.env.MASTER_KEY || '', //Add your master key here. Keep it $
serverURL: process.env.SERVER_URL || 'http://localhost:1337/parse', // Don't$
liveQuery: {
classNames: ["Posts", "Comments"] // List of classes to support for query s$
},
push: JSON.parse(process.env.SERVER_PUSH || "{}"),
verifyUserEmails: true, //causing errors
emailAdapter: { //causing errors
module: 'parse-server-simple-mailgun-adapter',
options: {
fromAddress: 'parse#example.com',
domain: '<domain>',
apiKey: '<key>',
}
}
});
This code does not work, though, because of the verifyUserEmails and emailAdapter. Removing both of them removes the "JSON text did not start with array" error. Adding either one of them back in results in the error being thrown. I have no idea why, though, since I do not see any obvious reason as to how they aren't being set up in an array correctly?
Do I need to set up the cooresponding config vars in heroku in addition to having them in the config file? I considered this, but appName and publicServerURL are not set up in this way and don't give this error.
emailAdapter.options.apiKey doesn't need a comma at the end since its the last element of it's JSON.
I wouldn't be surprised that you're also leaving in the comma at the end of verifyUserEmails when you include it improperly as well.
options: {
fromAddress: 'parse#example.com',
domain: '<domain>',
apiKey: '<key>',
}
This is not valid JSON, because there is a comma at the end of the apiKey line. The last item in a JSON object does not have a comma.
For anyone that is repeatedly running into this issue, I have figured out exactly what was going wrong. Despite the error informing me that my JSON was incorrectly formatted, it turns out it was actually that the module was misnamed. According to this post, the updated module has been renamed to '#parse/simple-mailgun-adapter'. Inserting this into the index.js, after ensuring I had ran the npm install --save #parse/simple-mailgun-adapter in my local repo, fixed the issue.
I use fountainJS Angular2 generator with Typescript and Systems.js
for scaffolding the project.
https://github.com/FountainJS/generator-fountain-angular2
But I got the issue, I can't add the component to the project.
When I put import {GOOGLE_MAPS_DIRECTIVES}
I get this error
system.src.js:1057 GET http://localhost:3000/node_modules/angular2-google-maps/core/index.js 404 (Not Found)
I went through that
https://angular-maps.com/docs/getting-started.html
'getting started' section and added some code to jspm.config.js file but I don't have angular-cli-build.js file inside my project.
My jspm.config.js
SystemJS.config({
packageConfigPaths: [
'npm:#*/*.json',
'npm:*.json',
'github:*/*.json'
],
map: {
'angular2-google-maps': 'node_modules/angular2-google-maps',
'#angular/common': 'npm:#angular/common#2.0.0-rc.4',
'#angular/compiler': 'npm:#angular/compiler#2.0.0-rc.4',
'#angular/core': 'npm:#angular/core#2.0.0-rc.4',
'#angular/http': 'npm:#angular/http#2.0.0-rc.4',
'#angular/platform-browser': 'npm:#angular/platform-browser#2.0.0-rc.4',
'#angular/platform-browser-dynamic': 'npm:#angular/platform-browser-dynamic#2.0.0-rc.4',
'#angular/router': 'npm:#angular/router#3.0.0-beta.2',
'es6-shim': 'npm:es6-shim#0.35.1',
'os': 'github:jspm/nodelibs-os#0.2.0-alpha',
'process': 'github:jspm/nodelibs-process#0.2.0-alpha',
'reflect-metadata': 'npm:reflect-metadata#0.1.3',
'rxjs': 'npm:rxjs#5.0.0-beta.6',
'ts': 'github:frankwallis/plugin-typescript#4.0.16',
'zone.js': 'npm:zone.js#0.6.17'
},
packages: {
'angular2-google-maps/core': {
defaultExtension: 'js',
main: 'index.js' // you can also use core.umd.js here, if you want faster loads
},
'github:frankwallis/plugin-typescript#4.0.16': {
'map': {
'typescript': 'npm:typescript#1.8.10'
}
},
'github:jspm/nodelibs-os#0.2.0-alpha': {
'map': {
'os-browserify': 'npm:os-browserify#0.2.1'
}
}
}
});
You are getting node_modules/angular2-google-maps/core/index.js 404 (Not Found) because node_modules is not made available by web server used by npm run serve.
If you need node_modules to be accessible by client code, you have to add route for it in conf/browsersync.conf.js:
routes: {
'/node_modules': 'node_modules',
Alternatively, you could use jspm instead of npm to install angular2-google-maps:
jspm install angular2-google-maps
and jspm would modify jspm.config.js to add correct mapping for angular2-google-maps.
BUT, after 404 error is fixed, I'm getting now
system.src.js:123 Uncaught (in promise) Error: (SystemJS) core_1.NgModule is not a function
TypeError: core_1.NgModule is not a function
which probably means that the latest angular2-google-maps is incompatible with angular2-rc4 installed by generator-fountain-angular2.