I am very new to JS and everything written here is clearly understandable to me , thank you for this.
though i am getting exception in build for module not found for third party java script libraries .
It's hard to say what exactly is wrong with your build, as I can't see your gulp or Webpack config file and what you are actually doing there.
But the error message is pretty clear, you miss jquery and slick-carousel modules. Maybe you declare them globally like window.jQuery as it usual for WordPress websites, but Webpack doesn't know about them. You might need to install them via npm or expose them via expose-loader.
Hey Anton ,
I am very new to JS and everything written here is clearly understandable to me , thank you for this.
though i am getting exception in build for module not found for third party java script libraries .
dev-to-uploads.s3.amazonaws.com/i/...
Thanks, man.
It's hard to say what exactly is wrong with your build, as I can't see your gulp or Webpack config file and what you are actually doing there.
But the error message is pretty clear, you miss
jquery
andslick-carousel
modules. Maybe you declare them globally likewindow.jQuery
as it usual for WordPress websites, but Webpack doesn't know about them. You might need to install them via npm or expose them via expose-loader.stackoverflow.com/questions/290801...
Check this, it might be your case
Hi Anton,
i am using babel-loader..
this is my gulpfile
var gulp = require('gulp'),
settings = require('./settings'),
webpack = require('webpack'),
browserSync = require('browser-sync').create(),
postcss = require('gulp-postcss'),
rgba = require('postcss-hexrgba'),
autoprefixer = require('autoprefixer'),
cssvars = require('postcss-simple-vars'),
nested = require('postcss-nested'),
cssImport = require('postcss-import'),
mixins = require('postcss-mixins'),
colorFunctions = require('postcss-color-function');
gulp.task('styles', function() {
return gulp.src(settings.themeLocation + 'css/style.css')
.pipe(postcss([cssImport, mixins, cssvars, nested, rgba, colorFunctions, autoprefixer]))
.on('error', (error) => console.log(error.toString()))
.pipe(gulp.dest(settings.themeLocation));
});
gulp.task('scripts', function(callback) {
webpack(require('./webpack.config.js'), function(err, stats) {
if (err) {
console.log(err.toString());
}
console.log(stats.toString());
callback();
});
});
gulp.task('watch', function() {
browserSync.init({
notify: false,
proxy: settings.urlToPreview,
ghostMode: false
});
gulp.watch('..//*.php', function() {
browserSync.reload();
});
gulp.watch(settings.themeLocation + 'css//.css', gulp.parallel('waitForStyles'));
gulp.watch([settings.themeLocation + 'js/modules/.js', settings.themeLocation + 'js/scripts.js'], gulp.parallel('waitForScripts'));
});
gulp.task('waitForStyles', gulp.series('styles', function() {
return gulp.src(settings.themeLocation + 'style.css')
.pipe(browserSync.stream());
}))
gulp.task('waitForScripts', gulp.series('scripts', function(cb) {
browserSync.reload();
cb()
}))
*and following is my webpack configuration *
const path = require('path'),
settings = require('./settings');
module.exports = {
entry: {
App: settings.themeLocation + "js/scripts.js"
},
output: {
path: path.resolve(__dirname, settings.themeLocation + "js"),
filename: "scripts-bundled.js"
},
module: {
rules: [
{
test: /.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env']
}
}
}
]
},
mode: 'development'
}
following is how i am importing the 3rd party libraries ..
import $ from 'jquery';
import slick from 'slick-carousel';
i tried to use the plugin configuration in webpack setting also but no luck.
Hi Anton,
i added following line in my webpack configuration with absolute path of my node_modules and now its able to build..
resolve: {
modules: [
'__dirname','/Users/rajat.c.singhaccenture.com/Local\ Sites/cp-unique-convent-school/app/public/build-setup/node_modules'
]