Does not work with npm link

Version

3.0.0-beta.15

Reproduction link

https://github.com/apertureless/vue-breakpoints

Steps to reproduce

1. Check out the vue-breakpoints repo (as an example, happens with other packages, too)
2. Create a new vue-cli@3 project with vue create
3. Run npm install & npm run build && npm run link inside the vue-breakpoints repo
4. Inside the newly created vue-cli@3 project run npm link vue-breakpoints
5. import {hideAt} from ‘vue-breakpoints’ and use it.

What is expected?

That locally linked npm packeges are working.

What is actually happening?

It throws an error:

"export 'hideAt' was not found in 'vue-breakpoints'

Before that it also throws some errors regarding missing eslint packages that are installed in the vue-breakpoints repo but somehow the dependencies are not found.

In packages without named exports it throws

"export 'default' (imported as 'VueCookie') was not found in 'vue-cookie-law'

---

The output in vue-breakpoints is a umd module and should work everywhere. This also only happens with local linked packages. If I install it over npm it works fine. However I am often using npm link to test new pacakges or versions before releasing to npm.

This happens with various packages not only vue-breakpoints And this only happens with projects created with vue create. The old vue init webpack projects are not affected by this. And the linking works fine.

If you need any more info, let me know ✌️

[choui666]

I got this problem too and config webpack resolve.symlinks to false; then it worked for me; vue.config.js

  configureWebpack: {
        resolve: {
            symlinks:false // 使用npm link
        },
    }

i think this is the reason

[haixiangyan]

@apertureless

Simple solution

Build your npm package project(Let’s say A) with yarn run build.

-dist
   - xxx.min.js
   - ...

Put this folder under /node_modules in your Project B that is using Project A. In your project B, you can use

import '/node_modules/dist/xxx.min.js'

to import Project A. Then you can test your npm package.

Why

The error message you get is because you are using import and module.exports at the same time. You may say: I didn’t do that. That’s correct too.

I guess the reason is that before you import it, Webpack will compile those files under node_modules first.

You use npm link which means you make a soft link to your package in the disk, and that also means you are importing files outside of node_modules. Similarly, if you place /dist files under Project B /src dir, you are importing files outside of node_modules too. That means “you are using import and module.exports at the same time.”

When you download it from npm, the files are actually placed under node_modules, so it will first compile to ES6 before you import it.

The explanation I came out is based on what I test with my npm package. I am not sure it’s correct, but it will work at the end.