I'm building project on laravel seven, following this instruction
https://www.itsolutionstuff.com/post/laravel-vue-router-example-from-scratchexample.html
But when I try to run
npm run dev
There are error
ERROR in ./node_modules/vue-router/dist/vue-router.mjs 2139:18-26
Can't import the named export 'computed' from non EcmaScript module (only default export is available)
And many other errors like this.
There are solution, which suggests adding this lines to mix file
test: /\.mjs$/,
include: /node_modules/,
type: "javascript/auto"
But this caused another problem:
"export 'default' (imported as 'VueRouter') was not found in 'vue-router'
# multi ./resources/js/app.js ./resources/sass/app.scss
And potential solution for this problem causes other problems.
Are the some example of laravel-vue routing that actually works, or step-by-step instruction for that?
Related
Hello I changed my code from fetch to axios and when I run my tests I get this problem... Can anyone help me with that ?
SyntaxError: Cannot use import statement outside a module
> 1 | import axios from "axios";
Jest encountered an unexpected token
This usually means that you are trying to import a file which Jest cannot parse, e.g. it's not plain JavaScript.
By default, if Jest sees a Babel config, it will use that to transform your files, ignoring "node_modules".
Here's what you can do:
• If you are trying to use ECMAScript Modules, see https://jestjs.io/docs/en/ecmascript-modules for how to enable it.
• To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.
• If you need a custom transformation specify a "transform" option in your config.
• If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option.
You'll find more details and examples of these config options in the docs:
This issue occurred after axios update from 0.27.2 to 1.0.0. There is an opened issue, so probably this is going to be fixed soon. Meanwhile they're working on that, you can temporary fix it by setting up transformIgnorePatterns in jest config:
transformIgnorePatterns = ["node_modules/(?!axios)/"]
For me helped the following jest.config.js setup:
transformIgnorePattern: [
'<rootDir>/node_modules/(?!axios)/'
]
alongside with
moduleNameMapper: {
'^axios$': require.resolve('axios'),
}
Trying to execute that must be a simple screen test, I found this error. I saw some related issues and solutions touching babel and jest config but I did not found the proper way to solve it.
● Test suite failed to run
Jest encountered an unexpected token
This usually means that you are trying to import a file which Jest cannot parse, e.g. it's not plain JavaScript.
By default, if Jest sees a Babel config, it will use that to transform your files, ignoring "node_modules".
Here's what you can do:
• If you are trying to use ECMAScript Modules, see https://jestjs.io/docs/en/ecmascript-modules for how to enable it.
• To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.
• If you need a custom transformation specify a "transform" option in your config.
• If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option.
You'll find more details and examples of these config options in the docs:
https://jestjs.io/docs/en/configuration.html
Details:
/Users/.../node_modules/react-native-ble-plx/index.js:3
export { BleError, BleErrorCode, BleAndroidErrorCode, BleIOSErrorCode, BleATTErrorCode } from './src/BleError'
^^^^^^
SyntaxError: Unexpected token 'export'
Any suggestion? Thanks!
Finally was solved adding it to jest.config.js:
transformIgnorePatterns: [
'<rootDir>/node_modules/(?!(jest-)?#?react-native|#react-native-community|#react-navigation)',
],
Source: related issue on github
https://github.com/callstack/react-native-testing-library/issues/703
I'm currently starting a new project with vuejs and wanted to use primevue for some components.
My knowledge with VueJS in general is not the best, because I'm just getting started with it.
My application has a webpack based build with vue-loader configured, so thats how primevue is getting installed.
I was trying to use the Toast-Component, but when importing Toast from 'primevue/toastservice' webpack throws these two errors:
ERROR in ./node_modules/primevue/components/toast/Toast.vue?vue&type=script&lang=js& (./node_modules/vue-loader/lib??vue-loader-options!./node_modules/primevue/components/toast/Toast.vue?vue&type=script&lang=js&)
Module not found: Error: Can't resolve './ToastMessage' in '*/node_modules/primevue/components/toast'
# ./node_modules/primevue/components/toast/Toast.vue?vue&type=script&lang=js& (./node_modules/vue-loader/lib??vue-loader-options!./node_modules/primevue/components/toast/Toast.vue?vue&type=script&lang=js&) 11:0-42 86:24-36
# ./node_modules/primevue/components/toast/Toast.vue?vue&type=script&lang=js&
# ./node_modules/primevue/components/toast/Toast.vue
# ./node_modules/primevue/toast.js
# ./src/main.js
and
ERROR in ./node_modules/primevue/components/toast/Toast.vue?vue&type=style&index=0&lang=css& (./node_modules/vue-loader/lib??vue-loader-options!./node_modules/primevue/components/toast/Toast.vue?vue&type=style&index=0&lang=css&) 97:0
Module parse failed: Unexpected token (97:0)
File was processed with these loaders:
*./node_modules/vue-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
|
|
-> .p-toast {
| position: fixed;
| width: 20em;
# ./node_modules/primevue/components/toast/Toast.vue?vue&type=style&index=0&lang=css& 1:0-118 1:134-137 1:139-254 1:139-254
# ./node_modules/primevue/components/toast/Toast.vue
# ./node_modules/primevue/toast.js
# ./src/main.js
I import the Component as following:
import Vue from "vue";
import App from "./App/App.vue";
import Toast from 'primevue/toast';
import ToastService from 'primevue/toastservice';
Vue.use(ToastService);
Vue.component('Toast', Toast);
new Vue({
render: h => h(App)
}).$mount("#app");
I already tried importing/using the 'Toast' component in my App.js or in other files where i mainly wanna use those Toasts without success.
If I leave out the Toast all works fine, so the ToastService seems alright.
So if theres anybody who uses primevue and also ran into this problem and found a solution I thank you all in advance.
npm install mitt
solves the first issue. It is included in devDependencies of the primevue package, but for some reasons its not installed.
I have a solution for your second error, but not sure how to fix your first "Can't resolve" error, as I am still figuring that one out.
What does your webpack config look like? Do you specify a rule for CSS files? If the component uses a <style> block you need to tell webpack how to handle this.
Specify a rule for .css files, and it will also apply the same to <style> blocks in .vue files. Without this, webpack does not know how to parse the blocks.
So make sure your webpack.config.js rules section has the following CSS part in it (or something similar):
rules: [
{
test: /\.vue$/,
use: 'vue-loader'
},
// the below will apply to both plain `.css` files AND `<style>` blocks in `.vue` files
{
test: /\.css$/,
use: [
'vue-style-loader',
'css-loader'
]
}
]
Also make sure to install the relevant tools in your package.json.
I solved something similar, so see my question and answer for more detailed info.
I'm trying to use tipsi-twitter in snack.expo.io but I'm running into issues. I added the following item into package.json dependencies:
"tipsi-twitter": "*"
Expo then appeared to successfully install this package. In my App.js I included the following import:
import TwitterAuth from 'tipsi-twitter';
The import compiles successfully but when I put the following code after the imports:
TwitterAuth.init({
twitter_key: '<TWITTER_KEY>',
twitter_secret: '<TWITTER_SECRET>',
})
This returns an error of:
"Cannot read property 'init' of undefined"
But this appears to be the exact implementation in the Usage section of the tipsi-twitter github page:
https://github.com/tipsi/tipsi-twitter#usage
Any idea what the issue might be or how to debug? Am I possibly missing some type of configuration step or is it possible that expo.io doesn't support this package/scenario?
I'm trying to incorporate the Ripple package into my Nuxt application.
Following Nuxt docs and the package docs example I have a ripple.js file in plugins/ directory containing this:
import Vue from 'vue'
import Ripple from 'vue-ripple-directive'
Vue.directive('ripple', Ripple)
Then in nuxt.config.js I have:
plugins: [
'~/plugins/ripple.js'
],
But now the app doesn't work at all, with some Unexpected token export error message on the screen, and a "Missing stack frames" error message in vm.js.
I have no idea what that means nor what I'm doing wrong, any suggestion?
This is due to an SSR error, where vue-ripple-directive cannot be used on the server. In order to get around this, you need to instruct Nuxt to only load the plugin on the client side.
To fix this, do the following 2 things:
First, rename ripple.js to ripple.client.js.
Second, update the plugins array to the following:
plugins: [
'~/plugins/ripple.client.js'
]
The .client postfix signals to nuxt to only run the plugin on the client.
More information can be found here
Always keep this method in mind when adding Vue plugins, especially when they interact with the DOM in some way. Most that I've come across require this method to function without errors, as the DOM is unavailable on the server.