Vue SFC imports not working

[Elliot128]

🐛 bug report

I have a Vue SFC. In the script section, I am trying to import a module. Parcel is not importing this module. Parcel built the SFC correctly before, but when I added the import it doesn't handle that correctly.

🎛 Configuration (.babelrc, package.json, cli command)

I am not using a babelrc file currently. Just the default parcel configuration.

🤔 Expected Behavior

Parcel should bundle the imports in the sfc.

😯 Current Behavior

Parcel doesn't bundle the imports in the sfc.

💁 Possible Solution

🔦 Context

💻 Code Sample

<script>
    import { mapState, mapMutations } from 'Vuex'; 
    console.log(mapState); // undefined
</script>

🌍 Your Environment

Software	Version(s)
Parcel	1.12.3
Node
npm/Yarn
Operating System

[kwelch]

@Elliot128 why close? Is this no longer happening?

[mekhami]

@Elliot128 Why was this closed?

@kwelch did you end up figuring this out? I just tried an import in a SFC using the package root `import Foo from '~/src/foo.js' and there's an error with the resolver.

Cannot resolve dependency '~/src/foo.js' at '/home/.../frontend/src/components/~/src/foo.js'
    at Resolver.resolve (/home/.../frontend/node_modules/parcel-bundler/src/Resolver.js:71:17)

<template>
  <div class="hello">
    <p>Hello World</p>
  </div>
</template>

<script>
import Foo from '~/src/foo.js'

export default {
  name: 'HelloWorld',
}
</script>

<style scoped>
h3 {
  margin: 40px 0 0;
}
</style>

But it works with relative importing.

[Elliot128]

It was a typo in my import of vuex. I was importing "Vuex" instead of "vuex".

@mekhami, not sure what your project structure is like. Can you give a link reproducing this issue?

[mekhami]

 tree -L 3 -I node_modules
.
├── dist
│   ├── App.21d361a3.vue
│   ├── favicon.26242483.ico
│   ├── index.html
│   ├── logo.28e854b2.png
│   ├── logo.77834104.png
│   ├── main.css
│   ├── main.da4909e4.css
│   ├── main.da4909e4.js
│   ├── main.da4909e4.js.map
│   ├── main.js
│   └── main.js.map
├── package.json
├── public
│   ├── favicon.ico
│   └── index.html
├── README.md
├── src
│   ├── App.vue
│   ├── assets
│   │   └── logo.png
│   ├── components
│   │   └── HelloWorld.vue
│   ├── foo.gql
│   ├── foo.js
│   └── main.js
├── yarn-error.log
└── yarn.lock

{
  "name": "frontend",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "start": "parcel public/index.html",
    "build": "parcel build src/main.js"
  },
  "dependencies": {
    "apollo-boost": "^0.4.4",
    "graphql": "^14.5.6",
    "vue": "^2.6.10",
    "vue-apollo": "^3.0.0-rc.5",
    "vue-hot-reload-api": "^2.3.4"
  },
  "devDependencies": {
    "@vue/component-compiler-utils": "^3.0.0",
    "parcel-bundler": "^1.12.3",
    "sass": "^1.22.12",
    "vue-template-compiler": "^2.6.10"
  }
}

[Elliot128]

Hm, seems like a bug. Per the documentation I think this should work properly.

I found this issue which may be of interest: #1236