TypeError: url.replace is not a function

GregNing commented 3 years ago

Node Version: 16.4.2
Yarn Version: 1.22.10
webpack Version: 5.45.1
mini-css-extract-plugin Version: 2.1.0
css-loader Verion: 6.2.0
@fortawesome/fontawesome-free" Version: 5.15.3
css-minimizer-webpack-plugin: 3.0.2

Expected Behavior

Can Compiled successfully

Actual Behavior

Failed to compile

Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
TypeError: url.replace is not a function

Code

loader

const path = require('path');
const webpack = require('webpack');
const { VueLoaderPlugin } = require('vue-loader');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  module: {
    rules: [
      {
        test: /\.s[ac]ss$/i,
        use: [
          MiniCssExtractPlugin.loader,
          "css-loader",
          "postcss-loader",
          "sass-loader"
        ],
      },
      {
        test: /\.vue(\.erb)?$/,
        use: { loader: 'vue-loader' },
        options: {     
          postcss: [require('postcss-cssnext')()]
        }
      },
      {
        test: /\.(eot|svg|ttf|woff|woff2)(\?\S*)?$/,
        loader: 'file-loader',
        use: [
          {
            loader: 'file-loader',
            options: {
              name: 'font/[name].[ext]',
            },
          },
        ],
      },
    ]
  },
  plugins: [
    new webpack
      .ContextReplacementPlugin(/\.\/locale$/, 'empty-module', false, /js$/),
    new VueLoaderPlugin(),
    new MiniCssExtractPlugin()
  ],
  resolve: {
    modules: [
      path.resolve('./app/javascript/'),
    ],
    alias: {
      '~components': path.resolve('./app/javascript/components'),
      '~commons': path.resolve('./app/javascript/commons'),
      '~configuration': path.resolve('./app/javascript/packs/configuration'),
      '~mixins': path.resolve('./app/javascript/mixins'),
      '~mutations': path.resolve('./app/javascript/mutations'),
      '~queries': path.resolve('./app/javascript/queries'),
      '~pages': path.resolve('./app/javascript/pages'),
      '~store': path.resolve('./app/javascript/store')
    },
    extensions: ['*', '.js', '.vue', '.json', '.css', '.sass', '.scss'],
  },
};

application.scss

$fa-font-path: '~@fortawesome/fontawesome-free/webfonts';
@import '~@fortawesome/fontawesome-free/scss/fontawesome'; <--- error in here

How Do We Reproduce?

Please Add css-loader and @fortawesome/fontawesome-free and mini-css-extract-plugin and version on Top then compile.

alexander-akait commented 3 years ago

{
        test: /\.(eot|svg|ttf|woff|woff2)(\?\S*)?$/,
        loader: 'file-loader',
        use: [
          {
            loader: 'file-loader',
            options: {
              name: 'font/[name].[ext]',
            },
          },
        ],
      },

What it the magic?

file-loader is deprecated in favor https://webpack.js.org/guides/asset-modules/

invalid usage, please use:

{
    test: /\.(eot|svg|ttf|woff|woff2)(\?\S*)?$/,
    loader: 'file-loader',
    options: {
      name: 'font/[name].[ext]',
    },
    type: 'javascript/auto'
},

wrong resolve.extensions, * is never work in webpack, please use extensions: ['.vue', '...'],, css/sass/scss should be never used here, also I am strong reccoemnd to use extension in import something from './my.vue' file, you should use URL in import, so extension is required

GregNing commented 3 years ago

@alexander-akait Thank you 😄 . And I changed to this, but still not working in "css-loader": "^6.2.0"

      {
        test: /\.(eot|svg|ttf|woff|woff2)(\?\S*)?$/,
        loader: 'file-loader',
        options: {
          name: 'font/[name].[ext]',
        },
        type: 'javascript/auto'
      },

alexander-akait commented 3 years ago

Can you provide package.json too?

GregNing commented 3 years ago

Sure

package.json

