0

I'm trying to resurrect an older Laravel project (5.8.38) that used Semantic UI for styling the user interface. Since Semantic UI is no longer being developed, I'm also switching to Fomantic UI. I'd like to use Laravel Mix to build and version my css and js files so that I can profit from cache busting.

So far:

  • I have installed fomantic-ui with NPM
  • I have run npx gulp install to set up semantic.json and a semantic folder in the root of my project folder with all the necessary files, as per Fomantic UI documentation
  • I have run npx gulp build to make sure Fomantic UI is ok building, and it is.

My complete package.json looks like this:

{ "private": true, "scripts": { "dev": "npm run development", "development": "mix", "watch": "mix watch", "watch-poll": "mix watch -- --watch-options-poll=1000", "hot": "mix watch --hot", "prod": "npm run production", "production": "mix --production" }, "devDependencies": { "axios": "^1.7.9", "bootstrap": "^5.3.3", "cross-env": "^5.1", "gulp": "^5.0.0", "jquery": "^3.2", "laravel-mix": "^6.0.49", "less": "^4.2.2", "less-loader": "^12.2.0", "lodash": "^4.17.13", "popper.js": "^1.12", "resolve-url-loader": "^5.0.0", "fomantic-ui": "^2.9.3", "vue": "^3.5.13", "webpack": "^5.98.0" } } 

Then, to test Laravel Mix, I put a mix.less("semantic/semantic.less", "resources/assets/less/compiled/test.css"); in my webpack.mix.js. I would expect it to build a Fomantic UI distribution and produce the same result as npx gulp build above.

Instead, I get this error:

✖ Mix Compiled with some errors in 33.67ms ERROR in mix Module not found: Error: Can't resolve '/Users/psychomachine/Development/psychomachine/rf-new/semantic/semantic.less' in '/Users/psychomachine/Development/psychomachine/rf-new' Did you miss the leading dot in 'resolve.extensions'? Did you mean '[".*",".wasm",".mjs",".js",".jsx",".json"]' instead of '["*",".wasm",".mjs",".js",".jsx",".json"]'? webpack compiled with 1 error 

I'm assuming this is a webpack configuration issue, but I don't have a webpack config file in my root, and since I'm using Laravel Mix, I don't think I need a separate webpack config file anyway.

So, following the logic of the error message, I tried adding this to webpack.mix.js:

mix.webpackConfig({ resolve: { extensions: [ ".*", ".wasm", ".mjs", ".js", ".jsx", ".json", "", ".webpack.js", ".web.js", ".less", ], }, }); 

But then the error gets even more absurd:

ERROR in mix Module not found: Error: Can't resolve '/Users/psychomachine/Development/psychomachine/rf-new/semantic/semantic.less' in '/Users/psychomachine/Development/psychomachine/rf-new' Did you miss the leading dot in 'resolve.extensions'? Did you mean '[".*",".wasm",".mjs",".js",".jsx",".json",".*","",".webpack.js",".web.js",".less"]' instead of '["*",".wasm",".mjs",".js",".jsx",".json",".*","",".webpack.js",".web.js",".less"]'? 

At this point, I don't know how to proceed. I'd be enormously grateful for any tips that you may have.

1
  • Hi there, it's me again. May I ask for the full webpack.mix.js, and test.css? Also, just to be sure, will you still need semantic in your project? Thanks. Commented Feb 25 at 8:49

0

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.