Hi! We are experiencing the very same issue - curious if you were able to resolve it?
LaravelMix + Vue + Jest -> SyntaxError: Cannot use import statement outside a module
I've got a Laravel Project set up with Vue3 and Jest as a test runner. Jest is setup with vue3-jest and babel-jest and I can run test and assertions. That is until... I have a problem whenever Jest runs into an import statement of a module that is an external Vue plugin it throws a "SyntaxError: Cannot use import statement outside a module" error.
The Jest configuration is within package.json where I have a "transformIgnorePatterns" array with regular expressions representing folders in the node_modules directory that are supposed to be transformed by Babel to plain javascript code.
I know that Babel is working because if I delete .babelrc , I get the "SyntaxError: Cannot use import statement outside a module" error for my own import statements within my .vue files. So that shows me that Babel is transforming my files to plain javascript.
So, it looks like I have a problem with Babel , which possibly may be due to my limited knowledge of how Babel is being used by Laravel Mix. For some reason the exceptions expressed in "transformIgnorePatterns" are not picked up by Babel.
So for example I'm using the Vueform slider plugin (https://github.com/vueform/slider) in some of my .vue files. I import it like so:
import SomeSlider from "@vueform/slider";
Vue compiles the code without any errors. But not Jest!.
VueForm slider is located in /node_modules/@vueform/slider, so in my jest config I have
"transformIgnorePatterns": [
"node_modules/(?!(@vueform/slider)/)",
],
my .babelrc.json file:
{
"presets": [
["@babel/preset-env"]
]
}
Any idea how I can get Babel to transform the Vue plugins to plain javascript for Jest?
Please or to participate in this conversation.