Critial Dependency: the request of a dependency is an expression when upgrading to 4.0.0-beta.3 from beta.2 #3361

ZachMayry · 2021-05-28T16:19:25Z

This is a bug
This is a modification request

Code

// webpack.config.js
const webpack = require('webpack')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin')
const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin')

const babelLoaderOptions = {
  rootMode: 'upward',
  plugins: [['react-refresh/babel', { skipEnvCheck: true }]],
}

const extensions = ['.tsx', '.ts', '.js']

module.exports = {
  mode: 'development',
  entry: ['./src/index.js', './src/index.scss'],
  output: {
    publicPath: '/',
  },
  stats: 'errors-only',
  devServer: {
    client: {
      overlay: true,
    },
    historyApiFallback: true,
    port: 3000,
    static: false,
  },
  plugins: [
    new HtmlWebpackPlugin({ template: 'raw-loader!src/index.html' }),
    new webpack.HotModuleReplacementPlugin(),
    new ReactRefreshWebpackPlugin(),
  ],
  module: {
    rules: [
      {
        test: /\.ts(x?)$/,
        exclude: /node_modules/,
        use: [
          {
            loader: 'babel-loader',
            options: babelLoaderOptions,
          },
          {
            loader: 'ts-loader',
            options: {
              projectReferences: true,
            },
          },
        ],
      },
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: babelLoaderOptions,
        },
      },
      {
        test: /\.s?css$/,
        use: [
          'style-loader',
          {
            loader: 'css-loader',
            options: {
              sourceMap: true,
            },
          },
          {
            loader: 'sass-loader',
            options: {
              sourceMap: true,
            },
          },
        ],
      },
      {
        test: /\.html$/,
        use: [
          {
            loader: 'ejs-html-loader',
          },
        ],
      },
      {
        test: /\.(ico|png|jpg|jpeg|gif)$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 8192,
            },
          },
        ],
      },
      {
        test: /\.(eot|svg|ttf|woff|woff2)$/,
        use: [
          {
            loader: 'file-loader',
          },
        ],
      },
    ],
  },
  resolve: {
    extensions,
    plugins: [new TsconfigPathsPlugin({ extensions })],
  },
}

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Sample</title>
  </head>

  <body>
    <div id="application" class="root">
      Sample
    </div>
  </body>
</html>

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

Expected Behavior

Loads the website

Actual Behavior

For Bugs; How can we reproduce the behavior?

Not entirely sure other than to use webpack-dev-server 4.0.0-beta.3, with the above webpack configuration.
I'm not able to find out exactly what is causing this issue given the limited output.

For Features; What is the motivation and/or use-case for the feature?

The text was updated successfully, but these errors were encountered:

alexander-akait · 2021-05-28T16:28:47Z

No related to webpack-dev-server and please do not ignore questions in the issue template

alexander-akait · 2021-05-28T16:30:14Z

You rewrite require on import using named export, but you need to set namedExport to true for css-loader and style-loader if you want to use named export, in near future we reduce options and will rexport named export always

ZachMayry · 2021-05-28T19:09:54Z

So looking at it a bit more, this code does not work at all anyway. But at least the web server doesn't crash with it.

// index.js
import { white } from '../../theme/_colors.scss'

But that still doesn't resolve the fact that this appears

Edited the issue to reflect it after removing the problematic code

ZachMayry · 2021-05-28T19:21:48Z

After some more digging. I've found the cause to be related to the experimental plugin @pmmmwh/react-refresh-webpack-plugin

Upgrading it to 0.5.0-beta.8 loads the site correctly, but produces this overlay error. If that means we can close the issue at this time, then that makes sense to me!

alexander-akait · 2021-05-28T19:25:26Z

If you provide example of repo I can look at code, maybe we need fix the problem in react-refresh-webpack-plugin

ZachMayry · 2021-05-28T19:52:52Z

If you provide example of repo I can look at code, maybe we need fix the problem in react-refresh-webpack-plugin

The problem with that is that our repo at work is private. I'm trying to isolate things in a such a way that I can find the issue. Updating react-refresh-webpack-plugin solves one symptom but I've completely removed that and other plugins to no avail. Is there a way to get more verbose logging than just Critical dependency: the request of a dependency is an expression

If I disable the overlay, everything is fine so I think I was mistaken in thinking that plugin caused any issues

alexander-akait · 2021-05-29T12:39:47Z

