jspm is not show meaningful error on the browser - jspm

I'm using jspm, so far it's not showing meaningful error when there was mistake in the code
package.json
{
"devDependencies": {
"jspm": "^0.16.19"
},
"jspm": {
"dependencies": {
"react": "npm:react#^0.14.3",
"react-dom": "npm:react-dom#^0.14.3"
},
"devDependencies": {
"babel": "npm:babel-core#^5.8.24",
"babel-runtime": "npm:babel-runtime#^5.8.24",
"core-js": "npm:core-js#^1.1.4"
}
}
}
config.js
System.config({
baseURL: "/",
defaultJSExtensions: true,
transpiler: "babel",
babelOptions: {
"optional": [
"runtime",
"optimisation.modules.system"
]
},
...
});
For example if I made some mistake in the code e.g. import xxx fro 'xxx'; or class Foo exten Bar {}, on the browser's console it only shown
Do I need some extra configurations?, please guide.
Thanks

Related

How to run the webpack 3 project in a local system?

I have a webpack project 3 and I want to run it on my local system.
Here is my webpack config file and the package.json
{
"private": true,
"name": "XXx",
"version": "Xxx",
"description": "X",
"main": "index.js",
"dependencies": {
"babel": "^6.23.0",
"css-loader": "^0.28.8",
"extract-text-webpack-plugin": "^3.0.2",
"findandreplacedomtext": "^0.4.6",
"raw-loader": "^0.5.1",
"style-loader": "^0.19.1",
"text-loader": "0.0.1"
},
"devDependencies": {
"nodemon": "^1.19.4",
"sass": "^1.58.0",
"uglifyjs-webpack-plugin": "^1.1.6",
"webpack": "^3.10.0"
},
"scripts": {
"min.js": "make min.js",
"min.css": "make min.css",
"serve": "webpack"
},
"author": "",
"license": "ISC"
}
Makefile
const UglifyJs = require('uglifyjs-webpack-plugin')
const isWatching = process.argv[2] === '-w'
const plugins = [
function() {
this.plugin('watch-run', function(watching, callback) {
console.log('Begin compile at ' + new Date())
callback()
})
}
]
if (!isWatching) {
plugins.unshift(
new UglifyJs({
extractComments: false,
sourceMap: true,
})
)
}
module.exports = {
entry: {
'bundle': './js/bundle.js'
},
devtool: isWatching ? 'source-map' : false,
output: {
path: `${__dirname}/js`,
filename: '[name].min.js',
libraryTarget: 'umd',
},
module: {
rules: [
{
test: /\.html$/,
use: {
loader: 'raw-loader',
}
},
{
test: /\.s?css$/,
use: [
{
loader: "css-loader",
options: {
url: false, // do not bundle images
},
},
{loader: "sass-loader"},
],
}
]
},
plugins,
}
There is a makefile but I dont think this is required for this problem.
I have tried
webpack -p , webpack -w , and webpack .
webpack -p is giving an error : ERROR in bundle.min.js from UglifyJs Unexpected token: punc ({) [bundle.min.js:1,976]
while webpack -w works fine I am unable to find any url for the website.
the last command runs and ends.

brunch.io conventions.ignored does not respect node_modules

I'm building an app that has multiple entry points. It's a plugin/sideloading react architecture.
I have a base react app compiling into app.js and vendor.js just fine. The issue originates with the secondary project, the theme, being bundled with some of the same dependencies. Most notably react and react-dom. I would like to be able to use conventions.ignored to instruct brunch to ignore specific node_modules and their dependencies. Regardless of the regex I put in conventions.ignored I still get react and react-dom in the theme_vendor.js bundle. See config below:
const {theme_name} = require('./package.json');
module.exports = {
sourceMaps: 'inline',
files: {
javascripts: {
joinTo: {
"theme.js": [
/^theme/,
],
"theme_vendor.js": [
/^(?!theme)/,
],
}
},
stylesheets: {
joinTo: {
'theme.css': ["theme/config/styles/index.scss"],
'theme_ie11.css': ["theme/config/styles/ie.scss"],
}
}
},
conventions: {
ignored: [
/\/_/,
"node_modules\/react",
"node_modules\/react-dom",
],
},
plugins: {
babel: {
presets: ['es2015', 'stage-0', 'react'],
plugins: [
['transform-runtime', {
polyfill: false,
regenerator: true
}]
],
},
sass: {
options: {
includePaths: [],
precision: 15
},
mode: 'native',
sourceMapEmbed: true,
debug: 'comments'
},
copycat: {
"fonts/slick-carousel": ["node_modules/slick-carousel/slick/fonts"],
"img/slick-carousel": ["node_modules/slick-carousel/slick/ajax-loader.gif"],
"": ["theme/theme_header.tmpl", "theme/theme_body.tmpl", "theme/theme_footer.tmpl"],
}
},
modules: {
nameCleaner: path => path.replace('', theme_name + '/')
},
notifications: false,
hot: false,
paths: {
public: '../',
watched: [
'theme',
'initialize.js',
]
},
overrides: {
production: {
optimize: true,
sourceMaps: false,
plugins: {
autoReload: {
enabled: false
}
},
paths: {
// public: "dist/"
}
}
}
};
The only way I have been able to achieve anything close is to use a negation in the joinTo. See Below:
javascripts: {
joinTo: {
"theme.js": [
/^theme/,
],
"theme_vendor.js": [
/^(?!theme|node_modules\/react|node_modules\/react-dom)/,
],
}
},
Other info:
"dependencies": {
"react-click-outside": "^2.2.0",
"react-image-gallery": "^0.7.15",
"react-slick": "^0.14.7",
"slick-carousel": "^1.6.0"
},
"devDependencies": {
"auto-reload-brunch": "^2",
"babel-brunch": "~6.0.0",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-preset-es2015": "^6.24.0",
"babel-preset-react": "~6.22",
"babel-preset-stage-0": "^6.22.0",
"brunch": "^2",
"clean-css-brunch": "^2",
"copycat-brunch": "^1.1.0",
"hmr-brunch": "^0.1",
"redux-devtools": "^3.3.2",
"redux-devtools-dock-monitor": "^1.1.1",
"redux-devtools-log-monitor": "^1.2.0",
"sass-brunch": "^2.10.4",
"uglify-js-brunch": "^2",
"isomorphic-fetch": "^2.2.1",
"react": "^15.4",
"react-addons-css-transition-group": "^15.4.2",
"react-dom": "^15.4",
"react-redux": "~4.3.0",
"react-router": "^3.0.2",
"react-router-redux": "^4.0.8",
"redux": "~3.2.1",
"redux-form": "^6.6.2",
"redux-logger": "^3.0.0",
"redux-saga": "^0.14.3"
}

I think you need to do this:
conventions: {
vendor: /(^bower_components|node_modules(?!\/react)|vendor)\//
}
See also the docs.
This regex will not match the two react node modules and therefore will not be included in your file.

Trying to use an async function with npm http-hash

I am trying to use http-hash module in order to construct an API for my application. I am using AVA as my test runner for my previous test. When I run the "npm test" command, I get this error in my console:
import { send } from 'micro'
^^^^^^
SyntaxError: Unexpected token import
I am using a linter and it doesn't send me any error. Here is my package.json, where you can see that I am using some babel plugins in order to transpile generators:
{
"name": "pos_lisa-api",
"version": "0.1.0",
"description": "LISA POS REST API",
"scripts": {
"lint": "standard",
"test": "npm run lint && ava"
},
"author": "Mauricio Cano Giraldo",
"license": "MIT",
"devDependencies": {
"ava": "^0.18.1",
"babel-eslint": "^7.1.1",
"babel-register": "^6.23.0",
"standard": "^8.6.0",
"test-listen": "^1.0.1"
},
"dependencies": {
"babel-plugin-transform-async-to-generator": "^6.22.0",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-preset-es2015": "^6.22.0",
"babel-runtime": "^6.22.0",
"http-hash": "^2.0.0",
"micro": "^7.0.6",
"request": "^2.79.0",
"request-promise": "^4.1.1",
"uuid-base62": "^0.1.0"
},
"standard": {
"parser": "babel-eslint"
},
"babel": {
"presets": [
"es2015"
],
"plugins": [
"transform-runtime",
"transform-async-to-generator"
]
}
}
And here is my node file, where i get the error:
'use strict'
import { send } from 'micro'
import httpHash from 'http-hash'
const hash = httpHash()
hash.set('GET /:id', async function getCliente (req, res, params) {
send(res, 200, params)
})
export default async function main (req, res) {
let method = req.method
let url = req.url
let match = hash.get(`${method.toUpperCase()} ${url}`)
if (match.handler) {
try {
await match.handler(req, res, match.params)
} catch (e) {
send(res, 500, { error: e.message })
}
} else {
send(res, 404, { error: 'La ruta no fue encontrada' })
}
}
I am reading around the web and I don't find anything. Please, help me! I would appreciate it so much!

AVA only transpiles the test files you want to run, but not the modules you're importing in them. But you can tell AVA to also transpile the imported modules by requiring babel-register (https://github.com/avajs/ava#transpiling-imported-modules). And because you configured babel already you can also tell it to use your config. Add this to your package.json
"ava": {
"babel": "inherit",
"require": ["babel-register"]
}
If you'd like to use the babel config AVA uses, you can leave off the "babel": "inherit", or you can define an entirely different one if you wish. But usually it's best to just inherit your config.

Using a .babelrc instead may work.

grunt-sass does not compile bootstrap-sass

I try to compile boostrap-sass using pure nodejs and grunt. So, no ruby, ruby on rails or gem.
My package.json:
{
"name": "myProject",
"version": "1.0.0",
"dependencies": {
"grunt": "^1.0.1",
"grunt-bootlint": "^0.10.1",
"grunt-cli": "^1.2.0",
"grunt-contrib-compress": "^1.3.0",
"grunt-contrib-concat": "^1.0.1",
"grunt-contrib-cssmin": "^1.0.2",
"grunt-contrib-uglify": "^2.0.0",
"grunt-sass-lint": "^0.2.0",
"grunt-contrib-jshint": "^1.0.0"
},
"devDependencies": {
"bootstrap-sass": "^3.3.7",
"grunt-sass": "^1.2.1",
"node-sass": "^3.10.1",
"typescript": "^2.0.6",
"typings": "^1.5.0"
}
}
My Gruntfile.js:
module.exports = function (grunt)
{
grunt.loadNpmTasks("grunt-sass");
grunt.loadNpmTasks("grunt-sass-lint");
grunt.loadNpmTasks("grunt-bootlint");
grunt.loadNpmTasks("grunt-contrib-jshint");
var relaxerrors = [
"App/Mvc/views/notallowed.phtml",
"App/Mvc/views/ajax/*.phtml",
"App/Mvc/views/backend/*.phtml"
];
grunt.initConfig({
sass: {
options: {
includePaths: ["node_modules/bootstrap-sass/assets/stylesheets/bootstrap"],
precision: 10,
sourcemap: "inline",
trace: true,
unixNewlines: true
},
dist: {
files: {
"web/assets/styles/frontend.min.css": "assets/styles/index.scss",
"web/assets/styles/backend.min.css": "assets/styles/dashboard.scss",
"web/assets/styles/bootstrap.min.css": "node_modules/bootstrap-sass/assets/stylesheets/_bootstrap.scss"
}
}
},
sasslint: {
target: [ "assets/styles/*.scss" ]
},
jshint: {
files: [ "assets/js/*.js" ],
options: {
globals: {
jquery: true
}
}
},
bootlint: {
options: {
stoponerror: true,
showallerrors: true,
stoponwarning: false,
relaxerror: {
"E001": relaxerrors,
"W001": relaxerrors,
"W002": relaxerrors,
"W003": relaxerrors,
"W005": relaxerrors
}
},
files: [ "App/Mvc/views/*.phtml", "App/Mvc/views/*.html" ]
}
}
);
grunt.registerTask("validate:styles", [ "sasslint" ]);
grunt.registerTask("validate:js", [ "jshint" ]);
grunt.registerTask("validate:bootstrap", [ "bootlint" ]);
grunt.registerTask("validate:all", [ "validate:bootstrap", "validate:styles", "validate:js" ]);
grunt.registerTask("build:styles", [ "validate:styles", "sass" ]);
};
And I am calling it with:
grunt build:styles --force --verbose
That shows me the following output:
Running "sass" task
Running "sass:dist" (sass) task
Verifying property sass.dist exists in config...OK
Files: assets/styles/index.scss -> web/assets/styles/frontend.min.css
Files: assets/styles/dashboard.scss -> web/assets/styles/backend.min.css
Files: node_modules/bootstrap-sass/assets/stylesheets/_bootstrap.scss -> web/assets/styles/bootstrap.min.css
Options: precision=10, includePaths=["node_modules/bootstrap-sass/assets/stylesheets/bootstrap"], sourcemap="inline", trace, unixNewlines
Options: precision=10, includePaths=["node_modules/bootstrap-sass/assets/stylesheets/bootstrap"], sourcemap="inline", trace, unixNewlines
Options: precision=10, includePaths=["node_modules/bootstrap-sass/assets/stylesheets/bootstrap"], sourcemap="inline", trace, unixNewlines
Writing web/assets/styles/backend.min.css...OK
Writing web/assets/styles/frontend.min.css...OK
Done.
As we can see, it just stops working when it comes to bootstrap. Any help would be great.

Sass compiler will not compile any files that starts with _, by having _ that tells it to ignore it.
You can refer to it in http://sass-lang.com/guide under partials section.

How to avoid adding the dependencies to config.js when installing JSPM plugins?

When I install the css plugin, using the following command:
jspm install css
The following is added to my config.js:
System.config({
"map": {
"css": "github:systemjs/plugin-css#0.1.6",
"github:jspm/nodelibs-assert#0.1.0": {
"assert": "npm:assert#1.3.0"
},
"github:jspm/nodelibs-buffer#0.1.0": {
"buffer": "npm:buffer#3.0.3"
},
"github:jspm/nodelibs-events#0.1.0": {
"events-browserify": "npm:events-browserify#0.0.1"
},
"github:jspm/nodelibs-http#1.7.0": {
"Base64": "npm:Base64#0.2.1",
"events": "github:jspm/nodelibs-events#0.1.0",
"inherits": "npm:inherits#2.0.1",
"stream": "github:jspm/nodelibs-stream#0.1.0",
"url": "github:jspm/nodelibs-url#0.1.0",
"util": "github:jspm/nodelibs-util#0.1.0"
},
"github:jspm/nodelibs-https#0.1.0": {
"https-browserify": "npm:https-browserify#0.0.0"
},
"github:jspm/nodelibs-os#0.1.0": {
"os-browserify": "npm:os-browserify#0.1.2"
},
"github:jspm/nodelibs-path#0.1.0": {
"path-browserify": "npm:path-browserify#0.0.0"
},
"github:jspm/nodelibs-process#0.1.1": {
"process": "npm:process#0.10.1"
},
"github:jspm/nodelibs-stream#0.1.0": {
"stream-browserify": "npm:stream-browserify#1.0.0"
},
"github:jspm/nodelibs-url#0.1.0": {
"url": "npm:url#0.10.3"
},
"github:jspm/nodelibs-util#0.1.0": {
"util": "npm:util#0.10.3"
},
"github:systemjs/plugin-css#0.1.6": {
"clean-css": "npm:clean-css#3.0.10",
"fs": "github:jspm/nodelibs-fs#0.1.1",
"path": "github:jspm/nodelibs-path#0.1.0"
},
"npm:amdefine#0.1.0": {
"fs": "github:jspm/nodelibs-fs#0.1.1",
"module": "github:jspm/nodelibs-module#0.1.0",
"path": "github:jspm/nodelibs-path#0.1.0",
"process": "github:jspm/nodelibs-process#0.1.1"
},
"npm:assert#1.3.0": {
"util": "npm:util#0.10.3"
},
"npm:buffer#3.0.3": {
"base64-js": "npm:base64-js#0.0.8",
"ieee754": "npm:ieee754#1.1.4",
"is-array": "npm:is-array#1.0.1"
},
"npm:clean-css#3.0.10": {
"buffer": "github:jspm/nodelibs-buffer#0.1.0",
"commander": "npm:commander#2.5.1",
"fs": "github:jspm/nodelibs-fs#0.1.1",
"http": "github:jspm/nodelibs-http#1.7.0",
"https": "github:jspm/nodelibs-https#0.1.0",
"os": "github:jspm/nodelibs-os#0.1.0",
"path": "github:jspm/nodelibs-path#0.1.0",
"process": "github:jspm/nodelibs-process#0.1.1",
"source-map": "npm:source-map#0.1.43",
"url": "github:jspm/nodelibs-url#0.1.0",
"util": "github:jspm/nodelibs-util#0.1.0"
},
"npm:commander#2.5.1": {
"child_process": "github:jspm/nodelibs-child_process#0.1.0",
"events": "github:jspm/nodelibs-events#0.1.0",
"path": "github:jspm/nodelibs-path#0.1.0",
"process": "github:jspm/nodelibs-process#0.1.1"
},
"npm:core-util-is#1.0.1": {
"buffer": "github:jspm/nodelibs-buffer#0.1.0"
},
"npm:events-browserify#0.0.1": {
"process": "github:jspm/nodelibs-process#0.1.1"
},
"npm:https-browserify#0.0.0": {
"http": "github:jspm/nodelibs-http#1.7.0"
},
"npm:inherits#2.0.1": {
"util": "github:jspm/nodelibs-util#0.1.0"
},
"npm:os-browserify#0.1.2": {
"os": "github:jspm/nodelibs-os#0.1.0"
},
"npm:path-browserify#0.0.0": {
"process": "github:jspm/nodelibs-process#0.1.1"
},
"npm:punycode#1.3.2": {
"process": "github:jspm/nodelibs-process#0.1.1"
},
"npm:readable-stream#1.1.13": {
"buffer": "github:jspm/nodelibs-buffer#0.1.0",
"core-util-is": "npm:core-util-is#1.0.1",
"events": "github:jspm/nodelibs-events#0.1.0",
"inherits": "npm:inherits#2.0.1",
"isarray": "npm:isarray#0.0.1",
"process": "github:jspm/nodelibs-process#0.1.1",
"stream": "npm:stream-browserify#1.0.0",
"string_decoder": "npm:string_decoder#0.10.31",
"util": "github:jspm/nodelibs-util#0.1.0"
},
"npm:source-map#0.1.43": {
"amdefine": "npm:amdefine#0.1.0",
"fs": "github:jspm/nodelibs-fs#0.1.1",
"path": "github:jspm/nodelibs-path#0.1.0",
"process": "github:jspm/nodelibs-process#0.1.1"
},
"npm:stream-browserify#1.0.0": {
"events": "github:jspm/nodelibs-events#0.1.0",
"inherits": "npm:inherits#2.0.1",
"readable-stream": "npm:readable-stream#1.1.13"
},
"npm:string_decoder#0.10.31": {
"buffer": "github:jspm/nodelibs-buffer#0.1.0"
},
"npm:url#0.10.3": {
"assert": "github:jspm/nodelibs-assert#0.1.0",
"punycode": "npm:punycode#1.3.2",
"querystring": "npm:querystring#0.2.0",
"util": "github:jspm/nodelibs-util#0.1.0"
},
"npm:util#0.10.3": {
"inherits": "npm:inherits#2.0.1",
"process": "github:jspm/nodelibs-process#0.1.1"
}
}
});
How can I keep my config.js tidy in order to avoid including all this all this info in all my pages (since config.js needs to be included in every page)?

I'm new to JSPM too and had a similar reaction about the large config.js sizes, but here's a few things I've learned:
1) I wouldn't use JSPM for Node modules that you only want to use on the server side / development machine. You can just continue to use NPM for those. I made this mistake - thinking that I should use JSPM for all dependencies, replacing both Bower and NPM. I installed gulp through JSPM and my config.js was suddenly over 700 lines long!
2) I wondered if it was possible to configure it to just record the top-level dependencies - like in package.json - not all the dependencies of dependencies... It doesn't sound like it. I asked in the Gitter group and the response was: "Big as it is, it gives you control over peer dependencies that you don't have in npm". (Thanks Mitranim).
3) If you're familiar with require.js, you can think of your config.js as being a bit like your require.config(...). One of the things it does is set up your short names you can use to include your modules with. As a former require.js user, I accepted that I needed to include my require.js config file on the front-end as the entry point, and its the same for config.js - at least, for development...
4) Production is another matter. Quoting Guy Bedford on the Gitter group: "the config file isn't meant to be included in production \ workflows around that will develop". There's more info in the "Bundle for production" section in the Getting Started guide.
5) I found a useful starting point is Jack Franklin's demo from Async Brighton. Particularly of note: he has a bundle workflow for production which switches the script includes to just point to the minified app.min.js - see the Makefile.

Resources