I am setting up the plugin file of vuetify based on this reference:
https://vuetifyjs.com/en/getting-started/quick-start
import Vue from "vue";
import Vuetify from "vuetify";
Vue.use(Vuetify);
export default new Vuetify({ ... });
Getting this error:
Failed to compile.
./src/plugins/vuetify.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: C:/codes/hkiod-mpm/client/src/plugins/vuetify.js: Unexpected token (6:33)
4 | Vue.use(Vuetify);
5 |
> 6 | export default new Vuetify({ ... });
| ^
7 |
I am not sure what this ... means? Is this a new javascript syntax? How can I get this fix? Thanks.
Related
When creating the SRC folder and inserting the appropriate items, react-native started giving this error:
AppEntry.js:1 Uncaught Error: Cannot find module '../../App'
Uncaught ReferenceError: process is not defined
index.js:1 ./node_modules/expo/AppEntry.js:3
Module not found: Can't resolve '../../App'
1 | import registerRootComponent from 'expo/build/launch/registerRootComponent';
2 |
> 3 | import App from '../../App';
4 |
5 | registerRootComponent(App);
From what I understand it is not finding the App with the path which is in "AppEntry.js".
However, AppEntry is by default in package.json:
"main": "node_modules/expo/AppEntry.js"
What should I do to fix?
You have moved your App.js or App.ts from root folder to 'src' so in appEntry you need to update your path from:
import App from '../../App';
To:
import App from '../../src/App';
Or you just can move back App.tsx to root folder
You can set the initializer path using the "main" property in package.json (note if you do so you need to write something like this.
import { registerRootComponent } from "expo";
import App from "./App";
export default registerRootComponent(App);
An example is https://github.com/trajano/spring-cloud-demo/blob/83887627274afa1970b5a0861e7c7d2e27efecce/expo-app/src/init/index.ts#L10-L13
with the package.json line https://github.com/trajano/spring-cloud-demo/blob/rework/expo-app/package.json#L5
Doing this gives you more flexibility, and I generally don't see the downside to doing it.
I have created a vue app with vue-cli 4.* and vue 3.0.0.
I am trying to use this syntax that I have seen as the proposed solution
to define complex prop types such as Array of Objects with a specific shape:
<script lang="ts">
import { PropType } from 'vue'
export default {
props: {
numbers: Array as PropType<Array<number>>
}
}
</script>
When I try this, and running the app via vue-cli-service serve, gives the error:
Module parse failed: Unexpected token (7:27)
File was processed with these loaders:
* ./node_modules/vue-loader-v16/dist/templateLoader.js
* ./node_modules/cache-loader/dist/cjs.js
* ./node_modules/vue-loader-v16/dist/index.js
You may need an additional loader to handle the result of these loaders.
Also eslint in my IDE shows as if the as was the issue:
Parsing error: Unexpected token, expected ","
5 | name: 'Question',
6 | props: {
> 7 | numbers: Array as PropType<Array<{}>>
| ^
I am using Vuex and using store.js for the first time. In my main.js file I am using
import { store } from './store/store'
new Vue({
el: '#app',
store,
render: h => h(App)
})
and everytime I run this I keep getting this error.
ERROR in ./src/store/store.js
Module not found: Error: Can't resolve '.vue' in '/Users/briansantos/code/Vuex/src/store'
# ./src/store/store.js 1:0-23
# ./src/main.js
# multi main
ERROR in ./src/store/store.js
Module not found: Error: Can't resolve '.vuex' in '/Users/briansantos/code/Vuex/src/store'
# ./src/store/store.js 2:0-25
# ./src/main.js
# multi main
I have tried scouring the internet and have found several peopole saying that this is a dependency issue and I have checked for updates and with no luck have found an answer. Below is my store.js file in my store folder.
import Vue from '.vue';
import Vuex from '.vuex';
Vue.use(Vuex);
export default new Vuex.Store({
state: {
counter: 0
}
})
If anyone could help me understand what is happening and how to correct this. Here is the repo all you have to do is clone and npm install.
https://github.com/brianmsantos/Vuex
Your problem is with the imports of Vue packages. You have to remove the dot prefix from them, like so:
import Vue from 'vue';
import Vuex from 'vuex';
Those packages come from node_modules, thus don't need to be prefixed by .
I have a pug file with the following...
#footer
script(type="module")
| import Vue from '/vue/vue.esm.browser.js'
| import { JRGVue } from '/ui/index.js'
| import VueMaterial from '/material/vue-material.js'
| (()=>{
| const vue = new JRGVue(Vue);
| vue.app.use(VueMaterial);
| vue.app.$mount('#jg-app');
| })();
I get
Uncaught SyntaxError: The requested module '/material/vue-material.js' does not provide an export named 'default'
When I change it to
import * as VueMaterial from '/material/vue-material.js'
I get
Uncaught TypeError: _vue2.default is not a constructor
What is the proper way to import the Vue Material library using ESM?
Update
It does seem to work with Vuetify
#footer
script(type="module")
| import Vue from '/vue/vue.esm.browser.js'
| window.Vue = Vue;
script(type="module")
| import * as Vuetify from '/vuetify/vuetify.js';
| import { JRGVue } from '/ui/index.js';
| Vue.use(Vuetify);
| const vue = new JRGVue(Vue);
| vue.app.$mount('#jg-app');
Update
No longer seems to be working with the newest version. It would be really nice to find a UI with native ESM support
In case the import refers to vue-material library, a correct way to import it is:
import VueMaterial from 'vue-material';
And bundle the application with it.
It's impossible to import it with native ES modules (<script type="module">).
It's possible to import packages that were built as ES modules (e.g. vue.esm.browser.js for vue) but vue-material doesn't have ES6 entry point.
In case /material/vue-material.js refers to vue-material/dist/vue-material.js, it is UMD module which cannot be imported by ES module without module interop.
ES module that could be imported is vue-material/src/index.js but it cannot be imported directly because the package uses source files that aren't compliant with specs (.vue, .scss) and need to be built.
A way to import vue-material UMD module at runtime is to use SystemJS for module interop.
Also, IIFE is an antipattern in module scope.
I am trying to add React Styleguidist to my project and am getting an "Unexpected token" compiler error.
I am using the Create react app to create the project. After it didn't work I created a new project and continue to get the same error when returning a component.
Here is the code for the simple component that I created to try to figure it out:
import React from 'react';
import React from 'react';
const Component1 = (props)=><div>Test</div>;
export default Component1;
Based on what I read at https://react-styleguidist.js.org/docs/getting-started.html it looks like I should only need to run npm install --save-dev react-styleguidist and then npx styleguidist server
I am sure that I am missing something, but have not been able to find anything that would explain the error below.
SyntaxError: /Users/seanlynch/Projects/style/src/Components/Component1.js: Unexpected token (3:28)
1 | import React from 'react';
2 |
> 3 | const Component1 = (props)=><div>Test</div>;
| ^
4 |
5 |
6 | export default Component1;
# ./node_modules/react-styleguidist/lib/index.js (./node_modules/react-styleguidist/loaders/styleguide-loader.js!./node_modules/react-styleguidist/lib/index.js) 46:30-101
# ./node_modules/react-styleguidist/lib/index.js
# multi ./node_modules/react-styleguidist/lib/index ./node_modules/react-styleguidist/node_modules/react-dev-utils/webpackHotDevClient.js
add styleguide.config.js with follow lines
module.exports = {
propsParser: require("react-docgen").parse,
webpackConfig: require("react-scripts/config/webpack.config"),
};