Vue-cli: Does not work with npm link

[apertureless]

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 :v:

[yyx990803]

This is not really a Vue CLI issue. In your project you have specified module field to point to dist/vue-breakpoints.js, however, that file is a umd build, not an ES module build. When webpack detects the module field, it will resolve exports of your package using ESM mode and that will not work with a UMD build.

Put it another way: because your package does not actually have an ESM build, you should not be using module or esnext:main fields in your package.json.

[apertureless]

Hi @yyx990803

thanks for the fast answer.
That does indeed make sense.

However is does not explain why it works if I install the package over npm. It should throw the same error, but then it works fine.

Removing the module and js:next fields also did not solved the problem.

I also tried it with another package vue-observeable where I used rollup and have different builds. Including a commonjs, esm and umd build.

 warning  in ./src/components/HelloWorld.vue?vue&type=script&lang=js

"export 'intersect' was not found in 'vue-observable'

If this is more webpack 4 related I can move the issue over there.

[yyx990803]

vue-observable has the browser field which takes higher priority than the module field...

[Haixiang6123]

@apertureless

Simple solution

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

   - 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.

[Fundebug]

@Haixiang6123 Simple but great idea.

[jdvivar]

I solved it with a very simple operation and I hope this message is useful for someone else.
I used npm link because I wanted to locally check a public package. Just npm run build inside the package's folder to build the package and then linking it worked for me.

[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