Trying to add bootstrapVue to my project has scrambled my dependencies in my webpack Vuejs project. Everything was dandy until I tried to implement this npm install and subsequent change to "webpack.config.js". Immediately everything began to fall apart. The dev server couldn't compile for various reasons, so I did 'npm uninstall style-loader css-loader'. That didn't help. Eventually I came across a solution that involved removing my changes to the "webpack.config.js" file. Cool, now I could at least run my project again.
Somewhere along the line my node_modules/babel-loader/package.json file started giving me problems. Inside, the bundleDependencies: has a value of false. VS Code is telling me it should be an array of package names. Okay, I'm not sure how I can remedy this warning, so I ignore it.
I added a new .vue component to my src/components file named 'Table.vue' to use within my main App.vue. Added my import Table from ".components/table"; line to my App.vue file. Now my dev server fails to compile for this reason: terminal error.
In this project, I've already installed: axios, vue-axios, sass-loader, node-sass, webpack, bootstrap, bootstrap-vue. I'm pretty new to all of this so any help would be greatly appreciated. Worst case scenario I just start from scratch and copy paste my code.
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'm working on a website that has gulp set up to compile scss and launch a dev server. I didn't set up the project and the person who did is unavailable to ask directly.
It worked fine previously but now when I run the gulp command in the terminal, it gives me this error:
Error in plugin "sass"
Message:
sass/projectName.styles.scss
Error: File to import not found or unreadable: breakpoint.
on line 4 of sass/projectName.styles.scss
>> #import "breakpoint";
So it seems the fairly obvious, however my attempts to fix it don't seem to make any difference.
I have changed the includedPaths to point to the breakpoint module in my node_modules folder, but what really confuses me is that even if I comment out the "#import breakpoint" line in projectName.styles.scss, it still gives me the same error message. Which makes me think gulp not reading the changes to my gulpfile, but I'm not sure why.
I'm assuming it's something simple, but as far as I'm aware gulp doesn't have a cache or need to be cleaned after changes to the gulpfile, so again, I'm not sure why it's doing this.
Here's the include paths section of my gulp file.
var sass_config = {
importer: importer,
includePaths: [
'node_modules/breakpoint-sass/stylesheets/',
'node_modules/singularitygs/stylesheets/',
'node_modules/compass-mixins/lib/',
]
};
Any insight or ideas on what I can try would be helpful.
Thanks.
OK, so I figured out the problem and thought I'd answer my own question for prosperity.
What happened was, earlier I had deleted the project repo while I still had the project open in Sublime. I did not close the project in Sublime (though I did close Sublime itself, there is a slight difference) and cloned the repo again.
When I went to started working on it today, I continued in the window which was open in Sublime.
I'm not an expert in how the text editor works but I guess there was a copy or reference to the deleted project repo files in memory or something, so the files I was editing, i.e gulpfile.js, weren't actually the files I was interacting with in the terminal using gulp.
I figured it out when I did git status and the files I was editing were unchanged. Closing the project window and opening the project in Sublime again solved my problem.
So a bit of a silly mistake on my part, but at least we learned something ae!
I have a PHP project that uses Kirby CMS. I also use Gulp for building my assets. Now, I need to add a calculator on the homepage that is complex enough to justify the usage of Vue. How would I incorporate Vue in my project without introducing a ton of new tooling? All I want is a simple Single File Component basically. I have:
<div id="calculator"></div>
and I want the component to be rendered there. Nothing more.
After some consideration, I came up with the following options but found issues with each of them:
Use the Vue CLI for instant prototyping. That's the closest solution for my use case, but I can't easily develop the component. If I use vue serve, I get to see the component isolated in a new page. The issue lies in the fact the component isn't a part of my project's page. It's not affected by its stylesheets, layout, and other scripts. I can't know if it'll work properly once I build it and view it in my project. Running vue build on each change would be pretty painful and time consuming. Sadly, vue watch isn't a thing, which leads me to:
Creating a project and using Vue CLI Service. If I create a project, I'd be able to run vue-cli-service build --watch and have my component automatically refresh on each change of its source file. While developing the component, I simply make a change, wait for it to compile, and refresh my project in the browser to see the modified component in action. While that would work, it introduces a bunch of node_modules inside my project, along with a package.json. I feel that's too much for just a single component. It would pollute the project more than I'd like:
assets/
js/
build/
calculator/
dist/
node_modules/ # modules here
public/ # I don't need that
package.json # package here
package-lock.json
App.vue
scripts/
main.js
content/
site/
node_modules/ # modules here as well
panel/
package.json # package here as well
package-lock.json
index.php
I would basically have a project within a project.
Use vueify to compile the component with Browserify and Gulp (which I already use). While this appears OK, vueify is deprecated and not supported. Besides, I'd have to add a bunch of stuff to my gulpfile.js in order to use Babel + ESLint for the component.
How do I set up Vue in such a way that I'm able to develop a very simple component as a part of a larger project with as little friction as possible?
If anyone has dealt with a similar problem, how did they solve it?
I ended up using the second approach I mentioned in my question with one small twist - I initialized the Vue project in my main project. I merged them.
I opened the parent folder of my project in a terminal.
I ran vue create my-project where my-project was the actual folder name of my project. The CLI asked if it should overwrite the project or merge it. I chose merge.
After the project was created, my old package.json was overwritten and only had the Vue dependencies listed in it.
I reverted my old package.json and installed these packages: #vue/cli-plugin-babel, #vue/cli-service, vue-template-compiler, and vue.
I added the following npm script in my package.json:
"scripts": {
"calculator": "vue-cli-service build assets/js/calculator/main.js --watch --dest assets/js/calculator/build"
}
Result
My project's folder structure remained the same, except for a few new packages in node_modules. I put my component files in assets/js/calculator/. There, I have main.js which is the main component script, and build which is a folder containing the processed component.
I have:
<div id="calculator"></div>
in my page, and:
<script src="/assets/js/calculator/build/app.js"></script>
in the footer. When I open the page, the component is rendered correctly.
To modify the component, I simply run npm run calculator in a terminal, which spins up the CLI service. It monitors the main.js file and builds the component on each change. Once the build is complete (which happens in under a second), I refresh the page and the updated component is there.
Conclusion
I believe that's the smoothest way to handle this use case. It didn't bloat the project, all dependencies were listed, and the development experience is great. The part where my package.json got overwritten was a bit concerning, but other than that - it worked perfectly. If there's a better way to do this, please leave an answer!
This is probably not the answer you're looking for but if I were you I'd look into inline templates and x-templates as they seem well suited to your use case.
Also have a look at this blog post. It offers a nice write up about the different template authoring methods in Vue and their pros/cons.
I have added dygraphs to a large, existing project which was created with create-react-app. Everything runs well, I am importing dygraphs using the common syntax:
import Dygraph from 'dygraphs';
However when I try to build my project with npm run build the ES6 bits of dygraphs cause the build to fail:
Creating an optimized production build...
Failed to compile.
Failed to minify the code from this file:
..dev/node_modules/dygraphs/src/dygraph-utils.js:325
Read more here: https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md#npm-run-build-fails-to-minify
Following the link and looking at line 325 the minifier is tripping over the ES6 => operator. Looking under node_modules/dygraphs, there are src and src-es5 directories. I renamed src to src-es6 and created a symlink:
src -> src-es5
Everything runs and builds just fine using this method but it doesnt seem like the best solution. The link provided suggests ejecting from the create-react-app rig and handling the build myself but that is not an option.
Any suggestions on a more proper way to handle this? Is there a specific way to import Dygraph from the es5 src directory instead?
I can confirm that the workaround as suggested by #danvk works fine.
All you need to do is go to package.json at location - node_modules/dygraphs/package.json and change module value from index to index.es5 and the build works just fine.
It's a bit of a hack, till the time this gets resolved. There is already a ticket opened for this
I am trying to use select2 version 4.0 in an ampersand-js app - as such that means I am using npm and browserify.
Unfortunately I cannot get select2 to load up.
the js file is being loaded up without error, since I can add a few console.log statements in relevant places and see them output,
but when I try to use select2 I'm getting told it's not defined.
Uncaught TypeError: $(...).select2 is not a function
Here's what I'm trying to do.
var $ = require('jquery');
require('Select2');
$('select').select2();
I have a feeling the issue comes from this line in the select2.js https://github.com/select2/select2/blob/4.0.0/dist/js/select2.js#L14
Specifically that it calls factory(require('jquery')); hence I believe that select2 is loading into a copy of jQuery that is then thrown away?
I found this issue which sounds like it's about the same thing, except I cannot get it to work either: npm browserify version of jquery-select2 version 4.x
So my train of thought was almost correct - it was loading select2 onto the wrong copy of jQuery.
There was two versions of jQuery being loaded.
In my package.json I had listed jQuery as a dependancy, however I wa also loading in the bower version of jQuery via the browser: {"jquery: "./bower_components/.../jquery.js"} key.
It seems that anything outside of the node_modules directory likely uses the "browser" defined module, whereas anything inside the node_modules directory will use the npm loaded module.
Basically, if something similar happens double check that you're not loading in two copies of libraryX.