How to prepare font ?

[dmitryshelomanov]

fonts included module.exports = __webpack_public_path__ + "link-to-media-fonts";

browser cannot parse it

how to fix ?

(media contains normal ttf font and etc types)

[fivethreeo]

Just refer to them in css. Need more info.

[dmitryshelomanov]

@fivethreeo connected via stylus razzle have assets loaders?

[fivethreeo]

If you use css loader it should load any url() in css via file loader

[fivethreeo]

So set PUBLIC_PATH to static url during build or set it to / to make it relative to the css file

[dmitryshelomanov]

@fivethreeo can you provide example ? current styl enhancer

[dmitryshelomanov]

fonts builded incorrect public/hash.ttf (module.export inside) css contains link to hash above and public/media -> real font

can i use media/font after build ?

[dmitryshelomanov]

browser cant parse it

[fivethreeo]

You need to add styl to fileLoaderExclude in modifyWebpackOptions

[fivethreeo]

module.exports = {
  modifyWebpackOptions({
    options: {
      webpackOptions, // the modified options that will be used to configure webpack/ webpack loaders and plugins
    },
  }) {
    webpackOptions.fileLoaderExclude.push(/\.styl$/)
    return webpackOptions;
  },
};

[dmitryshelomanov]

@fivethreeo already

[Abdulaev]

yeah, sure, i have the same issue with fonts

[fivethreeo]

webpack version?

[Abdulaev]

5.64.2

[Abdulaev]

but it works actually fine with custom webpack

[fivethreeo]

using file-loader in custom?

[fivethreeo]

Could you try it out here?

https://codesandbox.io/s/elated-lucy-se4b1

Then I can see it in action.

[dmitryshelomanov]

ok, i try it

[fivethreeo]

Webpack5 recommends asset modules, but no support in razzle as of yet. But file-loader should still work.

[dmitryshelomanov]

@fivethreeo https://codesandbox.io/s/intelligent-grass-chm3z?file=/src/App.js demo

added stylus to modifyWebpackConfig

added styl to fileLoaderExclude

but st compiled not as module (its locally work fine)

[fivethreeo]

https://codesandbox.io/s/musing-murdock-438uh?file=/src/example.styl

[dmitryshelomanov]

@fivethreeo and now static now from dev server (3001)

[fivethreeo]

In dev media is on 3001

[dmitryshelomanov]

yes, after modify env - all static watching for /

[dmitryshelomanov]

it still the same after running prod build

[fivethreeo]

needs mini css extract aswell

On Tue, 23 Nov 2021 at 16:01, Shelomanov Dmitry @.***> wrote:

it still the same after running prod build

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/jaredpalmer/razzle/issues/1765#issuecomment-976675050, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAAADGQTXDHMBZTX4Q3Q5ELUNOUENANCNFSM5ISDLW4Q .

-- Øyvind Saltvik

[dmitryshelomanov]

i just wanna fix that fonts is loading incorrectly, finally we have this instead of font itself, so browser can't parse it

[dmitryshelomanov]

loading fonts via url() in stylus work incorrectly, the problem is about the processing of url

[fivethreeo]

https://codesandbox.io/s/musing-murdock-438uh?file=/razzle.config.js:415-435

https://webpack.js.org/loaders/css-loader/#importloaders try setting to 1

[dmitryshelomanov]

i did it CLIENT_PUBLIC_PATH=/ PUBLIC_PATH=/ broket dev server

i try to go back on "webpack": "^4.44.1", css-loader style-loader stylus-loader

its work

but new problem - Error module not found : cannot resolve swiper/react

webpack 5 and razzle still not working ? @fivethreeo

[fivethreeo]

Lots of conflicting modules and conf between 4 and 5. Really want separate razzle plugins per webpack version.

[fivethreeo]

Make sure swiper is transpiled. https://razzlejs.org/docs/customization#transpilation-of-external-modules

[dmitryshelomanov]

i did it with webpack 5 and now i have same razzle config with webpack 4 its not working

[fivethreeo]

wp5 has better esmodule support

[fivethreeo]

CLIENT_PUBLIC_PATH is only for dev so no need to change

[dmitryshelomanov]

with CLIENT_PUBLIC_PATH=/ static has url /path (not localhost:3001/path)

[fivethreeo]

yes, don't set it :)

https://codesandbox.io/s/musing-murdock-438uh

Builds correctly With wp5

[fivethreeo]

btw, using yarn or npm?

[dmitryshelomanov]

npm

[fivethreeo]

i always use yarn, codesandbox does too, not sure if it matters

[dmitryshelomanov]

example above works fine problem was in esModule: false, ? now i can upgrade webpack to 5 ?

[fivethreeo]

seems so

[dmitryshelomanov]

@fivethreeo thanks I can start with webpack 5 (npm install --force) and normaly with webpack 4