We Keep Coding

Can't load a module with custom loader in vue-cli project

I have a project where Webpack 4.43.0 is set up with vue-cli. I'm trying to use
image-size-loader to get image size at build time.
For that, in one of my .vue files I'm trying to load the module using the custom loader I have installed in the project:
const background = require("image-size!../../../../assets/images/candy.jpg");
When my project builds, it outputs the following error:
ERROR Failed to compile with 1 errors8:47:03 AM
This dependency was not found:
* image-size!../../../../assets/images/candy.jpg in ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib??vue-loader-options!./src/vue/guides/tags/hero/TagGroupInvite.vue?vue&type=script&lang=js&
To install it, you can run: npm install --save image-size!../../../../assets/images/candy.jpg
The file is present and js/ts/css files resolve fine. What can be wrong with my setup?

I think you have to specify image-size as a loader too.
Append this loader to webpack.base.conf.js
...
loaders: [
...
{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
loader: 'image-size'
}
...
]
...

Using webpack and babel with files from parent project directory

I have a project set up like this and I'm trying to require file-a.js from file-b.js.
project-name/
node_modules/
src/
file-a.js
tools/
tool-name/
node_modules/
src/
file-b.js
webpack.config.js
package.json
package.json
My webpack 1.13.0 configuration was working until I added babel-loader 6.2.4 with babel-preset-es2015 6.6.0. Then I started getting error messages.
ERROR in /home/dan/dev/dan/project-name/src/file-a.js
Module build failed: Error: Couldn't find preset "es2015" relative to directory "/home/dan/dev/dan/project-name/src"
Now I have a hunch that this is happening because it's looking for babel-preset-es2015 in the upper package.json. I can make this error go away by installing it at that level, but then I get a similar message about the babel module not being there.
I've tried all sorts of things, symlinked the upper src directory into the inner project, used resolve.root and resolve.alias to try and manually resolve the folder without the nested path. Used context to set the project root as the outer folder, but it still picked up the wrong node_modules.
How can I force webpack to use the correct node_modules folder?

By default webpack looks in ./node_modules, ../node_modules, and ../../node_modules.
To force it to only use a specific directory, you can set an absolute path for the module modulesDirectories property in the resolve section:
module.exports = {
// ...
resolve: {
modulesDirectories: [path.join(__dirname, 'node_modules')]
}
}
More details on moduleDirectories in webpack's documentation

jspm/ES6 compile error, packages location incorrect

