SyntaxError: Cannot use import statement outside a module { AXIOS } - vue.js

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'),
}

Related

SvelteKit breaks npm's import mechanism

I've written several npm library projects, and this is the way I import symbols in one JS file from another JS file, but it won't work in the script section of a svelte file:
My 'package.json' file has a name field (e.g. set to '#jdeighan/something`) and an 'exports' section with entries like "./utils": "./src/lib/utils.js". Then in any other JS file I can import symbols from utils.js with "import {somesymbol} from '#jdeighan/something/utils'. It's how to do imports from a library that you've installed with 'npm install', but it also (cleverly) works inside the project itself. But in a svelte file, this won't work - I get the error message "Failed to resolve import "#jdeighan/something/utils" from "src\routes+page.svelte". Does the file exist?". Here is what I have in my svelte file:
<script>
import {somesymbol} from '#jdeighan/something/utils';
</script>
I know that svelte has a handy $lib alias, but I'd prefer to use the npm standard mechanism, but it seems to be broken when using SvelteKit (not sure about using plain svelte)
I'd prefer to use the npm standard mechanism
This is absolutely not the standard mechanism. I have never seen people import from the current project by package name. While this is supported by Node itself, nothing else seems to support it, including e.g. the VS Code language server which will be unable to provide code navigation.
Using the name makes it less clear that the import is local and not a separate dependency and if the name were to be changed it would have to be adjusted everywhere.
I would recommend just not doing that. SvelteKit has $lib predefined as a default to provide essentially the same functionality in a convention-based way that actually works.
If you create a project with just these 3 files, then execute node foo.js in a console window, you get "Hello, World!":
package.json:
{
"name": "#jdeighan/something",
"type": "module",
"version": "1.0.0",
"exports": {
"./utils": "./utils.js"
}
}
foo.js:
import {message} from '#jdeighan/something/utils'
console.log(message);
utils.js
export let message = 'Hello, World!';

React Native test with Jest and react-native-ble-plx library fails because "Jest encountered an unexpected token"

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

Problem using jest with storybook snapshot testing in react native

What I have
I'm trying to use jest and Storybook with Storyshots addon for snapshot test in my react-native/typescript app, but I'm having some issues when I try to run simple test.
According to Snapshot testing section in storybook documentation, the only thing you need to do is create an storybook.test.js file with the following:
storybook.test.js
import initStoryshots from '#storybook/addon-storyshots';
initStoryshots();
After this, everything is supposed to work as expected, but the console throws the following error:
● 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, ign
oring "node_modules".
Here's what you can do:
• If you are trying to use ECMAScript Mo
dules, see https://jestjs.io/docs/en/ecmascri
pt-modules for how to enable it.
• To have some of your "node_modules" fi
les transformed, you can specify a custom "tr
ansformIgnorePatterns" in your config.
• If you need a custom transformation sp
ecify a "transform" option in your config.
• If you simply want to mock your non-JS
modules (e.g. binary assets) you can stub th
em out with the "moduleNameMapper" config opt
ion.
You'll find more details and examples of
these config options in the docs:
https://jestjs.io/docs/en/configuration.h
tml
Details:
C:\Users\myuser\Desktop\myapp\node_m
odules\react-native-swipe-gestures\index.js:3
import React, { Component } from "react";
^^^^^^
SyntaxError: Cannot use import statement
outside a module
at Runtime.createScriptFromCode (node_m
odules/jest-runtime/build/index.js:1350:14)
at Object.<anonymous> (node_modules/#st
orybook/react-native/dist/preview/components/
OnDeviceUI/navigation/index.js:29:53)
Test Suites: 1 failed, 1 total
Tests: 0 total
Snapshots: 0 total
Time: 11.468 s
Ran all test suites.
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
jest.config.js
module.exports = {
preset: 'react-native',
moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node']
};
babel.config.js
module.exports = {
presets: ['module:metro-react-native-babel-preset']
};
If I remove #storybook/addon-storyshots relate things from my tests, everything is working normally without any problem. So I don't know if I need some extra configuration to make work storybook/jest snapshoot testing with react native.
It's enough. Add react-native-swipe-gestures to transformIgnorePatterns of your jest.config.js.
transformIgnorePatterns: ['node_modules/(?!(react-native|#react-navigation|#react-native|react-native-swipe-gestures)/)'],
This did a trick for me.

How to run ui testing?

I get an error when I start testing the application:
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:
...
You'll find more details and examples of these config options in the docs:
https://jestjs.io/docs/en/configuration.html
Details:
/home/mmvs/Desktop/ReactNative/node_modules/react-navigation/src/index.js:1
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){export * from '#react-navigation/core';
How to solve this error?
You need to add moduleNameMapper in package.json
look at this link : https://jestjs.io/docs/en/webpack#handling-static-assets

PrimeVue Toast Component Error: Can't resolve './ToastMessage' in */toast

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.