Whenever I install a new package via npm install my angular 2 import is not recognizing the package and my browser returns 404 error.
For example, I've been trying to install the following package:
https://github.com/dougludlow/ng2-bs3-modal
and this is what my browser returns:
GET http://localhost:3000/node_modules/ng2-bs3-modal/ng2-bs3-modal 404 (Not Found)fetchTextFromURL # system.src.js:1154(anonymous function) # system.src.js:1710ZoneAwarePromise # angular2-polyfills.js:589(anonymous function) # system.src.js:1709(anonymous function) # system.src.js:2734(anonymous function) # system.src.js:3308(anonymous function) # system.src.js:3575(anonymous function) # system.src.js:3960(anonymous function) # system.src.js:4419(anonymous function) # system.src.js:4671(anonymous function) # system.src.js:406ZoneDelegate.invoke # angular2-polyfills.js:332Zone.run # angular2-polyfills.js:227(anonymous function) # angular2-polyfills.js:576ZoneDelegate.invokeTask # angular2-polyfills.js:365Zone.runTask # angular2-polyfills.js:263drainMicroTaskQueue # angular2-polyfills.js:482ZoneTask.invoke # angular2-polyfills.js:434
angular2-polyfills.js:332 Error: Error: XHR error (404 Not Found) loading http://localhost:3000/node_modules/ng2-bs3-modal/ng2-bs3-modal(…)
Although I can see that node_modules\ng2-bs3-modal is existing.
What's wrong here?
You need to configure SystemJS to load right files from the library.
You could try the following configuration:
<script>
System.configure({
map: {
'ng2-bs3-modal': 'node_modules/ng2-bs3-modal'
},
packages: {
'ng2-bs3-modal': {
format: 'register',
defaultExtension: 'js'
}
}
});
(...)
</script>
Related
I'm trying to implement vue-monaco, but I get these errors:
ERROR Failed to compile with 2 errors 4:59:58 PM
error in ./node_modules/monaco-editor/esm/vs/basic-languages/_.contribution.js
Module parse failed: Unexpected token (37:13)
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 lazyLanguageLoaders[languageId];
| }
> _languageId;
| _loadingTriggered;
| _lazyLoadPromise;
# ./node_modules/monaco-editor/esm/vs/basic-languages/typescript/typescript.contribution.js 9:0-56 10:0-16
# include-loader!./node_modules/vue-monaco/node_modules/monaco-editor/esm/vs/editor/editor.main.js
# ./node_modules/vue-monaco/dist/vue-monaco.es.js
# ./node_modules/cache-loader/dist/cjs.js??ref--13-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--1-0!./node_modules/vue-loader/lib??vue-loader-options!./src/views/PlaygroundView.vue?vue&type=script&lang=js&
# ./src/views/PlaygroundView.vue?vue&type=script&lang=js&
# ./src/views/PlaygroundView.vue
# ./src/router/index.js
# ./src/main.js
# multi (webpack)-dev-server/client?http://X.X.X.X:8081&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.js
error in ./node_modules/monaco-editor/esm/vs/language/typescript/monaco.contribution.js
Module parse failed: Unexpected token (76:15)
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
| })(ModuleResolutionKind || {});
| var LanguageServiceDefaultsImpl = class {
> _onDidChange = new monaco_editor_core_exports.Emitter();
| _onDidExtraLibsChange = new monaco_editor_core_exports.Emitter();
| _extraLibs;
# include-loader!./node_modules/vue-monaco/node_modules/monaco-editor/esm/vs/editor/editor.main.js 101:0-92
# ./node_modules/vue-monaco/dist/vue-monaco.es.js
# ./node_modules/cache-loader/dist/cjs.js??ref--13-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--1-0!./node_modules/vue-loader/lib??vue-loader-options!./src/views/PlaygroundView.vue?vue&type=script&lang=js&
# ./src/views/PlaygroundView.vue?vue&type=script&lang=js&
# ./src/views/PlaygroundView.vue
# ./src/router/index.js
# ./src/main.js
# multi (webpack)-dev-server/client?http://X.X.X.X:8081&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.js
I think these issues are related to my vue.config.js; this is it:
const MonacoEditorPlugin = require('monaco-editor-webpack-plugin')
module.exports = {
transpileDependencies: [
'vuetify'
],
configureWebpack: {
plugins: [
new MonacoEditorPlugin({
languages: ['javascript', 'typescript']
})
],
},
}
Component implementation is almost identical to the guide. The guide seems pretty straightforward, so what am I doing wrong?
P.S. I even tried monaco-editor-vue, but I got almost the same errors.
To make it work I had to downgrade monaco-editor-webpack-plugin to 1.9.1; related link here. Note that typescript language is also needed, even though you want only javascript; related link here.
I'm trying to convert a project for react-native-web which is created in react-native. So I started adding react-native-web by following the docs. When I launch it in the browser after Expo start (Using this command - EXPO_WEB_DEBUG=true expo build:web) it gives me an error for some libraries.
Like below errors
Failed to compile.
./node_modules/react-native-media-controls/dist/react-native-media-controls.esm.js
Cannot find module: './assets/ic_fullscreen.png'. Make sure this package is installed.
You can install this package by running: yarn add ./assets/ic_fullscreen.png.
Failed to compile.
./node_modules/#react-native-community/progress-view/js/index.js
Cannot find module: './ProgressView'. Make sure this package is installed.
You can install this package by running: yarn add ./ProgressView.
So my question is this - Is there any way to use 2 different libraries 1 for the web and 1 for mobile platforms? If Yes, how we can do this? Can anyone guide me in this?
Update -
I followed another article and now I'm getting these errors
ERROR in ./node_modules/#react-native-community/masked-view/js/MaskedView.js 16:14
Module parse failed: Unexpected token (16:14)
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
| const RNCMaskedView = requireNativeComponent<any>('RNCMaskedView');
|
> import { type MaskedViewProps } from './MaskedViewTypes';
|
| /**
# ./node_modules/#react-native-community/masked-view/index.js 1:0-41 3:15-25
# ./node_modules/react-native-skeleton-placeholder/lib/SkeletonPlaceholder.js 1:1702-1748
# ./src/Screens/TestScreens/AnalysisScreens/LeaderBoardScreens/TestResultScreen.tsx 1:1235-1279
# ./src/Navigation/HomeNavigator.tsx 1:844-929
# ./src/Navigation/RootNavigator.tsx 1:920-946
# ./src/App.tsx 1:453-490
# ./index.web.js 1:240-260
ERROR in ./node_modules/#react-native-community/progress-view/js/index.js 3:0-55
Module not found: Error: Can't resolve './ProgressView' in '/Users/sysquare/Desktop/pariksha-native-app-web/node_modules/#react-native-community/progress-view/js'
# ./node_modules/react-native-pdf/index.js 1:1413-1461
# ./src/Screens/Pdf/PdfViewer.tsx 1:1172-1199
# ./src/Navigation/RootNavigator.tsx 1:1358-1393
# ./src/App.tsx 1:453-490
# ./index.web.js 1:240-260
ERROR in ./node_modules/#sentry/react-native/dist/js/touchevents.js 74:16
Module parse failed: Unexpected token (74:16)
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
| */
| render() {
> return (<View style={touchEventStyles.wrapperView}
| // eslint-disable-next-line #typescript-eslint/no-explicit-any
| onTouchStart={this._onTouchStart}>
# ./node_modules/#sentry/react-native/dist/js/index.js 14:0-75 14:0-75 14:0-75
# ./src/App.tsx 1:763-794
# ./index.web.js 1:240-260
ERROR in ./node_modules/react-native-webview/lib/WebView.js 7:36
Module parse failed: Unexpected token (7:36)
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
| // implementation which is produced by Expo SDK 37.0.0.1 implementation, with
| // similar interface than the native ones have.
> var WebView = function () { return (<View style={{
| alignSelf: 'flex-start',
| borderColor: 'rgb(255, 0, 0)',
# ./node_modules/react-native-webview/index.js 1:0-36 3:0-19 4:15-22
# ./src/Screens/WebView/TermsAndCondition.tsx 1:469-500
# ./src/Navigation/RootNavigator.tsx 1:1628-1675
# ./src/App.tsx 1:453-490
# ./index.web.js 1:240-260
ERROR in ./node_modules/react-native/Libraries/BatchedBridge/BatchedBridge.js 15:19
Module parse failed: Unexpected token (15:19)
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
| const MessageQueue = require('./MessageQueue');
|
> const BatchedBridge: MessageQueue = new MessageQueue();
|
| // Wire up the batched bridge on the global object so that we can call into it.
# ./src/NativeComponents/MathView/index.tsx 1:999-1060
# ./src/Screens/TestScreens/TestView.tsx 1:455-497
# ./src/Screens/TestScreens/TestScreen.tsx 1:3229-3250
# ./src/Navigation/HomeNavigator.tsx 1:1184-1228
# ./src/Navigation/RootNavigator.tsx 1:920-946
# ./src/App.tsx 1:453-490
# ./index.web.js 1:240-260
ERROR in ./node_modules/react-native/Libraries/Components/UnimplementedViews/UnimplementedView.js 19:47
Module parse failed: Unexpected token (19:47)
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
| * View component and renders its children.
| */
> class UnimplementedView extends React.Component<$FlowFixMeProps> {
| render(): React.Node {
| // Workaround require cycle from requireNativeComponent
# ./node_modules/#react-native-community/progress-bar-android/js/RNCProgressBarAndroid.js 11:0-98
# ./node_modules/#react-native-community/progress-bar-android/js/index.js 1:0-63 1:0-63
# ./node_modules/react-native-pdf/index.js 1:1339-1394
# ./src/Screens/Pdf/PdfViewer.tsx 1:1172-1199
# ./src/Navigation/RootNavigator.tsx 1:1358-1393
# ./src/App.tsx 1:453-490
# ./index.web.js 1:240-260
ERROR in ./node_modules/react-native/Libraries/Core/Devtools/getDevServer.js 13:23
Module parse failed: Unexpected token (13:23)
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
| import NativeSourceCode from '../../NativeModules/specs/NativeSourceCode';
|
> let _cachedDevServerURL: ?string;
| let _cachedFullBundleURL: ?string;
| const FALLBACK = 'http://localhost:8081/';
# ./node_modules/#sentry/react-native/dist/js/integrations/debugsymbolicator.js 84:31-91
# ./node_modules/#sentry/react-native/dist/js/integrations/index.js 1:0-56 1:0-56
# ./node_modules/#sentry/react-native/dist/js/index.js 8:0-47 35:0-47
# ./src/App.tsx 1:763-794
# ./index.web.js 1:240-260
ERROR in ./node_modules/react-native/Libraries/Core/Devtools/parseErrorStack.js 13:12
Module parse failed: Unexpected token (13:12)
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
| 'use strict';
|
> import type {StackFrame} from '../NativeExceptionsManager';
| import type {HermesParsedStack} from './parseHermesStack';
|
# ./node_modules/#sentry/react-native/dist/js/integrations/debugsymbolicator.js 24:36-99
# ./node_modules/#sentry/react-native/dist/js/integrations/index.js 1:0-56 1:0-56
# ./node_modules/#sentry/react-native/dist/js/index.js 8:0-47 35:0-47
# ./src/App.tsx 1:763-794
# ./index.web.js 1:240-260
ERROR in ./node_modules/react-native/Libraries/Core/Devtools/symbolicateStackTrace.js 15:12
Module parse failed: Unexpected token (15:12)
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
| const getDevServer = require('./getDevServer');
|
> import type {StackFrame} from '../NativeExceptionsManager';
|
| export type CodeFrame = $ReadOnly<{
# ./node_modules/#sentry/react-native/dist/js/integrations/debugsymbolicator.js 48:46-115
# ./node_modules/#sentry/react-native/dist/js/integrations/index.js 1:0-56 1:0-56
# ./node_modules/#sentry/react-native/dist/js/index.js 8:0-47 35:0-47
# ./src/App.tsx 1:763-794
# ./index.web.js 1:240-260
ERROR in ./node_modules/react-native/Libraries/Image/resolveAssetSource.js 19:12
Module parse failed: Unexpected token (19:12)
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
| const {pickScale} = require('./AssetUtils');
|
> import type {ResolvedAssetSource} from './AssetSourceResolver';
|
| let _customSourceTransformer, _serverURL, _scriptURL;
# ./src/NativeComponents/VideoPlayer/Video1.js 1:1877-1935
# ./src/Components/Video/VideoPlayer.tsx 1:1062-1114
# ./src/Screens/VideoPlayer/VideoPlayer.tsx 1:1452-1497
# ./src/Navigation/RootNavigator.tsx 1:676-721
# ./src/App.tsx 1:453-490
# ./index.web.js 1:240-260
ERROR in ./storybook/stories/Button/Button.stories.tsx 8:5
Module parse failed: Unexpected token (8:5)
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
| import Button from '../../../src/DesignComponents/ButtonGroup/Button';
|
> type Props = ButtonPropTypes;
| export const button: Props = {
| active: false,
# ./storybook/stories/index.js 1:0-33
# ./storybook/index.js 13:2-22
# ./src/StoryBookDeviceUI.tsx 1:263-286
# ./src/Navigation/HomeNavigator.tsx 1:1253-1284
# ./src/Navigation/RootNavigator.tsx 1:920-946
# ./src/App.tsx 1:453-490
# ./index.web.js 1:240-260
ERROR in ./storybook/stories/Welcome/Welcome.stories.js 6:55
Module parse failed: Unexpected token (6:55)
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
| import Welcome from '.';
|
> storiesOf('Welcome', module).add('to Storybook', () => <Welcome showApp={linkTo('Button')} />);
|
# ./storybook/stories/index.js 2:0-35
# ./storybook/index.js 13:2-22
# ./src/StoryBookDeviceUI.tsx 1:263-286
# ./src/Navigation/HomeNavigator.tsx 1:1253-1284
# ./src/Navigation/RootNavigator.tsx 1:920-946
# ./src/App.tsx 1:453-490
# ./index.web.js 1:240-260
1 error has detailed information that is not shown.
Use 'stats.errorDetails: true' resp. '--stats-error-details' to show it.
webpack 5.52.0 compiled with 12 errors in 7213 ms
Many react native packages are not transpiled to es6 and include things that aren't compatible with the web. Its sometimes necessary to parse them with babel before they will run on the web.
if you run this expo will generate a webpack config for you
expo customize:web
then you can add modules to the babel loader, for example:
const createExpoWebpackConfigAsync = require("#expo/webpack-config");
// Expo CLI will await this method so you can optionally return a promise.
module.exports = async function (env, argv) {
const config = await createExpoWebpackConfigAsync(
{
...env,
babel: {
dangerouslyAddModulePathsToTranspile: [
// Add package names here to ensure they are transpiled
"#react-native-community/masked-view",
],
},
},
argv
);
return config;
};
You might notice that this is a "dangerous" method, so use with caution.
The documentation for this config option is here https://github.com/expo/expo-cli/blob/master/packages/webpack-config/README.md
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.
Seems like i'm stuck with my problems with loading a external umd component in vue.
I try to do something similar as
Vue 3 external component/plugin loading in runtime
This works for me using vue2 and webpack
Now I'm using Vue3/Vite and also the same source as in the Question above.
But when resolving the external component promise i get the following error when :
vue.js:1184 [Vue warn]: Unhandled error during execution of async component loader
at <AsyncComponentWrapper>
at <DemoComponent>
at <HelloWorld msg="Hello Vue 3.0 + Vite" >
at <App>
warn # vue.js:1184
logError # vue.js:1357
handleError # vue.js:1349
onError # vue.js:4637
(anonymous) # vue.js:4677
Promise.catch (async)
setup # vue.js:4676
callWithErrorHandling # vue.js:1300
setupStatefulComponent # vue.js:7561
setupComponent # vue.js:7522
mountComponent # vue.js:5264
processComponent # vue.js:5240
patch # vue.js:4861
mountChildren # vue.js:5043
processFragment # vue.js:5203
patch # vue.js:4854
componentEffect # vue.js:5357
reactiveEffect # vue.js:339
effect # vue.js:314
setupRenderEffect # vue.js:5322
mountComponent # vue.js:5280
processComponent # vue.js:5240
patch # vue.js:4861
mountChildren # vue.js:5043
processFragment # vue.js:5203
patch # vue.js:4854
componentEffect # vue.js:5357
reactiveEffect # vue.js:339
effect # vue.js:314
setupRenderEffect # vue.js:5322
mountComponent # vue.js:5280
processComponent # vue.js:5240
patch # vue.js:4861
mountChildren # vue.js:5043
processFragment # vue.js:5203
patch # vue.js:4854
componentEffect # vue.js:5357
reactiveEffect # vue.js:339
effect # vue.js:314
setupRenderEffect # vue.js:5322
mountComponent # vue.js:5280
processComponent # vue.js:5240
patch # vue.js:4861
render # vue.js:5937
mount # vue.js:4168
app.mount # vue.js:9324
(anonymous) # main.js:7
Show 16 more frames
external-component.js:11 Uncaught (in promise) TypeError: Chaining cycle detected for promise #<Promise>
at <anonymous>
at HTMLScriptElement.<anonymous> (external-component.js:11)
this is the Code for the promise
export default async function externalComponent(url) {
const name = url.split(`/`).reverse()[0].match(/^(.*?)\.umd/)[1];
if (window[name]) return window[name];
console.log('run');
window[name] = new Promise((resolve, reject) => {
script.async = true;
script.addEventListener(`load`, () => {
resolve(window[name]);
});
script.addEventListener(`error`, () => {
reject(new Error(`Error loading ${url}`));
});
script.src = url;
document.head.appendChild(script);
});
return window[name];
}
and use this in my DemoComponent:
<script lang="ts">
import externalComponent from '../external-component';
import { defineAsyncComponent } from 'vue'
const asyncComponent = defineAsyncComponent(
() => externalComponent(`http://localhost:8200/MyComponent/MyComponent.umd.min.js`)
)
export default {
name: 'DemoComponent',
components: {
MyComponent:asyncComponent
},
....
Can somebody help me with this?
update:
If import vue from vue/dist/vue.esm-bundler and set to global, then no need to change Vite config, and no need to load vue from cdn.
import * as Vue from 'vue/dist/vue.esm-bundler';
window.Vue = Vue;
After trying the link above, I had gotten the vue warn invalid vnode type symbol(static) (symbol) error.
By adding the following config in Vite.config.js, it works for me.
// vite.config.js
import { viteExternalsPlugin } from 'vite-plugin-externals'
export default {
plugins: [
viteExternalsPlugin({
vue: 'Vue'
}),
]
}
https://github.com/crcong/vite-plugin-externals
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.