I bought this template and am having troubles with npm install and npm start. Do you all have tips on fixing the vulnerabilties when I install and then after that is there something I need to do to get npm start to work?
When I run npm install I get the following output:
PS C:\Users\jonat\OneDrive\Documents\Projects\Boland_Front_end\boland_ecommerce_theme_bs5_v2.0> npm install
up to date, audited 935 packages in 2s
61 packages are looking for funding
run `npm fund` for details
8 vulnerabilities (1 moderate, 7 high)
To address issues that do not require attention, run:
npm audit fix
To address all issues possible (including breaking changes), run:
npm audit fix --force
Some issues need review, and may require choosing
a different dependency.
Run `npm audit` for details.
PS C:\Users\jonat\OneDrive\Documents\Projects\Boland_Front_end\boland_ecommerce_theme_bs5_v2.0>
I can force the install with npm install --no-audit, but when I try npm start I get the following:
PS C:\Users\jonat\OneDrive\Documents\Projects\Boland_Front_end\boland_ecommerce_theme_bs5_v2.0> npm start
npm ERR! Missing script: "start"
npm ERR!
npm ERR! Did you mean one of these?
npm ERR! npm star # Mark your favorite packages
npm ERR! npm stars # View packages marked as favorites
npm ERR!
npm ERR! To see a list of scripts, run:
npm ERR! npm run
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\jonat\AppData\Local\npm-cache\_logs\2022-09-02T21_58_05_615Z-debug-0.log
Upon looking in my package.json it appears start is missing from the scripts section. I added "start": "./bin/www" to the package.json and it gave me the following output:
PS C:\Users\jonat\OneDrive\Documents\Projects\Boland_Front_end\boland_ecommerce_theme_bs5_v2.0> npm start
> boland-2.0#1.0.0 start
> node ./bin/www
node:internal/modules/cjs/loader:959
throw err;
^
Error: Cannot find module 'C:\Users\jonat\OneDrive\Documents\Projects\Boland_Front_end\boland_ecommerce_theme_bs5_v2.0\bin\www'
at Function.Module._resolveFilename (node:internal/modules/cjs/loader:956:15)
at Function.Module._load (node:internal/modules/cjs/loader:804:27)
at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:81:12)
at node:internal/main/run_main_module:17:47 {
code: 'MODULE_NOT_FOUND',
requireStack: []
}
PS C:\Users\jonat\OneDrive\Documents\Projects\Boland_Front_end\boland_ecommerce_theme_bs5_v2.0>
here is package.json
{
"name": "boland-2.0",
"version": "1.0.0",
"description": "",
"main": "gulpfile.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
#I added the below line to try and get npm start to work
"start": "node ./bin/www"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"#babel/core": "^7.16.0",
"#babel/preset-env": "^7.16.4",
"babelify": "^10.0.0",
"browser-sync": "^2.27.7",
"browserify": "^17.0.0",
"del": "^6.0.0",
"glob": "^7.2.0",
"gulp": "^4.0.2",
"gulp-autoprefixer": "^6.1.0",
"gulp-clean-css": "^4.3.0",
"gulp-cli": "^2.3.0",
"gulp-file-include": "^2.3.0",
"gulp-rename": "^2.0.0",
"gulp-sass": "^5.0.0",
"gulp-sourcemaps": "^3.0.0",
"gulp-uglify": "^3.0.2",
"sass": "^1.45.0",
"sass-migrator": "^1.5.3",
"vinyl-buffer": "^1.0.1",
"vinyl-source-stream": "^2.0.0"
},
"dependencies": {
"aos": "^3.0.0-beta.6",
"bootstrap": "^5.1.3",
"imagesloaded": "^4.1.4",
"jquery": "^3.6.0",
"jquery-countdown": "^2.2.0",
"jquery-nice-select": "^1.1.0",
"masonry-layout": "^4.2.2",
"popper.js": "^1.16.1",
"simplebar": "^5.3.6",
"smooth-scroll": "^16.1.3",
"sticky-js": "^1.3.0",
"swiper": "^7.3.1"
}
}
here is my gulpfile.js:
'use strict';
var { src, dest, series, parallel, watch } = require('gulp');
var browserify = require('browserify');
var babelify = require('babelify');
var source = require('vinyl-source-stream');
var buffer = require('vinyl-buffer');
var sass = require('gulp-sass')(require('sass'));
var rename = require('gulp-rename');
var sourcemaps = require('gulp-sourcemaps');
var browsersync = require('browser-sync').create();
var uglify = require('gulp-uglify');
var cleanCSS = require('gulp-clean-css');
var del = require('del');
var glob = require('glob');
var autoprefixer = require('gulp-autoprefixer');
var fileinclude = require('gulp-file-include');
// Define paths
var paths = {
here: './',
base: {
base: {
dest: './'
},
node: {
dest: './node_modules'
}
},
src: {
base: {
dir: './',
files: './**/*',
dest: './public'
},
html: {
dir: './html/*.html',
files: './html/**/*.html',
dest: './public',
cleanHtml: './public/*.html',
},
js: {
dir: './js',
files: './js/custom/**/*.js',
theme: './js/theme.js',
dest: './public/assets/js',
clean: './public/assets/js/*.js',
},
scss: {
dir: './scss',
files: './scss/**/*',
main: './scss/*.scss',
dest: './public/assets/css'
},
vendor: {
files: [
"./node_modules/jquery/dist/jquery.min.js",
"./node_modules/jquery-countdown/dist/jquery.countdown.min.js",
"./node_modules/swiper/swiper-bundle.min.js",
"./node_modules/imagesloaded/imagesloaded.pkgd.min.js",
"./node_modules/simplebar/dist/simplebar.min.js",
"./node_modules/masonry-layout/dist/masonry.pkgd.min.js",
"./node_modules/jquery-nice-select/js/jquery.nice-select.min.js"
],
css: [
"./node_modules/swiper/swiper-bundle.min.css",
"./node_modules/simplebar/dist/simplebar.min.css",
"./node_modules/jquery-nice-select/css/nice-select.css"
],
dest: './public/assets/vendor/node_modules/js',
destCss: './public/assets/vendor/node_modules/css',
clean: './public/assets/vendor/node_modules'
}
}
};
//Clean public folder html,css,js
function cleanUp() {
return del([paths.src.js.clean,paths.src.vendor.clean, paths.src.scss.dest, paths.src.html.cleanHtml]);
};
//Copy vendor to assets/vendor folder
function copyVendor() {
return src(paths.src.vendor.files)
.pipe(dest(paths.src.vendor.dest))
.pipe(browsersync.stream());
}
function copyVendorCss() {
return src(paths.src.vendor.css)
.pipe(dest(paths.src.vendor.destCss))
.pipe(browsersync.stream());
}
//BrowserSync
function browserSync(done) {
browsersync.init({
server: {
baseDir: [paths.src.base.dest]
},
});
done();
};
function browsersyncReload(done) {
browsersync.reload();
done();
};
function bundleJs() {
var files = glob.sync('./js/theme.js');
return (
browserify({
entries: files,
debug: true,
cache: {},
packageCache: {}
}).transform(babelify, {
global: true,
presets: ["#babel/preset-env"]
})
.bundle()
.pipe(source('theme.bundle.js'))
.pipe(buffer())
.pipe(sourcemaps.init())
.pipe(uglify())
.pipe(sourcemaps.write(paths.here))
.pipe(dest(paths.src.js.dest))
);
};
//styles
function buildCss() {
return src(paths.src.scss.main)
.pipe(sourcemaps.init())
.pipe(sass.sync().on('error', sass.logError))
.pipe(autoprefixer())
.pipe(sourcemaps.write(paths.here))
.pipe(dest(paths.src.scss.dest))
.pipe(browsersync.stream());
};
function minifyCss() {
return src(paths.src.scss.main)
.pipe(sourcemaps.init())
.pipe(sass.sync().on('error', sass.logError))
.pipe(autoprefixer())
.pipe(cleanCSS())
.pipe(rename({
suffix: '.min'
}))
.pipe(sourcemaps.write(paths.here))
.pipe(dest(paths.src.scss.dest))
.pipe(browsersync.stream());
};
//Copy html
function html() {
return src(paths.src.html.dir)
.pipe(fileinclude({
prefix: '##',
basepath: '#file',
indent: true
}))
.pipe(dest(paths.src.html.dest))
.pipe(browsersync.reload({
stream: true
}));
};
function watchFiles() {
watch(paths.src.scss.files, series(buildCss, minifyCss));
watch(paths.src.js.files, series(bundleJs, browsersyncReload));
watch(paths.src.html.files, series(html, browsersyncReload));
};
exports.watchFiles = watch;
exports.buildCss = buildCss;
exports.bundleJs = bundleJs;
exports.minifyCss = minifyCss;
exports.html = html;
exports.copyVendor = copyVendor;
exports.copyVendorCss = copyVendorCss;
exports.cleanUp = cleanUp;
exports.default = series(cleanUp, html, buildCss, minifyCss, copyVendor, copyVendorCss, bundleJs, parallel(browserSync, watchFiles));
I am learning hybris and I started using smartedit. The problem is that when I run ant clean all or ant updatesystem I get this error.
Running grunt default
grunt-cli: The grunt command line interface (v1.3.2)
Fatal error: Unable to find local grunt.
If you're seeing this message, grunt hasn't been installed locally to
your project. For more information about installing and configuring grunt,
please see the Getting Started guide:
https://gruntjs.com/getting-started
What have I done till now:
I have grunt-cli installed globally, and grunt installed locally. Also, I run npm install.
Here is my packege.json file:
{
"name": "name",
"version": "1.0.0",
"main": "index.js",
"directories": {
"lib": "lib"
},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"devDependencies": {
"grunt": "^1.4.1",
"grunt-contrib-jshint": "^3.0.0",
"grunt-contrib-watch": "^1.1.0"
},
"dependencies": {},
"description": "desc"
}
Here is my Gruntfile.js:
module.exports = function(grunt) {
grunt.initConfig({
jshint: {
files: ['Gruntfile.js', 'src/**/*.js', 'test/**/*.js'],
options: {
globals: {
jQuery: true
}
}
},
watch: {
files: ['<%= jshint.files %>'],
tasks: ['jshint']
}
});
grunt.loadNpmTasks('grunt-contrib-jshint');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.registerTask('default', ['jshint']);
};
I tried a bunch of ways to resolve this problem but nothing seemed to work. Can someone help me out?
Really hoping someone can help me with this as it's driving me crazy.
Node v12.4.0
package.json: -
{
"name": "#mypackage/db-migrate",
"private": true,
"version": "1.0.0",
"main": "index.js",
"license": "ISC",
"workspaces": {
"packages": [
"common/models"
]
},
"dependencies": {
"#babel/core": "^7.6.0",
"#babel/preset-env": "^7.6.0",
"#babel/register": "^7.6.0",
"#mypackage/models": "1.0.0",
"db-migrate-mysql": "^1.1.10",
"db-migrate-plugin-babel": "^2.0.1",
"npm-upgrade": "^2.0.2"
}
}
.babelrc: -
{
"presets": [
"#babel/preset-env"
]
}
Directory structure: -
common->models - this contains the source lib for #mypackage/models
migrations - contains all the migration files
Yarn installs all the dependencies without issue.
So when I run a migration command ("db-migrate down -c 1", for example), I get the following: -
export { CONSTANT_ONE, CONSTANT_TWO, CONSTANT_THREE };
^^^^^^
SyntaxError: Unexpected token export
This is happening when I am trying to export/import from one of the #mypackage/models files.
var CONSTANT_ONE = "foo_one";
var CONSTANT_TWO = "foo_two";
var CONSTANT_THREE = "foo_three";
export { CONSTANT_ONE, CONSTANT_TWO, CONSTANT_THREE };
Is this a root directory issue? I am complete baffled and utterly frustrated. Any help VERY welcome.
Solved by changing .babelrc to babel.config.js.
My npm run build fails with this:
✖ Building demo
Failed to compile with 1 error.
ERROR in multi ./node_modules/nwb/polyfills.js ./demo/src/index.js
Module not found: Error: Can't resolve '/Users/david/git/demoapp/demo/src/index.js' in '/Users/david/git/demoapp'
# multi ./node_modules/nwb/polyfills.js ./demo/src/index.js
Error running command: Build failed with errors.
Error: Build failed with errors.
at /Users/david/git/demoapp/node_modules/nwb/lib/webpackBuild.js:82:17
at emitRecords.err (/Users/david/git/demoapp/node_modules/webpack/lib/Compiler.js:269:13)
at Compiler.emitRecords (/Users/david/git/demoapp/node_modules/webpack/lib/Compiler.js:375:38)
at emitAssets.err (/Users/david/git/demoapp/node_modules/webpack/lib/Compiler.js:262:10)
at applyPluginsAsyncSeries1.err (/Users/david/git/demoapp/node_modules/webpack/lib/Compiler.js:368:12)
at next (/Users/david/git/demoapp/node_modules/tapable/lib/Tapable.js:218:11)
at Compiler.compiler.plugin (/Users/david/git/demoapp/node_modules/webpack/lib/performance/SizeLimitsPlugin.js:99:4)
at Compiler.applyPluginsAsyncSeries1 (/Users/david/git/demoapp/node_modules/tapable/lib/Tapable.js:222:13)
at Compiler.afterEmit (/Users/david/git/demoapp/node_modules/webpack/lib/Compiler.js:365:9)
at require.forEach.err (/Users/david/git/demoapp/node_modules/webpack/lib/Compiler.js:354:15)
at /Users/david/git/demoapp/node_modules/async/dist/async.js:473:16
at iteratorCallback (/Users/david/git/demoapp/node_modules/async/dist/async.js:1050:13)
at /Users/david/git/demoapp/node_modules/async/dist/async.js:958:16
at /Users/david/git/demoapp/node_modules/graceful-fs/graceful-fs.js:43:10
at FSReqWrap.oncomplete (fs.js:112:15)`
This is incorrect in '/Users/david/git/demoapp' because the index is in /Users/david/git/demoapp/src or /Users/david/git/demoapp/lib for the ES5 version, /Users/david/git/demoapp/es for the ES6 version
My nwb.config.js looks like this:
const path = require('path');
function excludeNodeModulesExcept (modules) {
var pathSep = path.sep;
if (pathSep === '\\') { // must be quoted for use in a regexp:
pathSep = '\\\\';
}
var moduleRegExps = modules.map(function (modName) { return new RegExp("node_modules" + pathSep + modName);});
return function (modulePath) {
if (/node_modules/.test(modulePath)) {
for (var i = 0; i < moduleRegExps.length; i++) {
if (moduleRegExps[i].test(modulePath)) {
console.log("Allowed babel transpiling of " + modulePath);
return false;
}
}
return true;
}
return false;
};
}
module.exports = {
type: 'react-component',
npm: {
esModules: true,
umd: false
},
webpack: {
rules: {
babel: {
exclude: excludeNodeModulesExcept(['kontraktor-client', 'kontraktor-common']),
options: {
babelrc: false,
cacheDirectory: true
}
}
}
}
};
The relevant part of my package.json looks like this:
{
"name": "demoapp",
"version": "1.0.0",
"description": "Demo App",
"main": "lib/index.js",
"module": "es/index.js",
"files": [
"css",
"es",
"lib",
"umd"
],
"scripts": {
"build": "nwb build-react-component",
"images": "node imagesServer/index.js",
"serve": "nwb serve-react-app",
"clean": "nwb clean-module",
"start": "npm-run-all --parallel serve images",
"test": "nwb test-react",
"test:coverage": "nwb test-react --coverage",
"test:watch": "nwb test-react --server"
},
Is there a way of specify to nwb where the source index.js is located? I want to build a ES5 version of this React application.
Another confusion is that some posts and tutorials states that a directory named 'dist' is used to output the built code from 'npm run build'?
react-app doesnot support importing files outside src folder. so short answer ;you will have to eject'
or you can use npm link but your module must be exporting es5 beacuse again react-app will not transpile it for you.
I am new to materialize css framework. I am using laravel-elixir 4.0.0 with gulp to browserify the installed npm materialize-css module.
Here are my configurations
package.json
{
"private": true,
"devDependencies": {
"gulp": "^3.8.8"
},
"dependencies": {
"jquery": "^2.2.0",
"laravel-elixir": "^4.0.0",
"materialize-css": "^0.97.5"
}
}
gulpfile.js
var gulp = require('gulp');
var elixir = require('laravel-elixir');
/*
|--------------------------------------------------------------------------
| ELIXIR ASSET MANAGEMENT
|--------------------------------------------------------------------------
*/
elixir.config.sourcemaps = true;
// Set the path for compiled assets
var build_path = "public/compiled/";
elixir(function(mix) {
/*
|----------------------------------------------------------------------
| Javascript browserification
|----------------------------------------------------------------------
*/
mix.browserify(
"app.js",
build_path + "app.js"
);
});
app.js
window.$ = window.jQuery = require('jquery')
require('materialize-css');
However, when I run gulp command it returns the following errors:-
gulp-notify: [Laravel Elixir] Browserify Failed!: Cannot find module
'jQuery' from
'/var/www/laravel5/node_modules/materialize-css/bin'
My node versions:-
node v5.6.0, npm v3.6.0
Note: I'm not using Elixir. Only Gulp, browserify and materialize-css.
This is what I have in my project using materialize-css:
in the package.json I have added to the devDependencies list browserify-shim, and configured it:
"dependencies":{
"materialize-css": "xx.yy.zz",
"jquery": "xx.yy.zz",
...
},
"devDependencies": {
"browserify": "xx.yy.zz"
"browserify-shim": "xx.yy.zz"
...
},
"browser": {
"jquery": "./node_modules/jquery/dist/jquery.js",
"materialize": "./node_modules/materialize-css/bin/materialize.js"
},
"browserify-shim": {
"jquery": "$",
"materialize": "materialize"
},
"browserify": {
"transform": [
"browserify-shim"
]
},
...
in the app.js file I'm then importing jQuery and materialize as usual:
var $ = require('jquery');
require('materialize');
Then just used the regular recipe for gulp and browserify to build them.