those are the dependencies I'm using
"dependencies": {
"express": "^4.16.3",
"express-graphql": "^0.6.12",
"graphql": "^0.13.2",
"lodash": "^4.17.10"
}
here is my schema.js file looks like
here is the code inside my server.js file
and I recieve this error
I was facing the same issue. Here's how I managed to fix it:
const { URLSearchParams } = require('url');
global.URLSearchParams = URLSearchParams;
lodash library find methods first parameter is the data source. so URLSearchParam is mistakenly typed. be careful about auto completions of some IDEs provide. so they may fill incorrect data as you type.
using a good JavaScript linter can point you that problem. I do recommend eslint.
in this situation the data source is the variable users so replacing URLSearchParam with users solved this problem.
Related
I try to migrate a large existing codebase from Vue2 to Vue3 using Webpack. So I upgraded the necessary packages in package.json to looks like this (no problems here):
"vue": "^3.2.45",
"#vue/compat": "^3.2.45",
"#vue/cli-plugin-babel": "^5.0.8",
"#vue/cli-plugin-eslint": "^5.0.8",
"#vue/cli-plugin-typescript": "^5.0.8",
"#vue/cli-plugin-unit-jest": "^5.0.8",
"#vue/cli-service": "^5.0.8",
"#vue/compiler-sfc": "^3.2.0",
"vue-class-component": "^8.0.0-rc.1",
"vue-loader": "^17.0.1",
...
Now the Webpack build always fails with the error: "At least one template or script is required in a single file component.", no matter which single file component it tries to compile.
So I debugged the source of the error, which is the #vue\compiler-sfc\dist\compiler-sfc.cjs.js), and found out, that the the function parsing the component file gets called twice. First time with the actual code of my component, which works perfectly fine. Then a second time with an already compiled version which looks like this:
import { render } from "./deploymentInfos.vue?vue&type=template&id=1ced640a&ts=true"
import script from "./deploymentInfos.vue?vue&type=script&lang=ts"
export * from "./deploymentInfos.vue?vue&type=script&lang=ts"
import exportComponent from "\\node_modules\\vue-loader\\dist\\exportHelper.js"
const __exports__ = /*#__PURE__*/exportComponent(script, [['render',render],['__file',"/deploymentInfos/deploymentInfos.vue"]])
/* hot reload */
if (module.hot) {
__exports__.__hmrId = "1ced640a"
const api = __VUE_HMR_RUNTIME__
module.hot.accept()
if (!api.createRecord('1ced640a', __exports__)) {
api.reload('1ced640a', __exports__)
}
...
Of course it fails to parse <script> and <template> from this and throws the error.
I assume I have some kind of misconfiguration but am not able to find it. Does anyone have clue where to look?
Solved ✓
The problem was that another webpack plugin also used the vue-loader. That was where the second call to parse the file came from.
So if you encounter the same error message, try checking your webpack config if there are multiple usages of vue-loader.
enter image description here
enter image description here
I got some problems with my gulpfile. it does`t compile my sass files into css an i have an error (
`Error in plugin "gulp-sass"
Message:
gulp-sass 5 does not have a default Sass compiler; please set one yourself.
Both the `sass` and `node-sass` packages are permitted.
For example, in your gulpfile:
var sass = require('gulp-sass')(require('sass'));
The following tasks did not complete: watch, style
Did you forget to signal async completion?`
) when i try to run it. Browser sync works well enough but i cant compile. I have all modules i need (
"devDependencies": {
"browser-sync": "^2.27.4",
"gulp": "^4.0.2",
"gulp-sass": "^5.0.0"
).
I am using vue js + laravel to create a project. But I am facing an issue when I run npm run watch command.
Vue js throws the error below and the project does not build.
ERROR in ./node_modules/sweetalert2/dist/sweetalert2.min.css (./node_modules/css-loader/dist/cjs.js??clonedRuleSet-8[0].rules[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-8[0].rules[0].use[2]!./node_modules/sweetalert2/dist/sweetalert2.min.css)
Module build failed (from ./node_modules/css-loader/dist/cjs.js):
ValidationError: Invalid options object. CSS Loader has been initialized using an options object that does not match the API schema.
- options.url should be one of these:
boolean | object { filter? }
-> Allows to enables/disables `url()`/`image-set()` functions handling (https://github.com/webpack-contrib/css-loader#url).
Details:
* options.url should be a boolean.
* options.url should be an object:
object { filter? }
at validate (/var/www/liaratech/node_modules/webpack/node_modules/schema-utils/dist/validate.js:105:11)
at Object.getOptions (/var/www/liaratech/node_modules/webpack/lib/NormalModule.js:527:19)
at Object.loader (/var/www/liaratech/node_modules/css-loader/dist/index.js:31:27)
I realized that vue js cannot parse css codes in vue js component files.
How can i fix that?
The issue here is a version mismatch for css-loader.
Using css-loader#^3.0.0 fixes the problem (laravel-mix and sweetalert2 seem to use different versions I guess).
"devDependencies": {
"css-loader": "^3.0.0"
}
I am getting the error:
RelayQL: Unexpected invocation at runtime. Either the Babel transform
was not set up, or it failed to identify this call site. Make sure it
is being used verbatim as Relay.QL
I have the following packages with versions:
"babel-preset-es2015": "^6.14.0",
"babel-relay-plugin": "^0.9.2",
"react-native": "^0.30.0",
"react-relay": "^0.9.2",
"babel-preset-react-native": "^1.9.0"
My babelrc looks like this:
{
"passPerPreset": true,
"presets": [
{
"plugins": [
"./schema/babel-myrelay-plugin.js"
]
},
"react-native",
"es2015"
]
}
My babel-myrelay-plugin.js looks like this:
// `babel-relay-plugin` returns a function for creating plugin instances
const getBabelRelayPlugin = require('babel-relay-plugin');
// load previously saved schema data (see "Schema JSON" below)
const schemaData = require('./schema.json');
// create a plugin instance
const plugin = getBabelRelayPlugin(schemaData.data);
module.exports = plugin
This was working earlier, till I renamed(mv) the main directory of the project. I did a rm -rf node_modules and re-installed. I performed a npm cache clean. I also cleaned the $TMPDIR.
But the error is persistent.
I am able to query/mutate using GraphiQL.
Any help appreciated.
PS: I have also researched the issues logged on relay. The solutions listed there didn't help.
I am learning Aurelia framework, and have come across this code:
import moment from "moment";
export class DateFormatValueConverter {
toView(value) {
return moment(value).format('MMMM Do YYYY, h:mm:ss a');
}
}
My question is, where does it expect to find moment in the first statement? I am getting this error:
aurelia-logging-console.js:86 ERROR [app-router] Error: XHR error (404
Not Found) loading http://localhost:9000/dist/moment.js(…)
I then tried doing npm install moment --save and can now see this in my package.json file:
"dependencies": {
"moment": "^2.12.0",
"numeral": "^1.5.3"
}
But the error persists. Can someone please explain where should I store moment?
Update: I looked into the dist directory according to the error, but I am not sure how that's populated. It contains exactly same files as in my src directory, but how does that work?
You have to install it using jspm, not npm. Like this:
jspm install moment;
Then, you will be able to load:
import moment from "moment";