{
  "name": "test-project",
  "private": true,
  "dependencies": {
    "@apollo/client": "^3.3.16",
    "@fortawesome/fontawesome-free": "5.15.3",
    "@popperjs/core": "^2.9.2",
    "@rails/actioncable": "^6.0.0",
    "@rails/activestorage": "^6.0.0",
    "@rails/ujs": "^6.0.0",
    "@rails/webpacker": "^6.0.0-beta.7",
    "@vue/apollo-composable": "^4.0.0-alpha.12",
    "@vue/compiler-sfc": "^3.1.4",
    "apollo-boost": "^0.4.9",
    "apollo-link": "^1.2.14",
    "apollo-link-context": "^1.0.20",
    "apollo-upload-client": "^16.0.0",
    "axios": "^0.21.1",
    "bootstrap": "^5.0.2",
    "bootstrap-vue": "^2.21.2",
    "css-loader": "^6.2.0",
    "css-minimizer-webpack-plugin": "^3.0.2",
    "dotenv": "^10.0.0",
    "file-loader": "^6.2.0",
    "filepond": "^4.28.2",
    "filepond-plugin-file-validate-type": "^1.2.6",
    "filepond-plugin-image-preview": "^4.6.6",
    "graphql": "^15.5.0",
    "graphql-tag": "^2.11.0",
    "js-cookie": "^2.2.1",
    "lodash": "^4.17.20",
    "mini-css-extract-plugin": "^2.1.0",
    "mosha-vue-toastify": "^1.0.11",
    "postcss-flexbugs-fixes": "^5.0.2",
    "postcss-import": "^14.0.2",
    "postcss-loader": "^6.1.1",
    "postcss-preset-env": "^6.7.0",
    "sass": "1.32.13",
    "sass-loader": "^12.1.0",
    "vee-validate": "^4.4.2",
    "vue": "3.1.0-beta.7",
    "vue-axios": "^3.1.1",
    "vue-dropzone": "^1.0.4",
    "vue-filepond": "^7.0.0",
    "vue-google-oauth2": "^1.5.5",
    "vue-i18n": "^9.1.6",
    "vue-loader": "^16.2.0",
    "vue-next": "^0.0.1",
    "vue-router": "4.0.4",
    "vue-style-loader": "^4.1.3",
    "vue-template-compiler": "^2.6.14",
    "vue-toastify": "^1.8.0",
    "vue-upload-image": "^1.1.5",
    "vuex": "4.0.0",
    "vuex-composition-helpers": "^1.0.23",
    "vuex-persistedstate": "^4.0.0-beta.1",
    "webpack": "^5.11.0",
    "webpack-cli": "^4.2.0",
    "yup": "^0.32.9"
  },
  "version": "0.1.0",
  "devDependencies": {
    "@webpack-cli/serve": "^1.5.1",
    "webpack-dev-server": "^3.11.2"
  },
  "babel": {
    "presets": [
      "./node_modules/@rails/webpacker/package/babel/preset.js"
    ]
  },
  "browserslist": [
    "defaults"
  ]
}

alexander-akait commented 3 years ago

Thanks I will look at this in near future

GregNing commented 3 years ago

@alexander-akait Thank you 🙏

alexander-akait commented 3 years ago

Please provide good example, your example is not working: Error: Compiling RuleSet failed: A Rule must not have a 'options' property when it has a 'use' property (at ruleSet[0].rules[0].options: [object Object]), it means you do copy/paste from somewhere and missing something, or provide full stack of the error

Also please run npm ls webpack to check you are really on webpack v5

And how your run webpack?

GregNing commented 3 years ago

I didn't meet this error Error: Compiling RuleSet failed: A Rule must not have a 'options' property when it has a 'use' property (at ruleSet[0].rules[0].options: [object Object]) 🤔

npm ls webpack

├─┬ @rails/webpacker@6.0.0-pre.2
│ ├─┬ babel-loader@8.2.2
│ │ └── webpack@5.45.1 deduped
│ ├─┬ compression-webpack-plugin@7.1.2
│ │ └── webpack@5.45.1 deduped
│ ├─┬ terser-webpack-plugin@5.1.4
│ │ └── webpack@5.45.1 deduped
│ ├─┬ webpack-assets-manifest@5.0.6
│ │ └── webpack@5.45.1 deduped
│ └── webpack@5.45.1 deduped
├─┬ css-loader@5.2.7
│ └── webpack@5.45.1 deduped
├─┬ css-minimizer-webpack-plugin@3.0.2
│ └── webpack@5.45.1 deduped
├─┬ file-loader@6.2.0
│ └── webpack@5.45.1 deduped
├─┬ mini-css-extract-plugin@2.1.0
│ └── webpack@5.45.1 deduped
├─┬ postcss-loader@6.1.1
│ └── webpack@5.45.1 deduped
├─┬ sass-loader@12.1.0
│ └── webpack@5.45.1 deduped
├─┬ vue-loader@16.3.3
│ └── webpack@5.45.1 deduped
├─┬ webpack-cli@4.7.2
│ ├─┬ @webpack-cli/configtest@1.0.4
│ │ └── webpack@5.45.1 deduped
│ └── webpack@5.45.1 deduped
├─┬ webpack-dev-server@3.11.2
│ ├─┬ webpack-dev-middleware@3.7.3
│ │ └── webpack@5.45.1 deduped
│ └── webpack@5.45.1 deduped
└── webpack@5.45.1

I use Ruby so I run like this bundle exec ./bin/webpack-dev-server

alexander-akait commented 3 years ago

Can you provide link on repo? I can't reproduce your problem using your code

