Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
1 task done
agustif opened this issue Nov 26, 2017 · 9 comments
Closed
1 task done

Comments

@agustif
Copy link

agustif commented Nov 26, 2017

  • 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
Copy link
Member

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

@agustif
Copy link
Author

agustif commented Nov 28, 2017

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
Copy link

jaqua commented Dec 9, 2017

@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
Copy link
Author

agustif commented Dec 9, 2017

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
Copy link

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
Copy link
Author

agustif commented Jan 31, 2018

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

@jameskennethrobinson
Copy link

jameskennethrobinson commented Jan 31, 2018 via email

@ajsharp
Copy link

ajsharp commented Apr 21, 2018

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
Copy link

@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.

@lock lock bot locked as resolved and limited conversation to collaborators May 16, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

6 participants