Weird issue I am facing. Using Vue-CLI3 npm run serve.
Have the following config:
// vue.config.js
module.exports = {
chainWebpack: config => {
// GraphQL Loader
config.module
.rule('graphql')
.test(/\.graphql$/)
.use('graphql-tag/loader')
.loader('graphql-tag/loader')
.end();
}
};
and one single .graphql file:
mutation AddOfficeMutation(
$name: String
$location: String
) {
createOffice(
input: {office: { name: $name, location: $location }}
) {
office {
id
name
location
}
}
}
when running npm run serve, I get the following error:
ERROR Failed to compile with 1 errors 1:11:08 PM
error in ./src/graphql/AddOfficeMutation.graphql
Module build failed (from ./node_modules/graphql-tag/loader.js):
GraphQLError: Syntax Error: Unexpected Name "var"
at syntaxError (/Users/danroc/Dropbox/projects/tal-firebase/client-vue/node_modules/graphql/error/syntaxError.js:24:10)
at unexpected (/Users/danroc/Dropbox/projects/tal-firebase/client-vue/node_modules/graphql/language/parser.js:1490:33)
at parseDefinition (/Users/danroc/Dropbox/projects/tal-firebase/client-vue/node_modules/graphql/language/parser.js:153:9)
at many (/Users/danroc/Dropbox/projects/tal-firebase/client-vue/node_modules/graphql/language/parser.js:1520:16)
at parseDocument (/Users/danroc/Dropbox/projects/tal-firebase/client-vue/node_modules/graphql/language/parser.js:113:18)
at parse (/Users/danroc/Dropbox/projects/tal-firebase/client-vue/node_modules/graphql/language/parser.js:48:10)
at parseDocument (/Users/danroc/Dropbox/projects/tal-firebase/client-vue/node_modules/graphql-tag/src/index.js:129:16)
at gql (/Users/danroc/Dropbox/projects/tal-firebase/client-vue/node_modules/graphql-tag/src/index.js:170:10)
at Object.module.exports (/Users/danroc/Dropbox/projects/tal-firebase/client-vue/node_modules/graphql-tag/loader.js:44:18)
# ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/AddOfficeForm.vue?vue&type=script&lang=js& 29:0-69 59:18-35
# ./src/components/AddOfficeForm.vue?vue&type=script&lang=js&
# ./src/components/AddOfficeForm.vue
# ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/views/AddOfficeView.vue?vue&type=script&lang=js&
# ./src/views/AddOfficeView.vue?vue&type=script&lang=js&
# ./src/views/AddOfficeView.vue
# ./src/router/routes.js
# ./src/router/router-config.js
# ./src/main.js
# multi ./node_modules/#vue/cli-service/node_modules/webpack-dev-server/client?http://192.168.0.99:8080/sockjs-node (webpack)/hot/dev-server.js ./src/main.js
Using:
"graphql": "^14.0.2"
"graphql-tag": "^2.10.0"
I am slowly assuming this might be an error with my Babel or Vue config?
Anyone can shed some light on this?
Thanks!
I faced the same issue and it seemed that having 2 loaders make the crash.
I had installed graphql-tag and webpack-graphql-loader .
Try to uninstall every package that includes apollo or graphql and reinstall using vue cli again. vue add apollo. It worked for me.
Related
I am trying to compile my vue component to unit test it.
I added the import { render } from "#vue/server-test-utils"; line at the beginning of my test file. I also run the command npm i --save-dev #vue/server-test-utils which completed successfully. I checked the node_modules folder that the dependency was indeed installed.
But still when I run the test file I am getting the error:
WEBPACK Failed to compile with 1 error(s)
Error in ./node_modules/#vue/server-test-utils/dist/vue-server-test-utils.js
Module not found: 'vue-server-renderer'
Here I found a similar issue. I tried adding the
chainWebpack: config => {
config.module
.rule('vue')
.use('vue-loader')
.tap(options => {
options.isServerBuild = false;
return options;
});
}
to my webpack config, but it did not help.
I am using Vue 2. Maybe someone happened to stumble across this issue and knows a solution?
npm install --save-dev vue-server-renderer #vue/server-test-utils worked.
It seems that we have to install the two packages: the vue-server-renderer and then the #vue/server-test-utils.
Following these steps:
Install fresh vuejs 2. Don't change package.json.
Install vue-notion package. This is a renderer for the Notion based on vuejs.
Inject the NotionRenderer object into any page like in an official example: import { NotionRenderer } from 'vue-notion'
Run npm run serve or yarn serve (I've tried both)
... I get the following error while compiling:
error in ./node_modules/vue-notion/dist/esm.js
Module parse failed: Unexpected token (1793:175)
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
|
| // return empty notion decorated text if row is empty
> return (this === null || this === void 0 ? void 0 : (_this$properties = this.properties) === null || _this$properties === void 0 ? void 0 : _this$properties[columnId]) ?? [[" ", false]];
| },
|
# ./src/main.js 9:0-44
# multi (webpack)-dev-server/client?http://192.168.0.107:8080&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.js
The problem is the nullish coalescing operator (??) at the end of the string.
I've tried to add #babel/plugin-proposal-nullish-coalescing-operator into babel.config, but it still doesn't work:
module.exports = {
presets: [
'#vue/cli-plugin-babel/preset'
],
plugins: [
'#babel/plugin-proposal-nullish-coalescing-operator',
],
}
How can I fix it? What kind of a loader should I use to compile the code?
Thank #Jonathan. I've solved this problem by adding a transpile directive into vue.config.js:
module.exports = {
transpileDependencies: ["vue-notion"]
}
Help me please. Added Nuxt(SSR) to the my vue project. All moved to the root of the project, created a page folder. The following error appeared:
ERROR in ./.nuxt/components/nuxt-loading.vue?vue&type=style&index=0&lang=css& (./node_modules/css-loader/dist/cjs.js??ref--3-oneOf-1-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--3-oneOf-1-2!./node_modules/vue-loader/lib??vue-loader-options!./.nuxt/components/nuxt-loading.vue?vue&type=style&index=0&lang=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.modules has an unknown property 'compileType'. These properties are valid:
object { auto?, mode?, exportGlobals?, localIdentName?, localIdentRegExp?, context?, hashPrefix?, getLocalIdent? }
at validate (/app/node_modules/css-loader/node_modules/schema-utils/dist/validate.js:98:11)
at Object.loader (/app/node_modules/css-loader/dist/index.js:36:28)
# ./.nuxt/components/nuxt-loading.vue?vue&type=style&index=0&lang=css& (./node_modules/vue-style-loader??ref--3-oneOf-1-0!./node_modules/css-loader/dist/cjs.js??ref--3-oneOf-1-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--3-oneOf-1-2!./node_modules/vue-loader/lib??vue-loader-options!./.nuxt/components/nuxt-loading.vue?vue&type=style&index=0&lang=css&) 4:14-327
# ./.nuxt/components/nuxt-loading.vue?vue&type=style&index=0&lang=css&
# ./.nuxt/components/nuxt-loading.vue
# ./.nuxt/App.js
# ./.nuxt/index.js
# ./.nuxt/client.js
# multi ./.nuxt/client.js
code from nuxt.config.js:
import { resolve } from 'path'
export default {
alias: {
style: resolve(__dirname, './assets/style'),
},
}
As I understand the error is related to the setting of the Nuxt.
In your package.json you do have sass-loader set to ^12.1.0, meanwhile the package introduces a breaking change during v11.0.0.
It requires Webpack5, which Nuxt is not compatible as of today. If you downgrade it down to v10.1.1 (and all related packages like node-sass), you should be fine.
I am trying to use the library node-pty in a project scaffolded with vue-cli. When I launch the program I get the following error:
error in ./node_modules/node-pty/build/Release/pty.node
Module parse failed: Unexpected character '' (1:0)
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
(Source code omitted for this binary file)
# ./node_modules/node-pty/lib/index.js 49:49-85
# ./src/background.js
Steps to reproduce
vue create test-project
cd test-project && vue add electron-builder
npm i node-pty#beta
add import pty from 'node-pty’ to src/background.js
npm run electron:serve
What I have attempted
I have attempted to add node-loader and raw-loader to the vue.config.js file
configureWebpack: {
chainWebpack: config => {
config.module
.rule('node')
.test(/.node$/i)
.use('node-loader')
.loader('node-loader')
.end()
}
}
This does not resolve the issue.
vue.config.js requires the use of module.exports
module.exports = {
chainWebpack: config => {
config.module
.rule('node')
.test(/\.node$/)
.use('node-loader')
.loader('node-loader')
.end();
}
}
During the build process (using vue-service-cli buid, via vue ui gui), the following error is displayed but I can't find where the declaration is made for src/main.ts. vue: 2.5.21, vue-cli: 3.2.1
ERROR Failed to compile with 1 errors1:58:38 PM
This relative module was not found:
* ./src/main.ts in multi ./src/main.ts
ERROR Build failed with errors.
web.config.js
main.ts is defined in ClientApp
entry: { "main": "./ClientApp/main.ts" },
Is vue (or webpack) hard-wired to have a src dir?
Try clearing the webpack entry points beforehand:
// vue.config.js
module.exports = {
configureWebpack: config => {
config.entry('main')
.clear()
.add('./ClientApp/main.ts')
}
}