I'm having a difficult time getting the jspm_packages to work correctly in my jspm configuration in my packages.json. I'm writing an app in EM6 (babel engine).
I have a gulp file that places my ES6 javascript to a folder called .tmp/scripts:
gulp.task('transpile:app', ['templates'], function() {
return gulp.src('app/scripts/**/*.js')
.pipe($.babel({ sourceMap: true }))
.pipe(gulp.dest('.tmp/scripts'));
});
And then a bundle task that is supposed to convert the files in .tmp into a folder called dist:
// Bundle javascripts
gulp.task('bundle:app', function() {
return gulp.src('')
.pipe($.shell('jspm bundle-sfx app dist/scripts/app.js --minify --skip-source-maps'));
});
This is where is fails.
Running jspm bundle-sfx app dist/scripts/app.js --minify --skip-source-maps' prompts this error:
warn jspm_packages must be specified in the package.json within the baseURL for paths to resolve correctly.
Building the single-file sfx bundle for app...
err Error: ENOENT, open '/Users/connorblack/git/**********/jspm_packages/github/marionettejs/backbone.marionette#2.4.2.js'
at Error (native)
The odd thing is that this file path for jspm_packages is looking two directories above where it should be, thus prompting the ENOENT error.
I dove a little into the docs, and found that you can set a "packages" attribute in your package.json, which is what I have done, and this is what my current file looks like:
...
"jspm": {
"directories": {
"baseURL": ".tmp/scripts",
"lib": "app",
"packages": "jspm_packages"
},
...
I've tried multiple variations, but they all end up with a similar error. Prefixing ../../ steps further up my file system, but since the command is already looking two directories above, this doesn't help.
As you would expect, removing the attribute entirely from my package.json removes the warning and changes the ENOENT:
Building the single-file sfx bundle for app...
err Error: ENOENT, open '/Users/connorblack/git/********/*********/skeleton/.tmp/scripts/jspm_packages/github/marionettejs/backbone.marionette#2.4.2.js'
at Error (native)
where it now appears to be looking for the jspm_packages folder below my baseURL (.tmp/scripts), which is where my gulp process places my app's scripts before converting from ES6 to normal JS.
I'm at my wit's end here. I can't seem to get the jspm process to correctly find the jspm_packages and thus I can't compile my app.
Any help would be greatly appreciated.

I was getting a similar problem,
when I was trying
jspm bundle app.js app/app.bundle.js
But I then changed
"jspm": {
"directories": {
"baseURL": "app",
"packages": "jspm_packages"
},
to this ..
"jspm": {
"directories": {
"baseURL": "app",
"packages": "app/jspm_packages"
},
and the bundling started to work ...

Node.js/Grunt - Can't run Grunt's watch - why?

I am trying to use the autoprefixer css post-processor. I am following a tutorial and have installed npm. Using a npm, I then installed grunt and autoprefixer inside my project root using that package.json file: https://github.com/nDmitry/grunt-autoprefixer/blob/master/package.json
Following the tutorial, I then created this Gruntfile.js inside my project root:
module.exports = function (grunt) {
grunt.initConfig({
autoprefixer: {
dist: {
files: {
'build/style.css': 'style.css'
}
}
},
watch: {
styles: {
files: ['style.css'],
tasks: ['autoprefixer']
}
}
});
grunt.loadNpmTasks('grunt-autoprefixer');
grunt.loadNpmTasks('grunt-contrib-watch');
};
After that the tutorial advises to use Grunt Watch using
./node_modules/.bin/grunt watch
Which results in
-bash: ./node_modules/.bin/grunt: No such file or directory
I also tried to navigate to the grunt folder inside my project, then it says
-bash: node_modules/grunt: is a directory
I also have a node_modules folder directly in my local user folder, but addressing that folder grunt also just tells me that its a folder.
Pleaser help me, why is this not working? I am willing to really learn grunt, but I am not even able to get started using the getting started guide...

Have you installed the grunt-cli? (npm install grunt-cli -g) What happens when you run grunt in your project root? The command you should be running is simply grunt watch, in your project root.
Edit: Your project root must also have a package.json file in which you define your development dependencies; e.g.
{
"name":"yourprojectname",
"version":"0.0.1",
"devDependencies":{
"grunt":"*",
"grunt-contrib-watch":"*",
"grunt-autoprefixer":"*"
}
}

if there is acutally a space in the executable name you need to put it in quotes
"./node_modules/.bin/grunt watch"
otherwise linux will run "./node_modules/.bin/grunt" with watch as a flag.
if that still doesn't work,
could be a few problems, either your ldconfig isn't updated, the files aren't set to executable, or the user you are trying to execute the command with doesn't have permission.
first try running "ldconfig" (just type and run it)
more info here
http://www.cyberciti.biz/tips/linux-shared-library-management.html
chmod -x the files to make them executable.
any luck?

r.js can't build because of ENOENT error...says it can't find ".bin/bower"

I'm trying to get r.js to optimize all my Require-related files but am getting an error.
My site is in a directory called "myCrazysite" and is structured like this :
(not all the files)
myCrazysite
js/
buildform.js
search.js
app.build.js
vendor/
jquery
r.js
app.build.js looks like this:
({
appDir: "../",
aseUrl: "js",
optimize: "none",
dir: "buildOut",
modules: [
{
name: ["buildform", "search"]
}
]
})
I'm going into js/ and runningnode ../r.js -o app.build.js. I've also globally installed the CLI tool with npm and run r.js -o app.build.js from same directory.
When I do either of these two things, I get the following error:
ENOENT, no such file or directory '/Users/me/Sites/myCrazysite/node_modules/.bin/bower'
at Object.fs.statSync (fs.js:684:18)
The steps I've taken are:
navigated to to the above mentioned ".bin" directory on the CLI..the
bower directory is there.
upgraded to node v0.10.18
uninstalled & reinstalled bower
uninstalled the CLI tool and run node ../r.js -o
app.build.js
globally reinstalled the CLI tool back, deleted r.js
from the site root, navigated to js/ and run r.js -o app.build.js
I'm using require v.2.1.8.

Never mind...I figured it out.
The issue was that the .bin/bower file was causing some conflict and just needed to be deleted. It was a stray shortcut file from (I think) a bower-related grunt plugin. As I wasn't using the plugin, I just used npm to uninstall it, then hard-deleted the file .bin/bower.
Moral of the story: the command line always tells you what to do...usually.