Webpack encore compatibility issue.

[kasperkowalski]

Hi

I've tried to run the plugin along with my webpack-encore configuration. But unfortunately i'm gettimg this error message:

Syntax Error: ModuleNotFoundError: Module not found: Error: Can't resolve '~/Users/..../frontend/assets/node_modules/iconfont-webpack-plugin/placeholder.svg' in '/Users/..../frontend/assets/src/common'

I've checked the path and the file is there however it's empty.

My webpack-encore config looks like this:

[...]
    .enablePostCssLoader((options) => {
        options.postcssOptions = (loader) => {
            return {
                plugins: [
                    new IconfontWebpackPlugin({
                        resolve: loader.resolve,
                        fontNamePrefix: 'custom-',
                        enforcedSvgHeight: 1000,
                    })
                ]
            }
        }
        return options;
    })

icons.scss:

.icon-ranking:before {
  font-icon: url('icons/ranking.svg');
}

.icon-rating:before {
  font-icon: url('icons/rating.svg');
}

and package.json deDependencies section

  "devDependencies": {
    "@symfony/webpack-encore": "^0.33.0",
    "autoprefixer": "^9.0.0",
    "css-loader": "^5.0.1",
    "iconfont-webpack-plugin": "^5.0.0",
    "postcss": "^8.2.4",
    "sass": "^1.32.0",
    "sass-loader": "^10.1.0"
  },

TIA for any advice

[jantimon]

The ~ is wrong maybe a outdated css-loader option?

[sanderquirynen]

I get the same type of error when upgrading from postcss-loader version 3.x to 4.x (also on 5.x).

Sadly the newer version of Webpack Encore (1.x) requires postcss-loader ^4.0.0 || ^5.0.0.