require is not a function when using with html-loader

[ranwawa]

package.json

  "dependencies": {
    "css-loader": "^2.1.1",
    "extract-loader": "^3.1.0",
    "file-loader": "^3.0.1",
    "html-loader": "^0.5.5",
    "style-loader": "^0.23.1",
    "webpack-cli": "^3.3.0",
    "webpack": "^4.30.0"
  }

webpack.config.js

  entry: './index.html',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'main.js',
  },
  module: {
    rules: [
      {
        test: /\.html$/,
        use: [ 'file-loader', 'extract-loader', {
            loader: 'html-loader',
            options: {attrs: [':data-href'],},},],
      },
      {
        test: /\.css/,
        use: [ 'style-loader', 'css-loader', ],

index.html

<div data-href="./test.css"></div>

output

WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for ea
ch environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/concepts/mode/

ERROR in ./index.html
Module build failed (from ./node_modules/extract-loader/lib/extractLoader.js):
NonErrorEmittedError: (Emitted value instead of an instance of Error) TypeError: require(...) is not a function
    at runLoaders (C:\Users\LJ\Desktop\extracthtml\node_modules\webpack\lib\NormalModule.js:298:13)
    at C:\Users\LJ\Desktop\extracthtml\node_modules\loader-runner\lib\LoaderRunner.js:367:11
    at C:\Users\LJ\Desktop\extracthtml\node_modules\loader-runner\lib\LoaderRunner.js:233:18
    at context.callback (C:\Users\LJ\Desktop\extracthtml\node_modules\loader-runner\lib\LoaderRunner.js:111:13)
    at Object.<anonymous> (C:\Users\LJ\Desktop\extracthtml\node_modules\extract-loader\lib\extractLoader.js:40:7)
    at Generator.throw (<anonymous>)
    at step (C:\Users\LJ\Desktop\extracthtml\node_modules\babel-runtime\helpers\asyncToGenerator.js:17:30)
    at C:\Users\LJ\Desktop\extracthtml\node_modules\babel-runtime\helpers\asyncToGenerator.js:30:13

---

it's will be ok

• when i removed the attrs: [':data-href'], in the webpack.config.js

• when i removed the data-href="./test.css" in the index.html

[army8735]

face the same problem