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']
}
}
},
Related
While building the gatsby project, I faced this kind of error.
yarn develop
ERROR #98123 WEBPACK
Generating development JavaScript bundle failed
Cannot find module 'sanitize.css/page.css'
Require stack:
- D:\UpworkJobs\Nate\dci-gatsby-importexport\node_modules\postcss-normalize\dist\index.cjs.js
File: src\css\preview.css
failed Building development bundle - 366.725s
Here is a screenshot of the error log.
These kinds of errors occur even if I removed all CSS codes from the style files.
It seems importing CSS files is not working. If I didn't import the CSS files, the errors go away.
Here are all codes of gatsby-config.js
let systemvars = false;
if (process.env.NODE_ENV === "production") {
systemvars = true;
}
require("dotenv").config({
path: `.env.${process.env.NODE_ENV}`,
systemvars
});
// Gatsby automatically sets NODE_ENV to `development` or `production` when running `gatsby develop` or `gatsby build`, respectively.
// Thus make sure you have .env.development or .env.production setup (unless your CI/build env vars are already set globally)
const AliasConfig = require("./alias.config.js");
module.exports = {
siteMetadata: {
title: `DCI DigiGuide Print`,
description: `DCI DigiGuide Printable Version`,
author: `#designbycosmic`,
siteUrl: process.env.SITE_URL,
},
plugins: [
//
// * App Functionality Plugins
//
// eslint plugin
{
resolve: "gatsby-plugin-eslint",
options: {
test: /\.js$|\.jsx$/,
exclude: /(node_modules|.cache|public)/,
stages: ["develop"],
options: {
maxWarnings: undefined,
emitWarning: true,
failOnError: false,
failOnWarning: false,
},
},
},
// allows content to be placed in head
`gatsby-plugin-react-helmet`,
// adds web manifest for some pwa functionality
{
resolve: `gatsby-plugin-manifest`,
options: {
name: `gatsby-dci-digiguide-print`,
short_name: `DigiGuidePrint`,
start_url: `/`,
background_color: `#222c47`,
theme_color: `#222c47`,
display: `minimal-ui`,
icon: `./src/images/favicon.png`, // This path is relative to the root of the site.
},
},
// allow alias imports
{
resolve: "gatsby-plugin-alias-imports",
options: {
alias: AliasConfig.map,
extensions: AliasConfig.extensions,
},
},
// inline svgs instead of converting them to base64
{
resolve: "gatsby-plugin-react-svg",
options: {
rule: {
include: /svg/,
},
},
},
`gatsby-plugin-postcss`,
`gatsby-plugin-material-ui`,
// Craft CMS configuration
{
resolve: `gatsby-source-graphql`,
options: {
url: process.env.CRAFT_API_URL,
typeName: "Craft",
fieldName: "craft",
headers: {
Authorization: `bearer ${process.env.CRAFT_API_TOKEN}`,
},
},
},
// Get build date
{
resolve: `gatsby-plugin-build-date`,
options: {
formatAsDateString: false,
},
},
],
};
Help me to solve this problem.
In my case I was able to solve by adding the following configuration in package.json.
"resolutions": {
"sanitize.css": "12.0.1"
},
Finally, this problem has been solved.
Using yarn instead of using npm solved the problem.
Remove node_modules and yarn install
After that, the problem has gone away.
Thank you.
I have following gruntfile
module.exports = function (grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
htmlhint: {
build: {
options: {
'tag-pair': true,
'tagname-lowercase': true,
'attr-lowercase': true,
'attr-value-double-quotes': true,
'doctype-first': true,
'spec-char-escape': true,
'id-unique': true,
'head-script-disabled': true,
'style-disabled': true
},
src: ['index.html']
}
},
watch: {
html: {
files: ['index.html'],
tasks: ['htmlhint']
}
}
});
require("matchdep").filterDev("grunt-").forEach(grunt.loadNpmTasks);
grunt.registerTask('default', ['watch']);
};
And when i try running grunt in cmd it gives me this error
Warning: Task "default" not found. Use --force to continue.
Aborted due to warnings.
How do i fix this
Try adding the htmlhint task to the default:
grunt.registerTask('default', ['htmlhint', 'watch']);
Also make sure you have installed grunt-htmlhint and saved it to your package.json. matchdep uses it in the filterDev method you're using, so if its not saved, it won't get loaded.
npm install grunt-htmlhint --save-dev
Alternatively you could load the task manually using:
grunt.loadNpmTasks('grunt-htmlhint');
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'm using require JS.
I want to marge two files into one.
I'm using for that require js plugin for grunt.
First file is raty jquery script.
Second is my own file like this:
define('userGlosowanie', ['jquery', 'raty'], function ($) {
'use strict';
return {
init: function () {
}
}
});
And here is my grunt script:
requirejs: {
userGlosowanie: {
options: {
baseUrl: "js/libs",
paths: {
userGlosowanie: "../dev/uzytkownik-glosowanie",
raty: "raty/jquery.raty",
},
name: "userGlosowanie",
out: "js/build/uzytkownik.min.js",
preserveLicenseComments: false,
}
},
},
Problem is that I've got error:
Running "requirejs:user" (requirejs) task
>> Error: ENOENT, no such file or directory
>> 'D:\strony\www\polskieszlaki\js\libs\jquery.js'
>> In module tree:
>> user
Warning: RequireJS failed. Use --force to continue.
my jquery file is in separate file and I don't want to include it in compiled file. How to do it?
If you don't want to include jquery in build file just mark it as empty: in path config.
options: {
paths: {
userGlosowanie: "../dev/uzytkownik-glosowanie",
raty: "raty/jquery.raty",
jquery: "empty:"
}
}
You can exclude a particular module/file from getting included in the combined/optimized file using the exclude option
In your case it will look like -
requirejs: {
userGlosowanie: {
options: {
baseUrl: "js/libs",
paths: {
userGlosowanie: "../dev/uzytkownik-glosowanie",
raty: "raty/jquery.raty",
},
out: "js/build/uzytkownik.min.js",
name: "userGlosowanie",
exclude: "jquery"
preserveLicenseComments: false,
}
}
}
With modules and dir(output dir) option, you may not be able to set the output file name, but the optmized file with same name as the module will be placed in the directory set by option dir
requirejs: {
userGlosowanie: {
options: {
baseUrl: "js/libs",
paths: {
userGlosowanie: "../dev/uzytkownik-glosowanie",
raty: "raty/jquery.raty",
},
dir: "../public",
modules : [{
name: "userGlosowanie",
exclude: "jquery"
}],
preserveLicenseComments: false,
}
}
}
Sample usage/explanation is here