thasmo commented 3 years ago

@alexander-akait, I'm experiencing the same issue on a rather large, private project, so it's a bit hard to figure out which parts are needed to reproduce this. I'll try to find out more about it, but for now this is the whole error message:

ERROR in ./assets/base/styles/main.scss
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
TypeError: url.replace is not a function
    at new RelativeURL (/project/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[0].use[1]!/project/node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[0].use[2]!/project/node_modules/resolve-url-loader/index.js??ruleSet[1].rules[0].use[3]!/project/node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[0].use[4]!/project/assets/base/styles/main.scss:374:35)
    at Object.93 (/project/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[0].use[1]!/project/node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[0].use[2]!/project/node_modules/resolve-url-loader/index.js??ruleSet[1].rules[0].use[3]!/project/node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[0].use[4]!/project/assets/base/styles/main.scss:151:56)
    at __webpack_require__ (/project/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[0].use[1]!/project/node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[0].use[2]!/project/node_modules/resolve-url-loader/index.js??ruleSet[1].rules[0].use[3]!/project/node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[0].use[4]!/project/assets/base/styles/main.scss:320:41)
    at /project/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[0].use[1]!/project/node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[0].use[2]!/project/node_modules/resolve-url-loader/index.js??ruleSet[1].rules[0].use[3]!/project/node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[0].use[4]!/project/assets/base/styles/main.scss:392:37
    at Object.<anonymous> (/project/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[0].use[1]!/project/node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[0].use[2]!/project/node_modules/resolve-url-loader/index.js??ruleSet[1].rules[0].use[3]!/project/node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[0].use[4]!/project/assets/base/styles/main.scss:395:12)
    at Module._compile (/project/node_modules/v8-compile-cache/v8-compile-cache.js:192:30)
    at evalModuleCode (/project/node_modules/mini-css-extract-plugin/dist/utils.js:46:10)
    at /project/node_modules/mini-css-extract-plugin/dist/loader.js:299:51
    at /project/node_modules/webpack/lib/Compiler.js:548:11
    at /project/node_modules/webpack/lib/Compiler.js:1118:17

GregNing commented 3 years ago

@alexander-akait https://github.com/GregNing/flash-project I just make one thank you.

olegKusov commented 3 years ago

I'm having same issue with webpack 5+

g3tr1ght commented 3 years ago

In our case it likely was css-loader and we had to switch from using file-loader (or url-loader) to webpack asset modules, as stated here: https://github.com/webpack-contrib/css-loader/releases/tag/v6.0.0 (though it is stated the older way was deprecated, but it looks like it was rather dropped). Our css setup was file-loader, sass-loader, postcss-loader, css-loader, mini-css-extract-plugin. @GregNing might have a different issue as I see neither file-loader, nor url-loader in his configs.

GregNing commented 3 years ago

@olegKusov Thank you. I will try different webpack

@g3tr1ght Thank you. I will switch different version and checkout.

olegKusov commented 3 years ago

@olegKusov Thank you. I will try different webpack

@g3tr1ght Thank you. I will switch different version and checkout.

I Tried different webpack 5 versions . It doesnt help

alexander-akait commented 3 years ago

Here answer on the same problem for HTML https://github.com/webpack/webpack/issues/13851#issuecomment-891095087, WIP on https://github.com/webpack-contrib/mini-css-extract-plugin/issues/793#issuecomment-885444693, sorry for delay

alexander-akait commented 3 years ago

Bug in webpacker, go to node_modules/@rails/webpacker/package/rules/svg.js and change content on:

/* eslint global-require: 0 */
/* eslint import/no-dynamic-require: 0 */

module.exports = {
  test: /\.svg$/i,
  type: 'asset/inline',
  generator: {
    dataUrl: (content) => {
      let optimisedContent = content

      try {
        if (require.resolve('mini-svg-data-uri')) {
          const svgToMiniDataURI = require('mini-svg-data-uri')
          optimisedContent = svgToMiniDataURI(content.toString())
        }
      } catch (e) {
        /* Work out what to print here */
      }

      return optimisedContent.toString()
    }
  }
}

dataUrl should return string, not Buffer https://github.com/webpack/webpack/blob/main/types.d.ts#L278, sorry we can't fix it here

Also if you faced with this issue most likely a problem:

you use file-loader or url-loader and forgot to add type: 'javascript/auto' https://webpack.js.org/guides/asset-modules/ (no top), we strongly recommend migrate to asset modules
you apply loader some loaders twice (check you test/include/exclude)
you use custom function for generate data URI and it is buggy
you use wrong loader for svg, for example @svgr/webpack generate named export, not URL, so if you use this loader for all svg files you will have problems with HTML/CSS/other not js/jsx

Feel free to feedback

webpack-contrib / mini-css-extract-plugin