Webpack-cli: [BUG]: ERROR in main: Can't resolve `./src`

[bahtou]

Describe the bug
I have the following project folder structure:

my-app/
├─ .webpack/
│  ├─ index.js
│  ├─ development.js
│  ├─ production.js
├─ node_modules/
├─ src/
│  ├─ index.tsx
├─ package.json

When I use .webpack/index.js to import a specific environment configuration I get the following error:

ERROR in main
Module not found: Error: Can't resolve './src' in '/Users/<path-to-project>/my-app'

To Reproduce

package.json

"@webpack-cli/serve": "^1.0.1-rc.0",
"webpack": "^5.0.0-rc.0",
"webpack-cli": "^4.0.0-rc.0",
"webpack-dev-server": "^3.11.0"

.webpack/index.js

module.exports = (env, arg) => {
  const { mode } = arg;
  const config = require(`./${mode}`);

  return config;
};

.webpack/development.js

module.exports = {
  entry:  path.resolve(__dirname, '../src/index.tsx'),
  output: {
    path: path.resolve(__dirname, '../build/'),
    filename: 'index.js'
  },
  devtool: 'source-map',
  devServer: {
    inline: true,
    port: 8080,
    contentBase: path.resolve(__dirname, '../src')
  },
  module: {
      rules: [
          { test: /\.tsx?$/, loader: 'awesome-typescript-loader' }
      ]
  },
  resolve: {
    modules: [
      '/Users/<path-to-project>/my-app/src',
      'node_modules'
    ],
    extensions: ['.wasm', '.mjs', '.js', '.jsx', '.ts', '.tsx', '.json'],
  }
};

> webpack serve --config .webpack/index.js --mode development

Expected behavior

Expected the src directory to be resolved. If instead .webpack/index.js has the configuration there is no error that shows up.

Please paste the results of webpack-cli info here, and mention other relevant information

System:
    OS: macOS 10.15.6
    CPU: (8) x64 Intel(R) Core(TM) i7-4870HQ CPU @ 2.50GHz
    Memory: 451.53 MB / 16.00 GB
  Binaries:
    Node: 14.5.0 - ~/.nvm/versions/node/v14.5.0/bin/node
    Yarn: 1.22.4 - /usr/local/bin/yarn
    npm: 6.14.8 - ~/.nvm/versions/node/v14.5.0/bin/npm
  Browsers:
    Firefox: 81.0
    Safari: 14.0
  Packages:
    case-sensitive-paths-webpack-plugin: ^2.3.0 => 2.3.0
    clean-webpack-plugin: ^3.0.0 => 3.0.0
    extract-css-chunks-webpack-plugin: ^4.7.5 => 4.7.5
    html-webpack-plugin: ^4.5.0 => 4.5.0
    webpack: ^5.0.0-rc.0 => 5.0.0-rc.0
    webpack-cli: ^4.0.0-rc.0 => 4.0.0-rc.0
    webpack-dev-server: ^3.11.0 => 3.11.0
    webpack-merge: ^5.1.4 => 5.1.4

[snitin315]

can you once try if the following is working ? -

​>​ webpack serve --config .webpack/index.js --mode development --entry src/index.tsx

[snitin315]

Thanks for reporting I'm looking into it.

[bahtou]

> webpack serve --config .webpack/index.js --mode development --entry src/index.tsx

[webpack-cli]
Error: you provided an invalid entry point.

[webpack-cli] ValidationError: Invalid configuration object. Webpack has been initialized using a configuration object that does not match the API schema.
 - configuration.entry should be an non-empty array.
   -> All modules are loaded upon startup. The last one is exported.

[webpack-cli] Promise rejection: TypeError: Cannot read property 'compilers' of undefined
[webpack-cli] TypeError: Cannot read property 'compilers' of undefined
    at Object.getDevServerOptions [as default] (/Users/<path-to-project>/my-app/node_modules/@webpack-cli/serve/lib/getDevServerOptions.js:15:32)
    at Object.startDevServer [as default] (/Users/<path-to-project>/my-app/node_modules/@webpack-cli/serve/lib/startDevServer.js:22:59)
    at /Users/<path-to-project>/my-app/node_modules/@webpack-cli/serve/lib/index.js:21:33

[bahtou]

Have a look at this to reproduce the issue: https://github.com/bahtou/webpack-server-issue/tree/master

[snitin315]

I found the bug, CLI was adding .js extension for non-js files. Hence making the entry point as src/index.tsx.js which is incorrect. I'm sending a fix.
https://github.com/webpack/webpack-cli/blob/0f13ab5ddd9e28e5e7095721d086a58aebaf98a5/packages/webpack-cli/lib/utils/GroupHelper.js#L19-L21

[alexander-akait]

@snitin315 Feel free to send a PR, I think we should remove whole logic, because it is invalid

[anshumanv]

EDIT: https://github.com/webpack/webpack-cli/pull/1837/ should fix this, @snitin315 can you check once I push?

