webpack 3 Error Cannot resolve 'file' or 'directory'

Question

I'm trying to make a boilerplate with the newest packages(please don't post a link to a "really good boilerplate", my needs are very specific). I'm trying to upgrade and use webpack 3, I followed the instruction to migrate, I've reach a dead end,things were working well in webpack 1.

Relevant section from package.json

"webpack": "^3.11.0"
"foundation-sites": "^6.4.4-rc1",
"jquery": "^3.3.1",
"node-sass": "^4.7.2",
"react": "^16.2.0",
"react-dom": "^16.2.0",
"react-router": "^4.2.0"

webpack.config.js

'use strict';
var webpack = require("webpack");
const path = require("path");

module.exports = {
    context: __dirname,
    entry: [
        'jquery/dist/jquery.min',
        'foundation-sites/dist/js/foundation.min',
        './app/app',
    ],
    output: {
        path: __dirname,
        filename: './public/bundle.js'
    },
    resolve: {
        modules: [__dirname, 'node_modules'],
        alias: {
            Main: 'app/components/Main.jsx',
            applicationStyles: 'app/styles/app.scss',
        },
        extensions: ['*','.js','.jsx','.scss']
    },
    externals: {
        jquery: 'jQuery'
    },
    plugins: [
        new webpack.ProvidePlugin({
            '$': 'jquery',
            'jQuery': 'jquery',
            'window.jQuery': 'jquery'
        })
    ],
    module: {
        rules: [
        {
            test: /\.jsx?$/,
            loader: 'babel-loader',
            exclude: /node_modules/,
            query: {
              cacheDirectory: true,
              presets: ['react', 'env']
            }
        },
        {
            test:/\.(s*)css$/,
            use:['style-loader','css-loader', 'sass-loader'],
            options: {
                includePaths: path.resolve(__dirname,'./node_modules/foundation-sites/scss')
            }
        }
        ]
  },
devtool: 'cheap-module-eval-source-map',
};

I'm getting this error, when I run webpack

ERROR in ./app/app.jsx
Module parse failed: F:\tmp\BP\app\app.jsx Line 13: Unexpected token <
You may need an appropriate loader to handle this file type.
|
| ReactDOM.render(
|     <Router history={hashHistory}>
|         <Route path="/" component={Main}>
|         </Route>
 @ multi main

ERROR in ./~/jquery/dist/jquery.min.js
Module not found: Error: Cannot resolve 'file' or 'directory' C:\Users\andro\AppData\Roaming\npm\node_modules\webpack\buildin\amd-options.js in F:\tmp\BP\node_modules\jquery\dist
 @ ./~/jquery/dist/jquery.min.js 2:86650-86660

I believe the problem is probably because of the resolve.extentions, I tried to add the empty string, but webpack3 doesn't allow it, i think this is what is making the webpack unable to find the files, because while searching for the files, it concatenates * at the end of the file and output "unable to find file". and also if I add the correct extension to the any of the entry files, it fails to find them. I even tried to open git bash with "as admin" option thinking that it might be a rights issue, same error.

EDIT: added project structure image.

Thanks in advance :)

Have you got `babel-preset-env` install as a dev dependency ? — Aaqib, Feb 22 '18 at 22:30
yes, "babel-core": "^6.26.0", "babel-loader": "^7.1.2", "babel-preset-env": "^1.6.1", "babel-preset-react": "^6.24.1", — Omar Awamry, Feb 22 '18 at 22:32
Have you tried creating `.babelrc` in the root directory where your `webpack.config.js` is and give it a `{ "presets": ["react", "env"] }` delete `query: {...}` from `webpack.config.js` — Aaqib, Feb 22 '18 at 22:39
Are `jquery` and `foundation-sites` packages stored under `node_modules` or did you create those two directories yourself in the root of your app? If they are installed via npm, then you need to add `/node_modules/` to the start of their paths. `/node_modules/jquery/dist/jquery.min.js`. And the path will be relative to where your `webpack.config.js` file is. Can you post your project structure? — Chase DeAnda, Feb 22 '18 at 22:43
I already have the file, and it has exactly what u typed, tried it with and w/o the query option for babel-loader. neither of them worked. — Omar Awamry, Feb 22 '18 at 22:44
Looks like `path.resolve(__dirname,'./node_modules/jquery/dist/jquery.min')` might work. Does webpack `resolve` work in the `entry` config like that? I haven't ever seen that. — Chase DeAnda, Feb 22 '18 at 22:45
@ChaseDeAnda I double checked the location for the modules, they all checkout, they're all inside node_modules, i didnt customize anything, here is the project structure https://i.imgur.com/mNnw0uP.png — Omar Awamry, Feb 22 '18 at 23:15
@ChaseDeAnda , I added the path resolve to the entry files, same exact error — Omar Awamry, Feb 22 '18 at 23:19
The missing files are not the ones in the entry, they're being added on their own by included packages, but webpack by force concatenates whatever is in resolve.extentions and then tries to find them. — Omar Awamry, Feb 22 '18 at 23:23
`exclude: /node_modules/,` is probably the cause. Your resolve config and loaders are not correct. — , Feb 25 '18 at 13:41

webpack 3 Error Cannot resolve 'file' or 'directory'

0 Answers0