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 ...
Related
I'm evaluating Snowpack for building my JavaScript project. However, VSCode and the Debugger for Chrome extension cannot match the scripts on the dev server to the local source files. Because of this, breakpoints don't work. I'm not using any source maps because I'm not bundling/transforming anything, just using vanilla ES modules.
I'm using the following template: https://github.com/snowpackjs/snowpack/tree/main/create-snowpack-app/app-template-lit-element
A simplified directory layout of the project is:
public/
index.html
src/
index.js
Now when I start the Snowpack dev server it serves the files using the following layout, which is quite different:
index.html
dist/
index.js
I tried the following launch configuration in VSCode, but it does not work, i.e., it cannot match the javascript files:
{
"name": "Launch localhost",
"type": "chrome",
"request": "launch",
"url": "http://localhost:8080/",
"webRoot": "${workspaceFolder}/public",
"pathMapping": {
"/dist": "${workspaceFolder}/src"
}
}
The pathMapping property has very scant documentation, and I'm wondering whether it's working at all.
Any ideas?
Update:
The lit-element example seems to use babel for transpiling, but even with transpiling disabled the problem persists. This is more a VSCode problem, not a Snowpack problem.
To create an output you would like to have please configure mount option for snowpack config, experiment with this config to get the result you need.
mount: {
public: '/',
src: '/src',
},
This is my github
When I npm run dev
This error will happen,but it doesn't influence my project
Although everything is ok，I want to solve this error
fuhaodeMacBook-Pro:learnRedux fuhao$ npm run dev
learnRedux#1.0.0 dev /Users/fuhao/Workspace/fuhao/learnRedux
node server.js
Listening at http://localhost:8010
webpack building...
Error: Files glob patterns specified did not match any files
webpack built 955aef52aa91434f6ef1 in 2670ms
In my case I got same error:
It was caused because there were no scss or css files in the /src folder and my webpack config contains such settings for stylelint loader:
new StyleLintPlugin({
configFile: './stylelint.json',
context: "./src",
files: "**/*.scss"
})
I didn't find any solution for that error as it didn't affect my build at all.
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
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.
I would like to use the the node-bencoding package with my current RequireJS project setup, but I have been unable to get it configured.
I have followed these instructions and have ran:
npm install requirejs
npm install node-bencoding
Then in my app.js file I had changed it:
var requirejs = require('requirejs');
// Place third party dependencies in the lib folder
//
// Configure loading modules from the lib directory,
// except 'app' ones,
requirejs.config({
nodeRequire: require,
"baseUrl": "assets/js/lib",
"paths": {
"app": "../app",
"jquery": "https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min",
"angularjs": "https://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min"
},
});
However when I load the page I get the error:
Error: Module name "requirejs" has not been loaded yet for context: _. Use require([]) http://requirejs.org/docs/errors.html#notloaded
I'm not exactly sure where I should have my node_modules directory. My directory structure is as follows: all my JS files are contained within src/assets/js - there is assets/js/app and assets/js/lib as is the RequireJS convention. Currently I have put my node_modules directory in src/.
Looks like you are trying to use it in a browser. And your application is not server side JavaScript, so RequireJS usage sample in a Node does not apply. In this case you would like to use node only to optimize your scripts.
I recently blogged about Understanding AMD & RequireJS, it might be useful.