Cannot run unit tests on components with imports

[guilhermewaess]

Version

3.0.1

Node and OS info

Node 10.4.1 / npm 6.1.0 / Windows 10

Steps to reproduce

Here go my steps:

Generated new project with vue-cli 3
Selected: Vuex, Router, Scss, Airbnb, Jest

On .vue component, when you import anything there is an error.

<script>
import Anything from 'AnyPath'; <------- Generates Error

export default {
  name: 'HelloWorld',
  props: {
    msg: String,
  },
};
</script>

Without imports, everything works as expected

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String,
  },
};
</script>

What is expected?

Tests running without any problem.

What is actually happening?

FAIL tests/unit/HelloWorld.spec.js
● Test suite failed to run

TypeError [ERR_INVALID_ARG_TYPE]: The "path" argument must be of type string. Received type undefined

  at findOptionFromSource (node_modules/babel-plugin-transform-imports/index.js:22:46)
  at PluginPass.ImportDeclaration (node_modules/babel-plugin-transform-imports/index.js:85:27)
  at newFn (node_modules/@babel/traverse/lib/visitors.js:237:21)
  at NodePath._call (node_modules/@babel/traverse/lib/path/context.js:65:20)
  at NodePath.call (node_modules/@babel/traverse/lib/path/context.js:40:17)
  at NodePath.visit (node_modules/@babel/traverse/lib/path/context.js:100:12)
  at TraversalContext.visitQueue (node_modules/@babel/traverse/lib/context.js:142:16)
  at TraversalContext.visitMultiple (node_modules/@babel/traverse/lib/context.js:97:17)

[haoqunjiang]

This is weird because I can't find a babel-plugin-transform-imports in my node_modules. Could you please provide a reproduction repo?

[haoqunjiang]

Closing due to inactivity for more than 1 week. Please open a new issue with a reference to this one if you can follow up with more information.

[abhilashdonepudi]

Can we reopen this issue ?

We have the same issue. We are using Vuetify and have the following plugin. Any insight ?

"plugins": [
        [
            "transform-imports",
            {
                "vuetify": {
                    "transform": "vuetify/es5/components/${member}",
                    "preventFullImport": true
                }
            }
        ]
    ]

[onexdata]

Yes please reopen this. I have the exact same problem, and I can see from google other people are experiencing this, they just don't understand it the import statement that's causing the issue. People are getting told the same thing...

¯_(ツ)_/¯

Clearly the error here is wrong; The path is indeed a string. This cryptic error is causing suffering in the community. This thread is the most focused on the problem out there. Let's solve this please?

I'm getting an identical stack trace, but different lines and slightly different error name, I take this to mean this affects multiple versions...(?)

This has got to be a config/loader issue? It looks like Babel-plugin-transform-imports for some reason is getting passed an undefined for it's import path... is this possible through a poor config? Something only Jest would respect?

I'm using this setup:

Generated new project with vue-cli 3
Selected: Vuex, Router, Stylus, Standard, Jest

Getting almost identical error....

● Test suite failed to run

TypeError: Path must be a string. Received undefined

  at findOptionFromSource (node_modules/babel-plugin-transform-imports/index.js:22:46)
  at PluginPass.ImportDeclaration (node_modules/babel-plugin-transform-imports/index.js:85:27)
  at newFn (node_modules/@babel/traverse/lib/visitors.js:193:21)
  at NodePath._call (node_modules/@babel/traverse/lib/path/context.js:53:20)
  at NodePath.call (node_modules/@babel/traverse/lib/path/context.js:40:17)
  at NodePath.visit (node_modules/@babel/traverse/lib/path/context.js:88:12)
  at TraversalContext.visitQueue (node_modules/@babel/traverse/lib/context.js:118:16)
  at TraversalContext.visitMultiple (node_modules/@babel/traverse/lib/context.js:85:17)

[haoqunjiang]

Please open a new issue with a reference to this one if you can follow up with more information.

Please also provide a runnable reproduction repo.

[onexdata]

FOUND THE ISSUE

This is caused by babel config (.babelrc or babel.config.js in root).

In presets...

"presets": [
[
"@babel/preset-env", {
"modules": false,
}
]

... this must be set to something other than false. Setting this to "auto" or "umd" or "commonjs" all worked for me, as well as removing the "modules" entry all together (according to the Babel config docs, modules default is "auto", and setting modules to false disables modules importing(!), the exact issue we're experiencing :)

This is hard for people to track down and reproduce as well because once babel fails, it caches the fail and assumes it will always fail unless you change your source, but you're messing with babel config settings, and that for some reason does not bust the babel cache (this seems like an error), so even though you indeed remove the modules entry, Babel still fails, and people get upset saying "that didn't work", when it's because of the babel cache not also busting on it's own config change.

When debugging your babel settings, set an environment variable BABEL_DISABLE_CACHE=1 to work around this.

Windows:

"scripts": {
"test:debug": "SET NODE_ENV=test && SET BABEL_DISABLE_CACHE=1 && jest --no-cache",
}

Linux/Mac:

"scripts": {
"test:debug": "NODE_ENV=test BABEL_DISABLE_CACHE=1 jest --no-cache",
}

Now make sure you don't have "modules": false anywhere in your babel config, and disable the babel cache, and run your tests again, and viola! You get past the stupid import issue.

Why there is a setting to disable modules all together in the first place, or why people are getting configs with that set, I will never know.