I keep getting this issue when trying to use gulp-webpack to transpile jsx / js to browser level.
I have updated both NPM and nodeJS to the current latest versions (3.8.9 and 6.1.0)
The error it outputs is:
ERROR in Entry module not found: Error: Cannot resolve module 'babel' in C:\xampp\htdocs\project\tools
The weird thing is that it is looking in the correct folder (the node_modules folder is in this directory) but it doesn't find it at all.
My folder structure is devided into 3 folders namely
The app folder contains the browser level code (js / css)
The src folder contains higher level languages (scss / jsx)
The tools folder contains my gulpfile, node_modules, package.json, bower.json and bower_components
My gulp task for transpiling jsx / js to browser level
gulp.task('react', function() {
return gulp.src('../src/js/react/index.js')
.pipe(webpack({
entry:
{
app: './../src/js/react/index.js'
},
output: {
path: __dirname + "../app/js/react",
publicPath: '/',
filename: 'bundle.js'
},
module: {
loaders: [{
exclude: /(node_modules|bower_components)/,
loader: 'babel',
cacheDirectory: true,
query: {
presets: [
'babel-preset-es2015',
'babel-preset-react'
].map(require.resolve)
}
}]
},
resolveLoader: {
modulesDirectories: [
'../../../tools/node_modules'
]
},
resolve: {
root: __dirname,
modulesDirectories: ['node_modules', 'bower_components'],
extensions: ["", ".jsx", ".js"]
}
}))
.pipe(gulp.dest('../app/js/react'));
});
My package.json file
{
"name": "setup-nvdv",
"version": "2.0.0",
"description": "All around coding setup",
"main": "index.php",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "Neal van der Valk",
"license": "ISC",
"devDependencies": {
"babel": "^6.5.2",
"babel-core": "^6.8.0",
"babel-loader": "^6.2.4",
"babel-preset-es2015": "^6.6.0",
"babel-preset-react": "^6.5.0",
"babel-preset-stage-1": "^6.5.0",
"babel-runtime": "^6.6.1",
"del": "^2.2.0",
"gulp": "^3.9.1",
"gulp-autoprefixer": "^3.1.0",
"gulp-babel": "^6.1.2",
"gulp-cached": "^1.1.0",
"gulp-concat": "^2.6.0",
"gulp-cssnano": "^2.1.2",
"gulp-imagemin": "^3.0.0",
"gulp-jshint": "^2.0.0",
"gulp-livereload": "^3.8.1",
"gulp-minify-css": "^1.2.4",
"gulp-notify": "^2.2.0",
"gulp-plumber": "^1.1.0",
"gulp-purifycss": "^0.2.0",
"gulp-rename": "^1.2.2",
"gulp-replace": "^0.5.4",
"gulp-sass": "^2.3.1",
"gulp-sourcemaps": "^1.6.0",
"gulp-ttf2woff": "^1.1.0",
"gulp-uglify": "^1.5.3",
"gulp-watch": "^4.3.5",
"gulp-webpack": "^1.5.0",
"imagemin-mozjpeg": "^6.0.0",
"jquery": "^2.2.3",
"jshint": "^2.9.2",
"lodash": "^4.12.0",
"react": "^15.0.2",
"react-dom": "^15.0.2",
"react-redux": "^4.4.5",
"redux": "^3.5.2",
"webpack": "^1.13.0"
},
"dependencies": {
"babel-preset-es2015": "^6.6.0",
"babel-preset-react": "^6.5.0"
}
}
This took me a total of 3 days but here we are and this works!
I separated the config file of webpack which is presented below. The thing that is vital is having the resolve and resolveLoader before rest!
var path = require('path');
var webpack = require('webpack');
module.exports = {
entry: [
// "babel-polyfill",
[__dirname, '.', '..', 'src', 'js', 'react', 'index.js'].join(path.sep)
],
resolve: {
modulesDirectories: ["../tools/node_modules", "../tools/node_modules/babel"]
},
resolveLoader: {
root: path.resolve(__dirname, 'node_modules')
},
output: {
path: [__dirname, '.', '..', 'app', 'js', 'react'].join(path.sep),
filename: 'bundle.js'
},
module: {
loaders: [
{
include: path.resolve(__dirname, '../src/js'),
exclude: /(node_modules)/,
test: /\.jsx?$/,
loader: 'babel',
query: {
presets: [
'babel-preset-stage-1',
'babel-preset-es2015',
'babel-preset-react'
].map(require.resolve)
}
}
]
}
};
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With