I've been working on an npm repo; creating Vue-isolated components and publishing them as npm packages. Therefore there isn't a global App, so each package will have its own configuration (package.json, vite.config, etc). I was trying to create a Histoire folder where I can add my packages, but I'm getting errors all the time. I guess I'm not doing the proper config.?
I'm not sure how to make it work. I will appreciate some help here.
I made a reproduction of the error on Stack Blitz, you need to
npm run story:dev
https://stackblitz.com/edit/vitejs-vite-9ebma3?file=histoire/histoire.config.js
Thanks!
Related
I'm trying to use the new Blazor Javascript isolation feature. I'm importing my own JS file as per the example ExampleJsInterop.cs. It works until I try to import an NPM module from within my script. In my package.json I have set up a dependency on interactjs, and in my script I have added import interact from 'interactjs'; at the top.
I'm getting a Failed to resolve module specifier "interactjs" error. I'm not sure how to get past that.
Previously I was using Webpack to bundle my script and dependencies together into a single file that is added into my index.html as a tag. This was working fine, but I'm not sure how to continue using NPM packages with JS isolation.
Thanks!
A bit late, but I've just finished solving a similar issue.
The npm files are installed to the hidden node_modules folder. This isn't available to your script when you are running your app, unless you do something to make it available. however, even if you copied the interactjs file into your scripts folder it would still not work if it was an npm file. Those are meant to run in nodejs not a browser. So you would still need to use your bundler. I tried webpack, but had some issues with certain files so ended up with snowpack instead. I just finished a bunch of articles on javascript interop - part 4 deals with npm
I forgot that I left this question open for almost a year!
I ended up solving it using Snowpack to bundle the NPM package into the Blazor wwwroot folder. Credit goes to this article for pointing me in the right direction: https://nbarraud.github.io/js-in-blazor.html
I am using Vue 2 (doesn't really matter which version exactly).
I want to test some things that happen behind the hood in Vue. So I decided to add console.log('test123') in Vue's files in node_modules. It turns out that the console log never fires. I put that in all files of Vue in node_modules, even in all files of dist's folder of Vue.
How can I achieve this ? If I fork the repo, then I'd have to upload new versions each time on my repo and then run npm install. I know that will work but wanted to achieve this without forking.
Any ideas what I am missing ?
there are many ways .. but i feel more comfortable using this method :
you can download any npm package in a seperated folder next to your project...
open the folder of the package then run this in the terminal:
npm link
then open the project folder and run
npm link ../package-path # link the dir of your dependency
References
npm-link
How to test an npm package locally
In my app, I have these dependencies:
TypeORM
typeorm-linq-repository AS A LOCAL INSTALL ("typeorm-linq-repository": "file:../../../IRCraziestTaxi/typeorm-linq-repository"), who has a dev dependency AND a peer dependency of TypeORM
The reason I use a "file:" installation of typeorm-linq-repository is that I am the developer and test changes in this app prior to pushing releases to npm.
I was previously using node ~6.10 (npm ~4), so when I used the "file:" installation, it just copied the published files over, which is what I want.
However, after upgrading to node 8.11.3 (npm 5.6.0), it now links the folder rather than copying the published files.
Note, if it matters, that my environment is Windows.
The problem is this: since both my app and the linked typeorm-linq-repository have TypeORM in their own node_modules folders, TypeORM is being treated as a separate "instance" of the module in each app.
Therefore, after creating a connection in the main app, when the code that accesses the connection in typeorm-linq-repository is reached, it throws an error of Connection "default" was not found..
I have searched tirelessly for a solution to this. I have tried --preserve-symlinks, but that does not work.
The only way for me to make this work right now is to manually create the folder in my app's node_modules and copy applicable files over, which is a huge pain.
How can I either tell npm to NOT symlink the "file:" installation or get it to use the same instance of the TypeORM module?
I made it work pretty easily, although I feel like it's kind of a band-aid. I will post the answer here to help anybody else who may be having this issue, but if anybody has a more proper solution, feel free to answer and I will accept.
The trick was to link my app's installation of TypeORM to the TypeORM folder in my other linked dependency's node_modules folder.
...,
"typeorm": "file:../../../IRCraziestTaxi/typeorm-linq-repository/node_modules/typeorm",
"typeorm-linq-repository": "file:../../../IRCraziestTaxi/typeorm-linq-repository",
...
Is there a way to remove plugins and its configuration with vue-cli3 in an existing project? For example I want to replace unit test plugin Mocha with Jest. I know how to add and invoke a new plugin but I cannot find how to remove one. Is it possible with vue-cli or do I need to do it manually?
I've asked about this (How does one uninstall a plugin? #2540) and it appears the current official advice is to issue an npm uninstall X.
I think you can just go to your package.json and remove the entry for the plugin/package,
delete the directory of your node_modules,
and then run.
npm install
Delete the vuetify stuff[1] from your package.json and then run:
npm prune
[1] Dependency vuetify and dev dependencies vue-cli-plugin-vuetify, vuetify-loader...
It looks like you need to do it manually, I cannot find anything in the docs or CLI help that mentions removal of plugins. It is slightly more complicated than #alexandre-canijo says though. Besides the package.json there may be some config in your project folder. Check the src/plugins folder, and main.js.
The documentation
You have to do it manually. It worked for me.
In my case, I just removed the plugin ("vue-cli-plugin-quasar": "^2.0.1",) from devDependencies in package.json and ran npm install.
With the new "vue ui" option, removing installed cli-plugins is supported now.
Under "Dependencies" (second tab on the left of vue ui) you'll find all plugins listed. And on the right of each plugin there is a little trash icon, which removes the respective plugin.
You still might get compile errors due to dead references in your sources, but those can be identified quickly with the provided log and error messages.
Can anyone experienced with Webpack/npm components take a loot at: https://github.com/appcomponents/material-components/issues/4 ?
Basically - it is giving error Uncaught Error: Cannot find module "./components" when using this package with npm inside webpack project.
Simple for someone with knowledge but totally blocking for someone totally not into components/webpack.
It's some simple issue with path configuration which is making it impossible to use this really nice package.
I have copied my comment from the GitHub issue as this should have as much visibility as possible.
The issue is with the webpack.config.js. It's not resolving modules correctly.
I've created a pull request (#8) to resolve this issue. You can use that repo commit in the meantime, or you can modify the webpack.config.js file manually in node_modules/vue-material-components/. I've tested this with a known working Vue.js webpack config.