Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Does not work with npm link #1494

Closed
apertureless opened this issue Jun 7, 2018 · 7 comments

Comments

Projects
None yet
6 participants
@apertureless
Copy link

commented Jun 7, 2018

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 ✌️

@yyx990803 yyx990803 closed this Jun 7, 2018

@yyx990803 yyx990803 reopened this Jun 7, 2018

@yyx990803

This comment has been minimized.

Copy link
Member

commented Jun 7, 2018

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.

@yyx990803 yyx990803 closed this Jun 7, 2018

@apertureless

This comment has been minimized.

Copy link
Author

commented Jun 7, 2018

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.

bildschirmfoto 2018-06-07 um 16 15 57

 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

This comment has been minimized.

Copy link
Member

commented Jun 7, 2018

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

@Haixiang6123

This comment has been minimized.

Copy link

commented Jan 19, 2019

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

@Fundebug

This comment has been minimized.

Copy link

commented Feb 22, 2019

@Haixiang6123 Simple but great idea.

@jdvivar

This comment has been minimized.

Copy link

commented May 8, 2019

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

This comment has been minimized.

Copy link

commented Jun 3, 2019

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.