I'll fix CI today

[snitin315]

#1837 should fix this, @snitin315 can you check once I push?

Sure 👍🏻

[gairTanm]

I might be totally out of depth here, but something I found worth noting is that in the following, the defaultEntry paths all end with a .js with index at the start or just index.
https://github.com/webpack/webpack-cli/blob/55d0bd876d014b75c39607fcd08b9bd57e436d92/packages/webpack-cli/lib/webpack-cli.js#L20-L29
Also, the following
https://github.com/webpack/webpack-cli/blob/55d0bd876d014b75c39607fcd08b9bd57e436d92/packages/webpack-cli/lib/webpack-cli.js#L219-L224
traces back to
https://github.com/webpack/webpack-cli/blob/55d0bd876d014b75c39607fcd08b9bd57e436d92/packages/webpack-cli/lib/utils/GroupHelper.js#L19-L21
as @snitin315 mentioned. This (IMO) means that the webpack-cli supports just index.js as an entry point. Finally, I would also like to work on this issue if possible. A fix would be to take in as the argument the entryPath for the webpack-cli constructor. I'm just starting out on Webpack, any pointers appreciated :)

[alexander-akait]

@gairTanm I think it is fixed https://github.com/webpack/webpack-cli/pull/1856, can you try?

[gairTanm]

On it :+1:

[alexander-akait]

Fixed, let's close, but if somebody faced with the issue again, feel free to open a new issue

[bahtou]

@evilebottnawi what will I need to do get this working (from above)? https://github.com/bahtou/webpack-server-issue/tree/master

I have updated the package
"webpack": "^5.0.0-rc.3",
"webpack-cli": "^4.0.0-rc.0",
"@webpack-cli/serve": "^1.0.1-rc.0",
"webpack-dev-server": "^3.11.0",

[alexander-akait]

@bahtou we will do new rc release in Monday, so you will need just update :smile:

[gairTanm]

@bahtou I'm not a 100 percent sure, but the following might work before Monday :):
https://webpack.js.org/guides/installation/#bleeding-edge

[bahtou]

@gairTanm bleeding-edge is ` "webpack": "^5.0.0-rc.3", correct? From the above repo: https://github.com/bahtou/webpack-server-issue/tree/master, I'm still getting an error. Could be something else?

[anshumanv]

@gairTanm no

@bahtou it's webpack core, the issue was in CLI (this repo). Hence once CLI RC is released this should be fixed.

[gairTanm]

@bahtou I think you'll have to install the webpack-cli bleeding edge. The issue, if I understand it correctly, was with webpack-cli. Nevertheless, I think it will be better to wait for the rc release on Monday.

[wtchnm]

Hello!

The issue persists for me in the production build.

Steps to reproduce:

• Clone https://github.com/wtchnm/Hotter/.
• yarn install
• yarn build

Package versions:

"webpack": "5.0.0",
"webpack-cli": "4.0.0"

[anshumanv]

Hey @wtchnm 👋

Thanks for the report, so I cloned your repo and it seems to be some issue with configs in .webpack folder, I moved the prod config to the project root and changed first line of index.tsx to

import App from "./components/App";

And it compiled fine, you can use this as a workaround for now, will look into the behaviour in depth.

[wtchnm]

Hello @anshumanv!

Thanks for investigating. I followed your directions and webpack compiled fine.
The real problem is the .webpack folder, if I rename it to.config the compilation is successful.

[wtchnm]

If I convert my webpack production config from a function to a plain object, webpack also compiles fine.

The bug appears to be on this line: https://github.com/webpack/webpack-cli/blob/d32aedadff112fdde7e3dd5e257bfc903b1c0286/packages/webpack-cli/lib/groups/ConfigGroup.js#L190
The configuration resolved on https://github.com/webpack/webpack-cli/blob/d32aedadff112fdde7e3dd5e257bfc903b1c0286/packages/webpack-cli/lib/groups/ConfigGroup.js#L165 is overwrite.

[anshumanv]

Thanks for the insights, will fix it in near future.

[wtchnm]

@anshumanv, I can make a PR to check if newOptionsObject['options'] is already defined in line 190, would this be enough?

[anshumanv]

Sure, feel free to PR. I don't think that will be enough since we're just adding another property on the object before assigning it again. You can start with creating a test which will fail now and debug and fix it.

[bahtou]

Confirming the bug still persists on my current setup. Changing the filename .webpack to .config fixes it.

[alexander-akait]

@anshumanv can you open a new issue in webpack-cli repo and describe workaround and we will fix the issue in near future

[bahtou]

confirming that this is working for my configuration as expected

"webpack": "^5.1.3",
"webpack-cli": "^4.1.0",
"@webpack-cli/serve": "^1.0.1",
"webpack-dev-server": "^3.11.0"

thanks everyone!

Edit
no need for @webpack-cli/serve (+1 @evilebottnawi)

[alexander-akait]

@bahtou you don't need @webpack-cli/serve