It means you have the same file, I think problem in resolve options, can you show me them?

ZachMayry · 2021-05-29T15:19:59Z

I think this is all we have? it's not a very complex webpack setup

  resolve: {
    extensions,
    plugins: [new TsconfigPathsPlugin({ extensions: ['.tsx', '.ts', '.js'] })],
  },

The production cli output is definitely more helpful.

WARNING in ../../../node_modules/draftjs-md-converter/dist/index.js 1:292-296
Critical dependency: the request of a dependency is an expression
 @ ./components/post/RichTextEditor.js 7:0-64 12:28-39 24:21-32
 @ ./components/compose/ComposeScreen/ComposeScreen.js 18:0-55 472:40-54
 @ ./components/compose/ComposeScreen/index.js 9:0-44 38:42-55
 @ ./components/Routes.js 7:0-46 157:38-45 160:38-45
 @ ./components/App.js 4:0-30 81:39-45
 @ ./components/Root/index.tsx 4:0-25 14:394-397
 @ ./index.js 4:0-37 17:41-45

I tried upgrading draftjs-md-converter but that makes the problem worse. Apparently it has dependency on path and process for no aparent reason. Others are having the same issue kadikraman/draftjs-md-converter#73

We've been on 1.4.1 for years with no reason to upgrade, and now even less of a reason to upgrade that.

Would you consider this a piece of tech debt that we need to resolve before upgrading webpack-dev-sever?

alexander-akait · 2021-05-31T13:38:00Z

Would you consider this a piece of tech debt that we need to resolve before upgrading webpack-dev-sever?

Yep, circular dependencies, we can't fix it here

ZachMayry · 2021-05-31T15:49:28Z

So I guess the thing is, it's a warning on the CLI and doesn't cause any issues. But when using the webpack dev server, it shows as an error that I cannot "X" out of. Turning the overlay off would be the workaround.

alexander-akait · 2021-05-31T15:56:48Z

Please create minimum reproducible test repo, I will look

ZachMayry · 2021-05-31T17:11:29Z

Sure. I’ll post back when I create it

ZachMayry · 2021-06-01T14:52:53Z

https://github.com/ZachMayry/webpack-dev-server-error-reproduction

ZachMayry · 2021-06-03T21:13:33Z

Hey there @alexander-akait, have you gotten a chance to look at the repo?

alexander-akait · 2021-06-03T21:39:50Z

Tomorrow (5.06)

aerialist7 · 2021-06-07T04:35:43Z

I have the same problem on 4.0.0-beta.3

alexander-akait · 2021-06-07T12:01:35Z

Update "@pmmmwh/react-refresh-webpack-plugin": "^0.5.0-rc.0", and "draftjs-md-converter": "^1.5.1",, then install "path-browserify": "^1.0.1", put:

 resolve: {
    fallback: {
      path: require.resolve("path-browserify"),
    }
  },

in webpack.config.js and all works find

ZachMayry · 2021-06-07T15:49:27Z

@alexander-akait I don't think this is a solution because [email protected] causes too many issues.
I don't think the developer did some things right becuase we get this error now when trying to open the page with draftjs-md-converter

process is not defined

alexander-akait · 2021-06-07T15:50:56Z

I don't have this problem, please check my steps again, anyway this problem with draftjs-md-converter, because this package not for browser usage, we can't fix it here

ZachMayry · 2021-06-07T15:53:35Z

I understand that but the Critical Dependency: the request of a dependency is an expression is an error on the overlay that you can't close (even though everything works fine) and is a warning when building with the cli. Why the difference?

alexander-akait · 2021-06-07T15:56:12Z

Got it, let's allow to close overlay, now you can use:

client: {
      overlay: {
        warnings: false
      },
    },

also we have ignoreWawnings option in webpack.config.js you can filter it

ZachMayry · 2021-06-07T16:13:25Z

Thanks! Adding that package to ignoreWarnings definitely helps

ZachMayry changed the title ~~Importing SASS variables into JS no longer works when upgrading to 4.0.0-beta3 from beta2~~ Critial Dependency: the request of a dependency is an expression when upgrading to 4.0.0-beta3 from beta2 May 28, 2021

ZachMayry changed the title ~~Critial Dependency: the request of a dependency is an expression when upgrading to 4.0.0-beta3 from beta2~~ Critial Dependency: the request of a dependency is an expression when upgrading to 4.0.0-beta.3 from beta.2 May 28, 2021

