Modelesq Modelesq - 4 months ago 139
Javascript Question

Webpack with multiples entries cannot resolve 'file' or 'directory'

This is my first time setting up webpack, and so far I'm just confused. I'm trying to gather all of my jsx files in their respective files, but webpack seems to think they don't exist...

webpack --display-error-details


I get this errors that look like so:

ERROR in Entry module not found: Error: Cannot resolve 'file' or 'directory' ./static/js/base in /Users/Maude/Projects/School/entry
resolve file
/Users/Maude/Projects/School/entry/static/js/base.js doesn't exist
/Users/Maude/Projects/School/entry/static/js/base.jsx doesn't exist
/Users/Maude/Projects/School/entry/static/js/base is not a file
resolve directory
/Users/Maude/Projects/School/entry/static/js/base/package.json doesn't exist (directory description file)
directory default file index
resolve file index in /Users/Maude/Projects/School/entry/static/js/base
/Users/Maude/Projects/School/entry/static/js/base/index doesn't exist
/Users/Maude/Projects/School/entry/static/js/base/index.jsx doesn't exist
/Users/Maude/Projects/School/entry/static/js/base/index.js doesn't exist


My static file structure looks like this:

static
|- js
|- base
|- base.jsx
|- classes
|- classes.jsx
|- locations.jsx
|- students
|- students.jsx
|- network.jsx
|- teachers
|- teachers.jsx
|- less


And lastly my webpack.config.js file:

module.exports = {
entry: {
base: './static/js/base',
classes: './static/js/classes',
students: './static/js/students',
teachers: './static/js/teachers',
},

output: {
path: './static/bundles',
filename: '[name].js'
},

devServer: {
inline: true,
port: 3333
},

module: {
loaders: [
{
test: /\.js$/,
exclude: '/node_modules/',
loader: 'babel',
query: {
presets: ['es2015', 'react']
}
}
]
},

resolve: {
modulesDirectories: ['/node_modules/'],
extensions: ['', '.js', '.jsx'],
},

}


Why am I receiving errors like
ERROR in Entry module not found: Error: Cannot resolve 'file' or 'directory'
when they're clearly there? Help obi-wan!

Also my package.json:

{
"name": "--",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "webpack-dev-server"
},
"author": "",
"license": "ISC",
"devDependencies": {
"babel": "^6.5.2",
"babel-core": "^6.11.4",
"babel-loader": "^6.2.4",
"babel-preset-es2015": "^6.9.0",
"babel-preset-react": "^6.11.1",
"bower": "^1.7.9",
"gulp": "^3.9.1",
"gulp-bower": "0.0.13",
"gulp-changed": "^1.3.1",
"gulp-concat": "^2.6.0",
"gulp-cssmin": "^0.1.7",
"gulp-html-replace": "^1.6.1",
"gulp-less": "^3.1.0",
"gulp-load-plugins": "^1.2.4",
"gulp-plumber": "^1.1.0",
"gulp-react": "^3.1.0",
"gulp-rename": "^1.2.2",
"gulp-replace": "^0.5.4",
"gulp-shell": "^0.5.2",
"gulp-uglify": "^1.5.4",
"webpack": "^1.13.1",
"webpack-dev-server": "^1.14.1"
}
}

Answer

i think you only need the one entry file, base.jsx, unless you have an extra index file in your structure.

webpack will crawl through the imports and build up the tree structure from that

entry: './static/js/base.jsx'

edit: for a single entry point you want the file that has something like:

React.render(<App />, document.getElementById('app')

from your packaged.json, it looks like it might be index.js, if so then you put in webpack.config.js

entry: './index.js'

then webpack should pull in the entire react app by following the import statements to build the complete bundle file.

btw. there is no real need to use .jsx file extensions. Just use .js. It means you also don't need to worry about the extensions field in webpack

btw2. why are you mixing gulp and webpack? Never seen that before. Maybe better to go either the gulp/browserify route, or just stick to webpack.

Comments