I simply wanted to import lodash import _ from 'lodash';, and I keep having the following error:
rollup v2.23.0
bundles src/main.js → public\build\bundle.js...
[!] (plugin commonjs) SyntaxError: Unexpected token (434:48) in C:\my-svelte\node_modules\lodash\lodash.js
node_modules\lodash\lodash.js (434:48)
432:
433: /** Detect free variable `process` from Node.js. */
434: var freeProcess = moduleExports && freeGlobal.process;
^
435:
436: /** Used to access faster Node.js helpers. */
SyntaxError: Unexpected token (434:48) in C:\my-svelte\node_modules\lodash\lodash.js
at Object.pp$4.raise (C:\my-svelte\node_modules\rollup\dist\shared\rollup.js:15135:13)
at Object.pp.unexpected (C:\my-svelte\node_modules\rollup\dist\shared\rollup.js:12906:8)
at Object.pp$3.parseIdent (C:\my-svelte\node_modules\rollup\dist\shared\rollup.js:15086:10)
at Object.parseIdent (C:\my-svelte\node_modules\rollup\dist\shared\rollup.js:18737:27)
at Object.parseIdent (C:\my-svelte\node_modules\rollup\dist\shared\rollup.js:18969:27)
at Object.pp$3.parseSubscript (C:\my-svelte\node_modules\rollup\dist\shared\rollup.js:14380:62)
at Object.parseSubscript (C:\my-svelte\node_modules\rollup\dist\shared\rollup.js:18640:37)
at Object.pp$3.parseSubscripts (C:\my-svelte\node_modules\rollup\dist\shared\rollup.js:14355:24)
at Object.pp$3.parseExprSubscripts (C:\my-svelte\node_modules\rollup\dist\shared\rollup.js:14340:21)
at Object.pp$3.parseMaybeUnary (C:\my-svelte\node_modules\rollup\dist\shared\rollup.js:14314:17)
I used npx degit sveltejs/template my-svelte to create the app.
I tried lodash-es as well, same thing: [!] (plugin commonjs) SyntaxError: Unexpected token (13:46) in C:\my-svelte\node_modules\lodash-es_nodeUtil.js.
This is definitely a lodash related issue, specifically related to that line 434. Everything else I tried to import works just fine:
import {v4} from 'uuid';
import {Subject} from "rxjs";
import ReconnectingWebSocket from 'reconnecting-websocket';
...
EDIT: The problem is caused by import replace from '#rollup/plugin-replace'; in rollup.config.js :(
Now I need to figure out how to get .env variables into Svelte without #rollup/plugin-replace...
I use lodash-es and works fine. I even get nice tree-shaking with that.
<script>
import { upperCase } from 'lodash-es';
export let name;
</script>
<p>{upperCase(name)}</p>
Edit
The answer was pretty old and code improves: my application now uses this to import lodash on a svelte file for quite a while - I hope it works for the OP also now:
import _ from "lodash";
Old Post
(a commenter mentioned that this does not work anymore, for whatever reasons - I leave it just here)
This works for me in my svelte files:
<script>
const _ = require('lodash');
//...
</script>
I often get into trouble with import on my electron/svelte project but require usually helps.
Related
I've been trying to get storybook working with a Vue 2 + composition API project for a while now and I keep running into the error:
Unexpected error while loading ./ProductCard.stories.js: [vue-composition-api] must call Vue.use(VueCompositionAPI) before using any function.
So I assume I need to include it before any file/story gets called.
When I try and import it into my storybook's main.js file like this:
import Vue from "vue";
import VueCompositionApi from "#vue/composition-api";
Vue.use(VueCompositionApi);
module.exports = {
//... storybook config
}
I get the console error:
import Vue from "vue";
^^^^^^
SyntaxError: Cannot use import statement outside a module
I've also tried:
const Vue = require("vue");
const VueCompositionApi = require('#vue/composition-api');
Vue.use(VueCompositionApi);
Which appears to work but I still get the top error [vue-composition-api] must call Vue.use(VueCompositionAPI) before using any function.
Does anybody know where I'm meant to import the composition API so it's loaded before it's called?
I've tried putting it in the preview.js file as well with the same error.
Whats causing it is the component ProductCard loads a composable called useUiStatewhich uses vue-composition-api.
I would have thought it's called vue.use already.
I'm new to svelte and I am trying to use an installed node module in my dependancies called momentum-slider. In the script tags of my svelte component I have:
import MomentumSlider from "../../node_modules/momentum-slider";
let slider = new MomentumSlider({
el: ".ms-container",
});
In my component's html markup I have the suggested markup as shown in the tutorial at https://scotch.io/tutorials/building-a-fancy-countdown-timer-with-momentumsliderjs
However, I am getting a typeError in the browser console:
I am new to development in general and I am not sure if this is a problem with momentum-slider or an error on my part. Any insights would be much appreciated.
Not sure how to use this library but you should take care of 2 things. First import your package like the following:
import MomentumSlider from "momentum-slider";
Second you need to initialise the MomentumSlider class when the component is mounted using onMount:
import { onMount } from "svelte";
import MomentumSlider from "momentum-slider";
let slider;
onMount(() => {
slider = new MomentumSlider({
el: ".ms-container"
});
});
If you have installed the package properly: npm install momentum-slider
the package is listed in your package.json.
When this fits, you just have to import:
import MomentumSlider from "momentum-slider";
I'm using mixins in the subset components of app.vue without any problems, everything is good and works fine, but when I want to use it into the app.vue component, i'm having error in console.
<script>
/* eslint-disable */
import PanelUser from "./layouts/PanelUser";
import Auth from "./mixins/Auth";
export default {
name: "App",
mixins: [Auth],
components: {
PanelUser
},
};
</script>
I also can not use the router; when I use it, the page is completely white and nothing is displayed.
I have found how to check this situation.
First, you could see that the error threw at checkComponents method, move your mouse on and left click.
Second, add a break point, and then refresh the page.
Third, maybe you could find that some mixins or components which are referenced show undefined.
In my case, the second mixin is undefind.
Finally, check the reference or the mixin file. I found the reason is that I copied the mixin from another file and forgot to rename the mixin at declare part.
That's all, try to check by yourself. :)
You need to change:
import PanelUser from "./layouts/PanelUser";
To
import {PanelUser} from "./layouts/PanelUser";
And
import Auth from "./mixins/Auth";
To
import {Auth} from "./mixins/Auth";
The error is mixin related.
Make sure your mixins being used in your components are correct. (eg. name, esm import path etc.)
import samplePackage from "sample-package";
import anotherMixin from "another-package/path/to/mixin";
export default {
mixins: [
samplePackage.sampleMixin,
anotherMixin
]
}
After a couple hours of debugging, I found in our case the culprit was vuelidate. We tried to migrate from Webpack to Vite, keeping Vue 2.7, and vuelidate 3.
Importing:
import { validationMixin } from 'vuelidate'
console.log(validationMixin // undefined in production build
printed only undefined after a vite build
After reading about issues related to non-ESM imports (#1, #2) I tried to change the import to vuelidate/src:
import { validationMixin } from 'vuelidate/src/index'
console.log(validationMixin) // works!
// import the validators from "lib" though, src threw an require-js error for me
import { required, email, minLength } from "vuelidate/lib/validators"
I'm having trouble to run a NativeScript App on the Playground using Vuex.
I've already added the NPM package on the project. And modified my imports from:
import { mapGetters } from 'vuex'
to
import { mapGetters } from '../vuex'
But it doesn't solved the problem.
Then, I've removed all the mapGetters, mapActions from the code. Now it calls the store directly:
return this.$store.getters.[getterName];
However, when I scan the QR code, the error message still says:
Error: com.tns.NativeScriptException: Failed to find module: "vuex", relative to: app/tns_modules/
As this is on the browser, I don't know how to modify or edit the code to reference the Vuex modules.
I've also checked this playground Vue + Vuex sample code. And it runs without problem.
Am I missing something?
Thanks for your time.
I have a question regarding importing an anime.js into my vue project. I am using vue cli. How do I include animejs to my project? I tried it this way:
import anime from 'animejs'
Vue.use(anime);
but I get an error in the console that says:
Uncaught TypeError: a.hasOwnProperty is not a function. . .
can you guys help me?
Vue.use() is used only for plugins designed for Vue.js. You can't simply add a library there, it won't work.
My suggestion is that you create that plugin and use it on your project to make anime.js acessible everywhere.
You could do it like this:
//vue-anime.js
import anime from 'animejs';
const VueAnime = {
install (Vue, options) {
Vue.prototype.$animeJS = anime;
}
}
export default VueAnime
Then later
import VueAnime from './vue-anime';
Vue.use(VueAnime);
Now every Vue component will be able to use anime acessing this.$animeJS.
Or simply -
import Vue from "vue";
import anime from 'animejs/lib/anime.min.js';
Vue.prototype.$anime = anime;
Then this.$anime in all components
#Phiter's answer looked good at first, but I wasn't able to get it to work in my vue-cli 3 environment. The below code worked though, so I think it may work for you. This is just a simple way to install an external library into your Vue app and expose it through a prototype:
// animejs.js
import anime from 'animejs'
const install = (Vue, options) => {
Vue.prototype.$animejs = anime
}
export default install
// Then, in your main.js (at least for me)
import VueAnime from './animejs'
Vue.use(VueAnime)
Now, when you need to access the library, just use this.$animejs in your project.
or simply like this in main.js after npm install:
import anime from 'animejs';
Object.defineProperty(Vue.prototype, '$anime', { value: anime });
then use this.$anime tu use it.
To use AnimeJS globally in Vue 3 project, just create a plugin (plugins/anime.js):
import anime from 'animejs';
export default {
install(app, options) {
app.config.globalProperties.$anime = anime;
},
};
Then include it (main.js or elsewhere):
import VueAnime from './plugins/anime';
createApp(App)
.use(VueAnime)
.mount('#app');
And now, it's accessible everywhere by this.$anime.
Please notice that a minor change from the previous version is installing the plugin for Vue 3.