{"action":"closed","issue":{"url":"https://api.github.com/repos/zeit/next.js/issues/3340","repository_url":"https://api.github.com/repos/zeit/next.js","labels_url":"https://api.github.com/repos/zeit/next.js/issues/3340/labels{/name}","comments_url":"https://api.github.com/repos/zeit/next.js/issues/3340/comments","events_url":"https://api.github.com/repos/zeit/next.js/issues/3340/events","html_url":"https://github.com/zeit/next.js/issues/3340","id":276838635,"number":3340,"title":"Impossible to get working NextJS+Semantic-UI-less via next.config.js webpack rules.","user":{"login":"agustif","id":6601142,"avatar_url":"https://avatars3.githubusercontent.com/u/6601142?v=4","gravatar_id":"","url":"https://api.github.com/users/agustif","html_url":"https://github.com/agustif","followers_url":"https://api.github.com/users/agustif/followers","following_url":"https://api.github.com/users/agustif/following{/other_user}","gists_url":"https://api.github.com/users/agustif/gists{/gist_id}","starred_url":"https://api.github.com/users/agustif/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/agustif/subscriptions","organizations_url":"https://api.github.com/users/agustif/orgs","repos_url":"https://api.github.com/users/agustif/repos","events_url":"https://api.github.com/users/agustif/events{/privacy}","received_events_url":"https://api.github.com/users/agustif/received_events","type":"User","site_admin":false},"labels":[],"state":"closed","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":1,"created_at":"2017-11-26T16:48:48Z","updated_at":"2017-11-27T07:15:48Z","closed_at":"2017-11-27T07:15:48Z","author_association":"NONE","body":"- [x] I have searched the [issues](https://github.com/zeit/next.js/issues) of this repository and believe that this is not a duplicate.\r\n\r\n## Expected Behavior\r\nI expect to be able to use semantic-ui-less and load it's related files via config.next.js webpack rules and plugins.\r\n\r\n## Current Behavior\r\n\r\n## Context\r\n<!--- How has this issue affected you? What are you trying to accomplish? -->\r\nI'm hitting some walls myself with my next.config.js to use webpack to load all semantic-ui-less related files...\r\n\r\n`\r\nconst { WebpackBundleSizeAnalyzerPlugin } = require('webpack-bundle-size-analyzer')\r\nconst { ANALYZE } = process.env\r\n// const ExtractTextPlugin = require('extract-text-webpack-plugin');\r\n\r\nmodule.exports = {\r\n  webpack: function (config) {\r\n    config.module.rules.push({\r\n        test: /\\.less$/,\r\n        use: [\r\n          { loader: 'style-loader', options: { } },\r\n          { loader: 'css-loader', options: { } },\r\n          { loader: 'less-loader', options: { } },\r\n      ]\r\n    })\r\n    config.module.rules.push({\r\n        test: /\\.jpe?g$|\\.gif$|\\.png$|\\.ttf$|\\.eot$|\\.svg$/,\r\n        use: [{\r\n            loader: 'file-loader',\r\n            options: {\r\n              name: '[name].[ext]?[hash]'\r\n            }\r\n        }]\r\n    })\r\n    config.module.rules.push({\r\n          test: /\\.woff(2)?(\\?v=[0-9]\\.[0-9]\\.[0-9])?$/,\r\n          use: [{\r\n            loader: 'url-loader',\r\n            options: {\r\n              limit: '10000',\r\n              mimetype: 'application/fontwoff'\r\n            }\r\n        }]\r\n    })\r\n    // config.plugins.push(\r\n    //   new ExtractTextPlugin({\r\n    // filename: \"[name].[contenthash].css\",\r\n    // disable: process.env.NODE_ENV === \"development\"\r\n    //   })\r\n    // )\r\n\r\n    if (ANALYZE) {\r\n      config.plugins.push(\r\n        new WebpackBundleSizeAnalyzerPlugin('stats.txt')\r\n      )\r\n    }\r\n    return config\r\n  }\r\n}\r\n\r\n`\r\nDepending on the order of the less loaders I get different errors...\r\n\r\nstyle, css, less\r\n`Unexpected token &\r\n/Users/agustif/Documents/Git/cruceritis/node_modules/semantic-ui-less/semantic.less:14\r\n& { @import \"definitions/globals/reset\"; }\r\n^\r\n\r\nSyntaxError: Unexpected token &\r\n    at createScript (vm.js:80:10)\r\n    at Object.runInThisContext (vm.js:139:10)\r\n    at Module._compile (module.js:588:28)\r\n    at Module._compile (/Users/agustif/Documents/Git/cruceritis/node_modules/source-map-support/source-map-support.js:492:25)\r\n    at Object.Module._extensions..js (module.js:635:10)\r\n    at Module.load (module.js:545:32)\r\n    at tryModuleLoad (module.js:508:12)\r\n    at Function.Module._load (module.js:500:3)\r\n    at Module.require (module.js:568:17)\r\n    at require (internal/module.js:11:18)`\r\n\r\nless-style-css\r\n`Error in semantic-ui-less/semantic.less\r\nModule build failed: \r\n\r\n// load the styles\r\nvar content = require(\"!!../css-loader/index.js??ref--6-2!./semantic.less\");\r\n          ^\r\nUnrecognised input\r\n      in /Users/agustif/Documents/Git/cruceritis/node_modules/semantic-ui-less/semantic.less (line 4, column 12)`\r\n\r\ncss-less-style\r\n`Error in semantic-ui-less/semantic.less\r\nModule build failed: \r\n\r\n// load the styles\r\nvar content = require(\"!!./semantic.less\");\r\n          ^\r\nUnrecognised input\r\n      in /Users/agustif/Documents/Git/cruceritis/node_modules/semantic-ui-less/semantic.less (line 4, column 12)`\r\n\r\ncss-style-less\r\n`Error in semantic-ui-less/semantic.less\r\nModule build failed: Unknown word (5:1)\r\n\r\n  3 | // load the styles\r\n  4 | var content = require(\"!!../less-loader/dist/cjs.js??ref--6-2!./semantic.less\");\r\n> 5 | if(typeof content === 'string') content = [[module.id, content, '']];\r\n    | ^\r\n  6 | // Prepare cssTransformation\r\n  7 | var transform;\r\n  8 | `\r\n<!--- Providing context helps us come up with a solution that is most useful in the real world -->\r\n`  \"dependencies\": {\r\n    \"next\": \"^4.1.4\",\r\n    \"react\": \"^16.1.1\",\r\n    \"react-dom\": \"^16.1.1\",\r\n    \"semantic-ui-react\": \"^0.77.0\"\r\n  },\r\n  \"devDependencies\": {\r\n    \"css-loader\": \"^0.28.7\",\r\n    \"extract-text-webpack-plugin\": \"^3.0.2\",\r\n    \"file-loader\": \"^1.1.5\",\r\n    \"find-in-files\": \"^0.4.0\",\r\n    \"less\": \"^2.7.3\",\r\n    \"less-loader\": \"^4.0.5\",\r\n    \"ncp\": \"^2.0.0\",\r\n    \"semantic-ui-less\": \"^2.2.12\",\r\n    \"style-loader\": \"^0.19.0\",\r\n    \"url-loader\": \"^0.6.2\",\r\n    \"webpack-bundle-size-analyzer\": \"^2.7.0\"\r\n  }\r\n}\r\n`\r\n## My Environment\r\n| Tech    | Version |\r\n|---------|---------|\r\n| next    |    4.1.4     |\r\n| node    |    8.7.0     |\r\n| OS      |     macOS High Sierra 10.13.1    |\r\n| browser |    Chrome     |\r\n| react     |    16.1.1     |\r\n"}}
{"actor":{"display_login":"timneutkens"}}