I'm trying to run grunt on a new machine and it won't compile.
The error I'm receiving is:
Running "requirejs:compile" (requirejs) task { [Error: Error: ERROR: module path does not exist: /Volumes/Users/dtdtdg/assets/js/src/../../../bower_components/almond/almond.js for module named: ../../../bower_components/almond/almond. Path is relative to: /Volumes/Users/dtdtdg
at /Volumes/Users/dtdtdg/node_modules/grunt-contrib-requirejs/node_modules/requirejs/bin/r.js:26824:35 ] originalError: [Error: ERROR: module path does not exist: /Volumes/Users/dtdtdg/assets/js/src/../../../bower_components/almond/almond.js for module named: ../../../bower_components/almond/almond. Path is relative to: /Volumes/Users/dtdtdg] }
I've run sudo npm install -g bower-installer and sudo npm install -g bower just to ensure I'm not missing any packages on this machine. Still no luck.
My grunt file is as follows:
module.exports = function(grunt) {
grunt.loadNpmTasks('grunt-contrib-copy');
grunt.loadNpmTasks('grunt-contrib-requirejs');
grunt.loadNpmTasks('grunt-contrib-sass');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.registerTask('default', [
'copy',
'sass',
'requirejs'
]);
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
copy: {
main: {
cwd: 'bower_components/foundation/css/',
src: '*',
dest: 'assets/css/vendor/foundation/',
expand: true,
rename: function(dest, src) {
return (dest + src).replace('.css', '.scss');
}
}
},
requirejs: {
compile: {
options: {
baseUrl: 'assets/js/src',
include: ['require-main'],
mainConfigFile: 'assets/js/src/require-main.js',
name: '../../../bower_components/almond/almond',
out: 'assets/js/build/app.js'
}
}
},
sass: {
dist: {
options: {
style: 'compressed'
},
files: {
'assets/css/build/styles.css': 'assets/css/src/manifest.scss'
}
}
},
watch: {
css: {
files: ['assets/css/src/**/*.scss'],
tasks: ['sass'],
options: {
spawn: false
}
}
//scripts:{
//files:['assets/js/src/**/*.js'],
//tasks:['requirejs']
//}
}
});
};
Ok I've now fixed this by running bower install almond but now have the following error:
Running "requirejs:compile" (requirejs) task
Error: ENOENT, no such file or directory '/Volumes/Users/dtdtdg/assets/js/src/routers/router.js'
In module tree:
require-main
{ [Error: Error: ENOENT, no such file or directory '/Volumes/Users/dtdtdg/assets/js/src/routers/router.js'
In module tree:
require-main
at Object.fs.openSync (fs.js:438:18)
]
originalError:
{ [Error: ENOENT, no such file or directory '/Volumes/Users/dtdtdg/assets/js/src/routers/router.js']
errno: 34,
code: 'ENOENT',
path: '/Volumes/Users/dtdtdg/assets/js/src/routers/router.js',
syscall: 'open',
fileName: '/Volumes/Users/dtdtdg/assets/js/src/routers/router.js',
moduleTree: [ 'require-main' ] } }
My fault - I had assets/js/src/routers/router.js renamed.
Related
I have created a simple Teams App using Yeoman Generator and have added a single static tab to my Teams project. I'm trying to deploy this to an Azure App Service. This is the error log from App Service Deployment Center
Failed to load ./.env.
[11:41:54] [Webpack error] multi ./src/app/scripts/client.ts
Module not found: Error: Can't resolve 'D:\home\site\repository/src/app/scripts/client.ts' in 'D:\home\site\repository'
resolve 'D:\home\site\repository/src/app/scripts/client.ts' in 'D:\home\site\repository'
Unhandled rejection [31mError[39m in plugin "[36mwebpack[39m"
using description file: D:\home\site\repository\package.json (relative path: .)
Field 'browser' doesn't contain a valid alias configuration
using description file: D:\home\site\repository\package.json (relative path: ./src/app/scripts/client.ts)
no extension
Field 'browser' doesn't contain a valid alias configuration
Message:
Webpack errors, see log
D:\home\site\repository\src\app\scripts\client.ts doesn't exist
.ts
Field 'browser' doesn't contain a valid alias configuration
D:\home\site\repository\src\app\scripts\client.ts.ts doesn't exist
.tsx
Field 'browser' doesn't contain a valid alias configuration
D:\home\site\repository\src\app\scripts\client.ts.tsx doesn't exist
Unhandled rejection [31mError[39m in plugin "[36mwebpack[39m"
Message:
Webpack errors, see log
.js
Field 'browser' doesn't contain a valid alias configuration
D:\home\site\repository\src\app\scripts\client.ts.js doesn't exist
as directory
D:\home\site\repository\src\app\scripts\client.ts doesn't exist
[D:\home\site\repository\src\app\scripts\client.ts]
[D:\home\site\repository\src\app\scripts\client.ts.ts]
[D:\home\site\repository\src\app\scripts\client.ts.tsx]
[D:\home\site\repository\src\app\scripts\client.ts.js]
# multi ./src/app/scripts/client.ts client[0]
[11:41:55] [Webpack error] multi ./src/app/server.ts
Module not found: Error: Can't resolve 'D:\home\site\repository/src/app/server.ts' in 'D:\home\site\repository'
resolve 'D:\home\site\repository/src/app/server.ts' in 'D:\home\site\repository'
using description file: D:\home\site\repository\package.json (relative path: .)
using description file: D:\home\site\repository\package.json (relative path: ./src/app/server.ts)
no extension
D:\home\site\repository\src\app\server.ts doesn't exist
.ts
D:\home\site\repository\src\app\server.ts.ts doesn't exist
.tsx
D:\home\site\repository\src\app\server.ts.tsx doesn't exist
.js
D:\home\site\repository\src\app\server.ts.js doesn't exist
as directory
D:\home\site\repository\src\app\server.ts doesn't exist
[D:\home\site\repository\src\app\server.ts]
[D:\home\site\repository\src\app\server.ts.ts]
[D:\home\site\repository\src\app\server.ts.tsx]
[D:\home\site\repository\src\app\server.ts.js]
# multi ./src/app/server.ts server[0]
[tslint-plugin] Starting linter in separate process...
[tslint-plugin] Starting linter in separate process...
[tslint-plugin] Linting complete.
[tslint-plugin] Linting complete.
[11:42:02] The following tasks did not complete: build, webpack, webpack:client, webpack:server
[11:42:02] Did you forget to signal async completion?
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! emphub#0.0.1 build: `gulp build`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the emphub#0.0.1 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
This is my webpack.config.js file
var webpack = require('webpack');
const Dotenv = require('dotenv-webpack');
var TSLintPlugin = require('tslint-webpack-plugin');
var path = require('path');
var fs = require('fs');
var argv = require('yargs').argv;
var debug = argv.debug !== undefined;
const lint = argv["linting"];
var nodeModules = {};
fs.readdirSync('node_modules')
.filter(function (x) {
return ['.bin'].indexOf(x) === -1;
})
.forEach(function (mod) {
nodeModules[mod] = 'commonjs ' + mod;
});
var config = [{
entry: {
server: [
__dirname + '/src/app/server.ts'
],
},
mode: debug ? 'development' : 'production',
output: {
path: __dirname + '/dist',
filename: '[name].js',
devtoolModuleFilenameTemplate: debug ? '[absolute-resource-path]' : '[]'
},
externals: nodeModules,
devtool: 'source-map',
resolve: {
extensions: [".ts", ".tsx", ".js"],
alias: {}
},
target: 'node',
node: {
__dirname: false,
__filename: false,
},
module: {
rules: [{
test: /\.tsx?$/,
exclude: [/lib/, /dist/],
loader: "ts-loader"
}]
},
plugins: []
},
{
entry: {
client: [
__dirname + '/src/app/scripts/client.ts'
]
},
mode: debug ? 'development' : 'production',
output: {
path: __dirname + '/dist/web/scripts',
filename: '[name].js',
libraryTarget: 'umd',
library: 'emphub',
publicPath: '/scripts/'
},
externals: {},
devtool: 'source-map',
resolve: {
extensions: [".ts", ".tsx", ".js"],
alias: {}
},
target: 'web',
module: {
rules: [{
test: /\.tsx?$/,
exclude: [/lib/, /dist/],
loader: "ts-loader",
options: {
configFile: "tsconfig-client.json"
}
},
{
test: /\.(eot|svg|ttf|woff|woff2)$/,
loader: 'file-loader?name=public/fonts/[name].[ext]'
}
]
},
plugins: [
new Dotenv({
systemvars: true
})
],
performance: {
maxEntrypointSize: 400000,
maxAssetSize: 400000,
assetFilter: function(assetFilename) {
return assetFilename.endsWith('.js');
}
}
}
];
if (lint !== false) {
config[0].plugins.push(new TSLintPlugin({
files: ['./src/app/*.ts']
}));
config[1].plugins.push(new TSLintPlugin({
files: ['./src/app/scripts/**/*.ts', './src/app/scripts/**/*.tsx']
}));
}
module.exports = config;
Could you please let me know what I am doing wrong? I'm pusing the code using git push azure master from my project root directory
I'm working on a simple node app and all is working well on local. But when deploying on Heroku, I had an error.
The tutorial on Heroku tells to add on package.json
"scripts": {
"start": "node server.js"
},
But, what can I put in server.js ? I found lots of examples but nothing clear or relevant for me. I'm a bit confused about the need of this.
The setting of the app is quite common : npm install/bower install and then "grunt serve" to launch the app. The app is a simple HTML/Angular web app calling endpoints on an API.
NB : I'm not using Express.
Here is the gruntfile.js :
'use strict';
module.exports = function (grunt) {
// Load grunt tasks automatically
require('load-grunt-tasks')(grunt);
// Time how long tasks take. Can help when optimizing build times
require('time-grunt')(grunt);
// Configurable paths for the application
var appConfig = {
app: require('./bower.json').appPath || 'app',
dist: '../project/WebApp'
};
//Environment vars
var envConfig = {
dev: {
baseUrl: 'http://localhost:3000',
loginUrl: 'http://demo.lvh.me:9000'
},
prod: {
baseUrl: '',
loginUrl: ''
}
};
// Require ModRewrite object before initConfig
var modRewrite = require('connect-modrewrite');
// Define the configuration for all the tasks
grunt.initConfig({
appConf: appConfig,
// Empties folders to start fresh
clean: {
dist: {
files: [{
dot: true,
src: [
'.tmp',
'<%= appConf.dist %>/{,*/}*',
'!<%= appConf.dist %>/.git*'
]
}],
options: {
force: true //since dist directory is outside, we must use force flag.
}
},
server: '.tmp'
},
//server settings
ngconstant: {
// Options for all targets
options: {
space: ' ',
wrap: '\'use strict\';\n\n {%= __ngModule %}',
name: 'config'
},
// Environment targets
development: {
options: {
dest: 'app/config.js'
},
constants: envConfig.dev
},
production: {
options: {
dest: '<%= appConf.app %>/config.js'
},
constants: envConfig.prod
}
},
// Automatically inject Bower components into the app
wiredep: {
app: {
src: ['<%= appConf.app %>/index.html'],
ignorePath: /\.\.\//,
'options': {
'overrides': {
'semantic-ui': {
'main': ['dist/semantic.css', 'dist/semantic.js']
}
}
}
}
},
// Copies remaining files to places other tasks can use
copy: {
dist: {
files: [{
expand: true,
dot: true,
cwd: '<%= appConf.app %>',
dest: '<%= appConf.dist %>',
src: [
'*.{ico,png,txt}',
'{,*/}*.html',
'images/{,*/}*.{webp}',
'fonts/*'
]
}, {
expand: true,
cwd: '.tmp/images',
dest: '<%= appConf.dist %>/images',
src: ['generated/*']
}, {
expand: true,
cwd: 'bower_components/font-awesome',
src: 'fonts/*',
dest: '<%= appConf.dist %>'
}]
},
styles: {
files: [
{
expand: true,
cwd: '<%= appConf.app %>/styles',
dest: '.tmp/styles/',
src: '{,*/}*.css'
}
]
}
},
// Run some tasks in parallel to speed up the build process
concurrent: {
server: [
'copy:styles'
],
test: [
'copy:styles'
],
dist: [
'copy:styles',
'svgmin'
]
},
// Add vendor prefixed styles
autoprefixer: {
options: {
browsers: ['last 1 version']
},
dist: {
files: [{
expand: true,
cwd: '.tmp/styles/',
src: '{,*/}*.css',
dest: '.tmp/styles/'
}]
}
},
// The actual grunt server settings
connect: {
options: {
port: 9000,
// Change this to '0.0.0.0' to access the server from outside.
hostname: 'demo.lvh.me',
livereload: 35729
},
livereload: {
options: {
open: true,
middleware: function (connect) {
return [
modRewrite(['^[^\\.]*$ /index.html [L]']),
connect.static('.tmp'),
connect().use(
'/bower_components',
connect.static('./bower_components')
),
connect.static(appConfig.app)
];
}
}
},
test: {
options: {
port: 9001,
middleware: function (connect) {
return [
rewriteRulesSnippet,
connect.static('.tmp'),
connect.static('test'),
connect().use(
'/bower_components',
connect.static('./bower_components')
),
connect.static(appConfig.app)
];
}
}
},
dist: {
options: {
open: true,
base: '<%= appConf.dist %>'
}
}
},
// Make sure code styles are up to par and there are no obvious mistakes
jshint: {
options: {
jshintrc: '.jshintrc',
reporter: require('jshint-stylish')
},
all: {
src: [
'Gruntfile.js',
'<%= appConf.app %>/{,*/}*.js'
]
}
},
// Watches files for changes and runs tasks based on the changed files
watch: {
bower: {
files: ['bower.json'],
tasks: ['wiredep']
},
js: {
files: ['<%= appConf.app %>/{,**/}*.js'],
tasks: ['newer:jshint:all'],
options: {
livereload: '<%= connect.options.livereload %>'
}
},
css: {
files: ['<%= appConf.app %>/styles/{,**/}*.scss'],
tasks: ['sass'],
options: {
livereload: true,
},
},
styles: {
files: [
'<%= appConf.app %>/styles/{,**/}*.css',
'<%= appConf.app %>/../templating/css/style.css'
],
tasks: ['newer:copy:styles', 'autoprefixer']
},
gruntfile: {
files: ['Gruntfile.js']
},
livereload: {
options: {
livereload: '<%= connect.options.livereload %>'
},
files: [
'<%= appConf.app %>/{,**/}*.html',
'.tmp/styles/{,**/}*.css',
'<%= appConf.app %>/images/{,**/}*.{png,jpg,jpeg,gif,webp,svg}'
]
}
},
sass: {
dev: {
options: {
style: 'expanded'
},
files: [
{
expand: true,
cwd: '<%= appConf.app %>/styles',
src: ['*.scss'],
ext: '.css',
dest: '<%= appConf.app %>/styles'
}
]
}
}
});
grunt.loadNpmTasks('grunt-sass');
// Build the development application
grunt.registerTask('serve', 'Compile then start a connect web server', function () {
grunt.task.run([
'clean:server',
'ngconstant:development',
'wiredep',
'sass',
'concurrent:server',
'autoprefixer',
'connect:livereload',
'watch'
]);
});
};
The tutorial assumes that server.js contains your actual server.
If your server is started by grunt serve, just change the start script to run that instead.
this seems quite more logical to me :) So I tested it and deployement was well but the app crashes with this error :
Starting process with command npm start
2016-03-03T17:14:35.928347+00:00 app[web.1]:
2016-03-03T17:14:35.928397+00:00 app[web.1]: > # start /app
2016-03-03T17:14:35.928412+00:00 app[web.1]: > grunt serve
2016-03-03T17:14:35.928413+00:00 app[web.1]:
2016-03-03T17:14:35.951390+00:00 app[web.1]: sh: 1: grunt: not found
2016-03-03T17:14:35.963949+00:00 app[web.1]:
2016-03-03T17:14:35.978885+00:00 app[web.1]: npm ERR! Linux 3.13.0-77-generic
2016-03-03T17:14:35.979392+00:00 app[web.1]: npm ERR! argv "/app/.heroku/node/bin/node" "/app/.heroku/node/bin/npm" "start"
2016-03-03T17:14:35.979644+00:00 app[web.1]: npm ERR! node v4.2.2
2016-03-03T17:14:35.984767+00:00 app[web.1]: npm ERR! npm v2.14.7
2016-03-03T17:14:35.985031+00:00 app[web.1]: npm ERR! file sh
2016-03-03T17:14:35.985243+00:00 app[web.1]: npm ERR! code ELIFECYCLE
2016-03-03T17:14:35.985481+00:00 app[web.1]: npm ERR! errno ENOENT
2016-03-03T17:14:35.985718+00:00 app[web.1]: npm ERR! syscall spawn
2016-03-03T17:14:35.985939+00:00 app[web.1]: npm ERR! # start: grunt serve
2016-03-03T17:14:35.986118+00:00 app[web.1]: npm ERR! spawn ENOENT
2016-03-03T17:14:35.986312+00:00 app[web.1]: npm ERR!
2016-03-03T17:14:35.986492+00:00 app[web.1]: npm ERR! Failed at the # start script 'grunt serve'.
I want to use browserfy to transform es6 files to es5. But everytime the watch-task is executed I get the error:
Warning: Task "browserfy" not found. Use --force to continue.
I automate the task with the following gruntfile (simplified):
grunt.initConfig({
browserfy: {
dist: {
options: {
transform: [
["babelify", {
loose: "all"
}]
]
},
files: {
"dist/module.js": ["lib/main.js"]
}
}
},
watch: {
lib_test: {
files: '<%= jshint.lib_test.src %>',
tasks: ['jshint:lib_test', 'browserfy'/*, 'qunit'*/]
}
}});
grunt.loadNpmTasks("grunt-browserify");
grunt.loadNpmTasks('grunt-contrib-watch');
I also used the command
npm install grunt-browserify --save-dev
Solved the problem. I had a typo. It is "browserify.
When I am using grunt command it is showing me following error:
$ grunt
Loading "Gruntfile.js" tasks...ERROR
>> Error: Cannot find module 'load-grunt-tasks'
Warning: Task "default" not found. Use --force to continue.
Aborted due to warnings.
Execution Time (2015-02-07 18:05:42 UTC)
loading tasks 339ms ███████████████████████████████████████████████ 99%
Total 344ms
I already tried - npm install, npm update commands. It would be great if someone can help me with this. Thanks!
Addding Content of Gruntfile.js
'use strict';
var paths = {
js: ['*.js', 'test/**/*.js', '!test/coverage/**', '!bower_components/**', 'packages/**/*.js', '!packages/**/node_modules/**', '!packages/contrib/**/*.js', '!packages/contrib/**/node_modules/**'],
html: ['packages/**/public/**/views/**', 'packages/**/server/views/**'],
css: ['!bower_components/**', 'packages/**/public/**/css/*.css', '!packages/contrib/**/public/**/css/*.css']
};
module.exports = function(grunt) {
if (process.env.NODE_ENV !== 'production') {
require('time-grunt')(grunt);
}
// Project Configuration
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
assets: grunt.file.readJSON('config/assets.json'),
clean: ['bower_components/build'],
watch: {
js: {
files: paths.js,
tasks: ['jshint'],
options: {
livereload: true
}
},
html: {
files: paths.html,
options: {
livereload: true,
interval: 500
}
},
css: {
files: paths.css,
tasks: ['csslint'],
options: {
livereload: true
}
}
},
jshint: {
all: {
src: paths.js,
options: {
jshintrc: true
}
}
},
uglify: {
core: {
options: {
mangle: false
},
files: '<%= assets.core.js %>'
}
},
csslint: {
options: {
csslintrc: '.csslintrc'
},
src: paths.css
},
cssmin: {
core: {
files: '<%= assets.core.css %>'
}
},
nodemon: {
dev: {
script: 'server.js',
options: {
args: [],
ignore: ['node_modules/**'],
ext: 'js,html',
nodeArgs: ['--debug'],
delayTime: 1,
cwd: __dirname
}
}
},
concurrent: {
tasks: ['nodemon', 'watch'],
options: {
logConcurrentOutput: true
}
},
mochaTest: {
options: {
reporter: 'spec',
require: [
'server.js',
function() {
require('meanio/lib/core_modules/module/util').preload(__dirname + '/packages/**/server', 'model');
}
]
},
src: ['packages/**/server/tests/**/*.js']
},
env: {
test: {
NODE_ENV: 'test'
}
},
karma: {
unit: {
configFile: 'karma.conf.js'
}
}
});
//Load NPM tasks
require('load-grunt-tasks')(grunt);
/**
* Default Task
*/
grunt.hook.push('clean', -9999);
grunt.hook.push('concurrent', 9999);
if (process.env.NODE_ENV === 'production') {
grunt.hook.push('cssmin', 100);
grunt.hook.push('uglify', 200);
} else {
grunt.hook.push('jshint', -200);
grunt.hook.push('csslint', 100);
}
//Default task.
grunt.registerTask('default', ['hook']);
//Test task.
grunt.registerTask('test', ['env:test', 'mochaTest', 'karma:unit']);
// For Heroku users only.
// Docs: https://github.com/linnovate/mean/wiki/Deploying-on-Heroku
grunt.registerTask('heroku:production', ['cssmin', 'uglify']);
};
Try running:
$ npm install
After that, if you run it and the error still persists or if there's another one, then you probably have not installed ruby, compass or both :)
I had the same issue, the problem for me was in my package.json where I didn't actually install the NPM package needed and it was not automatically installed as previously thought. Try doing
npm install --save-dev load-grunt-tasks
If that doesn't work can you provide the package.json file as well so we can get a little more information.
I was having the same issue you were having, it seems as though the gruntfile is missing a required initialization step.
By changing this:
require('load-grunt-tasks')(grunt);
/**
* Default Task
*/
grunt.hook.push('clean', -9999);
to this:
require('load-grunt-tasks')(grunt);
grunt.loadNpmTasks('grunt-hook');
/**
* Default Task
*/
grunt.hook.push('clean', -9999);
Adding the grunt.loadNpmTasks call, I'm able to get past that issue. The problem is, now I'm getting
Task "clean" not found. Use --force to continue.
Looking at the rest of the grunt file, i don't see a register task for clean. If I go to the mean.io docs, it looks like the build is failing. Perhaps this is part of why? I think I asked mean-cli for gulp version, that's probably why. I'll delete and take it from the top :)
I think the problem is related to where the npm dependencies are declared and the way Heroku handles them.
In few words, check if the npm packages are as dev dependencies and move them to the dependencies block, as suggested here: https://stackoverflow.com/a/20687098/532912.
I am trying to use the 'typestring' npm module with browserify but get the following error in the Chrome console:
Uncaught Error: Cannot find module 'typescript-api'
I see that 'typescript-api' is a dependency of typestring and it does appear in the node_modules folder of 'typestring'...
Am i missing something? My grunt-browserify task is:
browserify: {
dist: {
files: {
'./public/bundle.js': './public/main.js'
},
options: {
commondir: true,
bundleOptions: {
debug: true
},
transform: ['deamdify']
}
}
},