ZachMayry changed the title ~~Critial Dependency: the request of a dependency is an expression when upgrading to 4.0.0-beta.3 from beta.2~~ Critial Dependency: the request of a dependency is an expression when upgrading to 4.0.0-beta.3 from beta.2 while using react-refresh May 28, 2021

ZachMayry changed the title ~~Critial Dependency: the request of a dependency is an expression when upgrading to 4.0.0-beta.3 from beta.2 while using react-refresh~~ Critial Dependency: the request of a dependency is an expression when upgrading to 4.0.0-beta.3 from beta.2 May 28, 2021

ZachMayry closed this as completed May 31, 2021

ZachMayry reopened this May 31, 2021

alexander-akait closed this as completed Jun 7, 2021

alexander-akait reopened this Jun 7, 2021

This was referenced Jun 17, 2021

feat: add overlay console #3332

Closed

feat: add option to close overlay #3433

Merged

alexander-akait closed this as completed in #3433 Jun 18, 2021

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Critial Dependency: the request of a dependency is an expression when upgrading to 4.0.0-beta.3 from beta.2 #3361

Critial Dependency: the request of a dependency is an expression when upgrading to 4.0.0-beta.3 from beta.2 #3361

ZachMayry commented May 28, 2021 •

edited

Loading

alexander-akait commented May 28, 2021

alexander-akait commented May 28, 2021

ZachMayry commented May 28, 2021 •

edited

Loading

ZachMayry commented May 28, 2021 •

edited

Loading

alexander-akait commented May 28, 2021

ZachMayry commented May 28, 2021 •

edited

Loading

alexander-akait commented May 29, 2021

ZachMayry commented May 29, 2021 •

edited

Loading

alexander-akait commented May 31, 2021

ZachMayry commented May 31, 2021

alexander-akait commented May 31, 2021

ZachMayry commented May 31, 2021

ZachMayry commented Jun 1, 2021 •

edited

Loading

ZachMayry commented Jun 3, 2021

alexander-akait commented Jun 3, 2021

aerialist7 commented Jun 7, 2021

alexander-akait commented Jun 7, 2021

ZachMayry commented Jun 7, 2021

alexander-akait commented Jun 7, 2021

ZachMayry commented Jun 7, 2021 •

edited

Loading

alexander-akait commented Jun 7, 2021

ZachMayry commented Jun 7, 2021

Critial Dependency: the request of a dependency is an expression when upgrading to 4.0.0-beta.3 from beta.2 #3361

Critial Dependency: the request of a dependency is an expression when upgrading to 4.0.0-beta.3 from beta.2 #3361

Comments

ZachMayry commented May 28, 2021 • edited Loading

Code

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

Expected Behavior

Actual Behavior

For Bugs; How can we reproduce the behavior?

For Features; What is the motivation and/or use-case for the feature?

alexander-akait commented May 28, 2021

alexander-akait commented May 28, 2021

ZachMayry commented May 28, 2021 • edited Loading

ZachMayry commented May 28, 2021 • edited Loading

alexander-akait commented May 28, 2021

ZachMayry commented May 28, 2021 • edited Loading

alexander-akait commented May 29, 2021

ZachMayry commented May 29, 2021 • edited Loading

alexander-akait commented May 31, 2021

ZachMayry commented May 31, 2021

alexander-akait commented May 31, 2021

ZachMayry commented May 31, 2021

ZachMayry commented Jun 1, 2021 • edited Loading

ZachMayry commented Jun 3, 2021

alexander-akait commented Jun 3, 2021

aerialist7 commented Jun 7, 2021

alexander-akait commented Jun 7, 2021

ZachMayry commented Jun 7, 2021

alexander-akait commented Jun 7, 2021

ZachMayry commented Jun 7, 2021 • edited Loading

alexander-akait commented Jun 7, 2021

ZachMayry commented Jun 7, 2021

ZachMayry commented May 28, 2021 •

edited

Loading

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

ZachMayry commented May 28, 2021 •

edited

Loading

ZachMayry commented May 28, 2021 •

edited

Loading

ZachMayry commented May 28, 2021 •

edited

Loading

ZachMayry commented May 29, 2021 •

edited

Loading

ZachMayry commented Jun 1, 2021 •

edited

Loading

ZachMayry commented Jun 7, 2021 •

edited

Loading