Impossible to get working NextJS+Semantic-UI-less via next.config.js webpack rules.

[agustif]

• I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior

I expect to be able to use semantic-ui-less and load it's related files via config.next.js webpack rules and plugins.

Current Behavior

Context

I'm hitting some walls myself with my next.config.js to use webpack to load all semantic-ui-less related files...

`
const { WebpackBundleSizeAnalyzerPlugin } = require('webpack-bundle-size-analyzer')
const { ANALYZE } = process.env
// const ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
webpack: function (config) {
config.module.rules.push({
test: /.less$/,
use: [
{ loader: 'style-loader', options: { } },
{ loader: 'css-loader', options: { } },
{ loader: 'less-loader', options: { } },
]
})
config.module.rules.push({
test: /.jpe?g$|.gif$|.png$|.ttf$|.eot$|.svg$/,
use: [{
loader: 'file-loader',
options: {
name: '[name].[ext]?[hash]'
}
}]
})
config.module.rules.push({
test: /.woff(2)?(?v=[0-9].[0-9].[0-9])?$/,
use: [{
loader: 'url-loader',
options: {
limit: '10000',
mimetype: 'application/fontwoff'
}
}]
})
// config.plugins.push(
// new ExtractTextPlugin({
// filename: "[name].[contenthash].css",
// disable: process.env.NODE_ENV === "development"
// })
// )

if (ANALYZE) {
  config.plugins.push(
    new WebpackBundleSizeAnalyzerPlugin('stats.txt')
  )
}
return config

}
}

`
Depending on the order of the less loaders I get different errors...

style, css, less
`Unexpected token &
/Users/agustif/Documents/Git/cruceritis/node_modules/semantic-ui-less/semantic.less:14
& { @import "definitions/globals/reset"; }
^

SyntaxError: Unexpected token &
at createScript (vm.js:80:10)
at Object.runInThisContext (vm.js:139:10)
at Module._compile (module.js:588:28)
at Module._compile (/Users/agustif/Documents/Git/cruceritis/node_modules/source-map-support/source-map-support.js:492:25)
at Object.Module._extensions..js (module.js:635:10)
at Module.load (module.js:545:32)
at tryModuleLoad (module.js:508:12)
at Function.Module._load (module.js:500:3)
at Module.require (module.js:568:17)
at require (internal/module.js:11:18)`

less-style-css
`Error in semantic-ui-less/semantic.less
Module build failed:

// load the styles
var content = require("!!../css-loader/index.js??ref--6-2!./semantic.less");
^
Unrecognised input
in /Users/agustif/Documents/Git/cruceritis/node_modules/semantic-ui-less/semantic.less (line 4, column 12)`

css-less-style
`Error in semantic-ui-less/semantic.less
Module build failed:

// load the styles
var content = require("!!./semantic.less");
^
Unrecognised input
in /Users/agustif/Documents/Git/cruceritis/node_modules/semantic-ui-less/semantic.less (line 4, column 12)`

css-style-less
`Error in semantic-ui-less/semantic.less
Module build failed: Unknown word (5:1)

3 | // load the styles
4 | var content = require("!!../less-loader/dist/cjs.js??ref--6-2!./semantic.less");

5 | if(typeof content === 'string') content = [[module.id, content, '']];
| ^
6 | // Prepare cssTransformation
7 | var transform;
8 | `

"dependencies": { "next": "^4.1.4", "react": "^16.1.1", "react-dom": "^16.1.1", "semantic-ui-react": "^0.77.0" }, "devDependencies": { "css-loader": "^0.28.7", "extract-text-webpack-plugin": "^3.0.2", "file-loader": "^1.1.5", "find-in-files": "^0.4.0", "less": "^2.7.3", "less-loader": "^4.0.5", "ncp": "^2.0.0", "semantic-ui-less": "^2.2.12", "style-loader": "^0.19.0", "url-loader": "^0.6.2", "webpack-bundle-size-analyzer": "^2.7.0" } }

My Environment

Tech	Version
next	4.1.4
node	8.7.0
OS	macOS High Sierra 10.13.1
browser	Chrome
react	16.1.1

[timneutkens]

Please search for less sass external styles in the issue tracker. There are multiple issues explaining why this won't work 🙂 Example: #3131

[agustif]

OK, will do, but is then someone using Semantic-UI-React and NextJS together? The examples only link in the head to the cloudflare latest release and are done with it, not very much production like, or is it?

[jaqua]

@timneutkens So do I understand you correctly, that it is impossible to work with a local semantic ui CSS file? I also want to avoid loading a css file from CDN server.

I tried to do it like it is shown in the semantic ui docs: https://react.semantic-ui.com/usage#semantic-ui-css-package

import 'semantic-ui-css/semantic.min.css'

But this doesn't work. And the nextJS example doesn't use local CSS files...

[agustif]

I don't know I just decided for now external cdn will do it...

So I ended up using style-jsx to override some personal css over semantic, but it works well and I can always get that css on the code and preprocess it with next.config.js, but I don't need it until production so it's not on my table right now

[jameskennethrobinson]

Would be great to update the example with bundled style loading, especially now that #3578 has been merged!

Pulling the styles from the cdn really impacts loading performance.

[agustif]

Seeing the new sass/less stuff I could try a stab on it, still with external cdn in my codebase

[jameskennethrobinson]

Thanks!

…

On Tue, Jan 30, 2018 at 4:54 PM Agusti Fernandez ***@***.***> wrote: Seeing the new sass/less stuff I could try a stab on it, still with external cdn in my codebase — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub <#3340 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AHu0RdhNQ_GCX0kITlUJTZO91_SMV_cLks5tP7m1gaJpZM4Qq1o0> .

[ajsharp]

