Frontend Building

rts

Hi, I've recently started work on a little custom extension for my forum. I followed the guide and used the flarum-cli to build the skeleton before starting work. However, it seems to be all referencing a future version of Flarum (I think). I'm brand new to Flarum dev but not to PHP/JS dev but I basically had to use an old version of the 'flarum-webpack-config' package just to make it build and add loads of manual Babel dependencies.

It feels very hacky and I just genuinely need to know if I'm missing. When I first built the frontend it kept making reference to flarum.reg which was undefined which it seems to do completely be default. Moving the webpack config dependency back and adding the Babel bits so it'll actually build solved the problem so I was hoping to get some advice.

My dev dependencies for Yarn are basically this:
"devDependencies": { "@babel/core": "^7.28.5", "@babel/plugin-proposal-class-properties": "^7.18.6", "@babel/plugin-proposal-private-methods": "^7.18.6", "@babel/plugin-transform-react-jsx": "^7.27.1", "@babel/plugin-transform-runtime": "^7.28.5", "@babel/preset-env": "^7.28.5", "@babel/preset-react": "^7.28.5", "@babel/preset-typescript": "^7.28.5", "babel-loader": "^10.0.0", "flarum-webpack-config": "^1.0.0", "webpack": "^5.65.0", "webpack-cli": "^4.9.1" },

Whereas the skeleton uses flarum-webpack-config v3 and none of the rest was required. To clarify: it is building, but it feels like I'm doing something wrong.

Am I missing something basically?

clarkwinkelmann

rts I have not yet worked with the new Flarum beta version, I assume the tooling has already been made compatible and there might be some commands or options to use flarum-cli with a specific version.

Whatever version you target, I don't think you should have to add additional packages to packages.json.

The flarum-webpack-config package version 1.x uses Webpack 4 and creates extensions compatible with all Flarum 1.x versions.

The flarum-webpack-config package version 2.x uses Webpack 5 and it compatible with Flarum 1.2+. This is generally what you would use when creating a new Flarum extension.

I assume 3.x is a new version of the config that works with Flarum 2.x beta.

If you can't get what you need using the cli, what you could do is copy the package.json from any Flarum 1.x extension and start from there.

I see the documentation still shows how to use the config version 1.x and Webpack 4... This part of the documentation should be updated https://docs.flarum.org/extend/frontend#packagejson Either is fine of course, but Webpack 5 is more performant at compiling and creates smaller bundle files and there's generally no need to support the outdated and vulnerable Flarum 1.0 and 1.1.

rts

clarkwinkelmann Brilliant thanks for your help. I'm still running Flarum 1.8 (it's a brand new dev install) so I presume the current stock flarum-cli has just been updated to the upcoming version 2.0 but I was trying to use it to make a 1.8 extension. It just threw me a little bit so I thought I was doing something wrong.

I'll bear that in mind, thanks!