I'm using next 5.1.0, semantic-ui-react 0.79.1 and semantic-ui-css 2.3.1, and it causes the next command to crash. I'm using this example: https://github.com/zeit/next.js/tree/a691dd06cfba0a847b946158adf471e41ce56b59/examples/with-semantic-ui.

 ERROR  Failed to compile with 16 errors                                                                                           18:34:55

These relative modules were not found:

* ./themes/default/assets/images/flags.png in ./node_modules/semantic-ui-css/semantic.min.css
* ./themes/default/assets/fonts/icons.woff2 in ./node_modules/semantic-ui-css/semantic.min.css
* ./themes/default/assets/fonts/icons.woff in ./node_modules/semantic-ui-css/semantic.min.css
* ./themes/default/assets/fonts/icons.ttf in ./node_modules/semantic-ui-css/semantic.min.css
* ./themes/default/assets/fonts/icons.svg in ./node_modules/semantic-ui-css/semantic.min.css
* ./themes/default/assets/fonts/outline-icons.eot in ./node_modules/semantic-ui-css/semantic.min.css
* ./themes/default/assets/fonts/outline-icons.woff2 in ./node_modules/semantic-ui-css/semantic.min.css
* ./themes/default/assets/fonts/icons.eot in ./node_modules/semantic-ui-css/semantic.min.css
* ./themes/default/assets/fonts/outline-icons.ttf in ./node_modules/semantic-ui-css/semantic.min.css
* ./themes/default/assets/fonts/outline-icons.svg in ./node_modules/semantic-ui-css/semantic.min.css
* ./themes/default/assets/fonts/brand-icons.eot in ./node_modules/semantic-ui-css/semantic.min.css
* ./themes/default/assets/fonts/brand-icons.woff2 in ./node_modules/semantic-ui-css/semantic.min.css
* ./themes/default/assets/fonts/brand-icons.woff in ./node_modules/semantic-ui-css/semantic.min.css
* ./themes/default/assets/fonts/brand-icons.ttf in ./node_modules/semantic-ui-css/semantic.min.css
* ./themes/default/assets/fonts/brand-icons.svg in ./node_modules/semantic-ui-css/semantic.min.css
* ./themes/default/assets/fonts/outline-icons.woff in ./node_modules/semantic-ui-css/semantic.min.css

/Users/ajsharp/code/vinvin/node_modules/next/dist/server/on-demand-entry-handler.js:141
      }, []).map(function (c) {
             ^
TypeError: Cannot read property '1' of null
    at /Users/ajsharp/code/vinvin/node_modules/next/dist/server/on-demand-entry-handler.js:142:61
    at Array.map (<anonymous>)
    at Compiler.<anonymous> (/Users/ajsharp/code/vinvin/node_modules/next/dist/server/on-demand-entry-handler.js:141:14)
    at Compiler.applyPlugins (/Users/ajsharp/code/vinvin/node_modules/tapable/lib/Tapable.js:61:14)
    at Watching._done (/Users/ajsharp/code/vinvin/node_modules/webpack/lib/Compiler.js:105:17)
    at onCompiled (/Users/ajsharp/code/vinvin/node_modules/webpack/lib/Compiler.js:55:18)
    at applyPluginsAsync.err (/Users/ajsharp/code/vinvin/node_modules/webpack/lib/Compiler.js:510:14)
    at next (/Users/ajsharp/code/vinvin/node_modules/tapable/lib/Tapable.js:202:11)
    at Compiler.<anonymous> (/Users/ajsharp/code/vinvin/node_modules/webpack/lib/CachePlugin.js:78:5)
    at Compiler.applyPluginsAsyncSeries (/Users/ajsharp/code/vinvin/node_modules/tapable/lib/Tapable.js:206:13)
    at compilation.seal.err (/Users/ajsharp/code/vinvin/node_modules/webpack/lib/Compiler.js:507:11)
    at Compilation.applyPluginsAsyncSeries (/Users/ajsharp/code/vinvin/node_modules/tapable/lib/Tapable.js:195:46)
    at self.applyPluginsAsync.err (/Users/ajsharp/code/vinvin/node_modules/webpack/lib/Compilation.js:680:19)
    at Compilation.applyPluginsAsyncSeries (/Users/ajsharp/code/vinvin/node_modules/tapable/lib/Tapable.js:195:46)
    at self.applyPluginsAsync.err (/Users/ajsharp/code/vinvin/node_modules/webpack/lib/Compilation.js:671:11)
    at Compilation.applyPluginsAsyncSeries (/Users/ajsharp/code/vinvin/node_modules/tapable/lib/Tapable.js:195:46)
    at self.applyPluginsAsync.err (/Users/ajsharp/code/vinvin/node_modules/webpack/lib/Compilation.js:666:10)
    at next (/Users/ajsharp/code/vinvin/node_modules/tapable/lib/Tapable.js:202:11)
    at Compilation.<anonymous> (/Users/ajsharp/code/vinvin/node_modules/extract-text-webpack-plugin/dist/index.js:275:11)
    at Compilation.applyPluginsAsyncSeries (/Users/ajsharp/code/vinvin/node_modules/tapable/lib/Tapable.js:206:13)
    at sealPart2 (/Users/ajsharp/code/vinvin/node_modules/webpack/lib/Compilation.js:662:9)
    at next (/Users/ajsharp/code/vinvin/node_modules/tapable/lib/Tapable.js:202:11)
error An unexpected error occurred: "Command failed.
Exit code: 1
Command: sh
Arguments: -c next
Directory: /Users/[PATH]
Output:
".

Is using semantic-ui just completely unsupported?

[shoaibmerchant]

@ajsharp I hit the same problem. You just need to install url-loader and file-loader as development dependencies to make it work. That is missing in the example repository, I will send in a PR once I get a chance.