Next.js: Next 6 breaks styled-jsx with sass plugin

[jakegibson]

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

Expected Behavior

Should be able to upgrade next 6 and still use styled-jsx with sass

Current Behavior

Working with next 5.1.0 upgrading to next 6 breaks importing a scss file to be used in styled-jsx
example

import style from './componentName.scss';

in component: <styled jsx>{style}</style>

On next 6 I get 'style is undefined'

package.json
"extract-text-webpack-plugin": "^3.0.2",
"extracted-loader": "^1.0.3",
"node-sass": "^4.7.2",
"postcss": "^6.0.16",
"postcss-cssnext": "^3.0.2",
"postcss-loader": "^2.0.10",
"sass-loader": "^6.0.6",
"styled-jsx-css-loader": "^0.3.0"
"styled-jsx-plugin-sass": "^0.2.2",
"autoprefixer": "^8.2.0",

babelrc
`{ "presets": [ [ "next/babel", { "preset-env": { "modules": "commonjs" } } ] ], "plugins": [ [ "styled-jsx/babel", { "plugins": [ ["styled-jsx-plugin-sass", { "sassOptions": { "includePaths": ["./styles"], "precision": 2 } } ] ] } ] ] }

next.config.js
```const ExtractTextPlugin = require('extract-text-webpack-plugin');

const dev = process.env.NODE_ENV !== 'production';
const path = require('path');
const getRoutes = require('./routes');

module.exports = {
exportPathMap: getRoutes,
webpack: (config) => {
config.module.rules.push({
test: /.scss$/,
use: [
{
loader: 'emit-file-loader',
options: {
name: 'dist/[path][name].[ext]',
},
},
'babel-loader',
'styled-jsx-css-loader',
'postcss-loader',
],
});
return config;
},
};```

Steps to Reproduce (for bugs)

1.
2.
3.
4.

Context

Your Environment

| Tech | Version |
|---------|---------|
| next | 6 |
| node | 8.10.0 |
| OS | mac and windows |
| browser | |
| etc | |

[rashidul0405]

You may check this package: https://github.com/zeit/next-plugins/tree/master/packages/next-sass

[jakegibson]

I saw that, but prefer the automatic name spacing that styled-jsx provides without having to import every classname with css modules. As well as not having to update 50+ pages/components
className="myClass" with styled-jsx vs import style from './style.css className={style.className}

[rschlaefli]

Edit: Seems that this was in our case caused by another babel plugin (specifically transform-react-constant-elements, https://github.com/zeit/styled-jsx/issues/85).

This seems to affect us too (but a little differently): we @import 'src/theme.scss; an scss file with theme settings in most of our components and, only after deploying the application, the layout completely breaks. Everything works fine locally. It seems that there is a 404 GET request for a https://domain.com/src/theme file which obviously doesn't exist.

The generated css still seems to include the variable names instead of the values from the theme file, which breaks the layout: .message { font-weight: bold; } .errorMessage { color: $color-error-font;}

[timneutkens]

Can you provide a repository so I can check it out easily?

[timneutkens]

Can you try next@canary

[jakegibson]

Same issue on canary, I'll try to make a repo tomorrow

[codinronan]

Hey guys, any updates on this? Still happening in 6.0.3

[timneutkens]

It’s close to impossible to help if you don’t provide an example repository. Saying something doesn’t work while the issue is still open and asking for updates without providing a way to reproduce doesn’t help solve the issue. Instead try providing a repository to reproduce, like I asked for already in this issue 👍🏻

[codinronan]

@timneutkens Given https://github.com/zeit/styled-jsx/issues/425 and https://github.com/zeit/next.js/issues/4299 and https://github.com/zeit/next.js/issues/4335 I would have thought you were aware of the issue since you replied to them and at least one of those seems like the same issue, and the suggestion to use Canary also suggests you guys thought you had a fix. I didn't jump on to a thread, splatter my brains over it and leave.

I am building a repo now.

[jakegibson]

Sorry work is crazy and I haven't gotten a chance to setup a repo, but a couple notes. Not using the global option <style jsx global> fixed it for everything except production builds. (Using static generated)

[blackbing]

I have same problem. and @timneutkens point out my problem. check out this.: https://github.com/zeit/next.js/issues/4239#issuecomment-392468298

If you use babel-node check out this: https://github.com/zeit/next.js/issues/4239#issuecomment-392515782

thanks to @timneutkens

[codinronan]

Echoing @blackbing and @timneutkens, that change to the babel config fixed everything on my side. @jakegibson unless you have further issues I am willing to bet this fixes it for you too and can close the issue.

Specifically this is the change that fixed it: https://github.com/zeit/next.js/issues/4239#issuecomment-392468298

[timneutkens]

Awesome, I'll just close this. If it doesn't work feel free to provide a full reproduction.

Thank you for verifying @codinronan @blackbing! ❤️

[blackbing]

@timneutkens sorry I think this issue should reopen. It could reproduce on this repo: https://github.com/blackbing/next-with-jest-style-jsx-error

and I also create an issue https://github.com/zeit/next.js/issues/4501 for "with-jest + with-style-jsx-scss" error.

the only difference of configs between test and development is

"preset-env": {
   "modules": "commonjs"
},

so it can reproduce if run NODE_ENV=test yarn dev, will show the same error with @jakegibson mentioned.

@jakegibson please help to confirm if it is the same error you got.

[codinronan]

@blackbing yep I can repro that as well, but I think the issue is not in next - I believe it is a problem with styled-jsx. Truthfully I'm not sure where to start there; saying that, styled-jsx 3 is almost a full rewrite from v2, so it may not repro in the new version. That would be nice!

[timneutkens]

@giuseppeg I'm guessing this is because they transpile import/export with Babel before styled-jsx touches it right 🤔

[giuseppeg]

@timneutkens probably, the commonjs plugin is not rewriting style correctly:

var _style2 = _interopRequireDefault(require("./style"));

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

var _default = function _default() {
  return _react.default.createElement("div", {
    className: "hello"
  }, _react.default.createElement("p", null, "Hello World"), _react.default.createElement(_style.default, {
    styleId: _style2.default.__hash,
    css: style
  }));
};

see the 3rd last line css: style, maybe @blackbing @codinronan or @jakegibson can submit a PR to styled-jsx with a failing test?

In the meantime you folks can switch to the commonjs syntax for styled-jsx:

module.exports = css`div { color: red }`

fwiw the issue is not with styled-jsx-plugin-sass

[blackbing]

ok, I've update the repo and narrow down the problem. https://github.com/blackbing/next-with-jest-style-jsx-error

[blackbing]

@giuseppeg I can help to submit a PR, but I'm not sure where should I add it? Is it in next.js or styled-jsx?

[giuseppeg]

@blackbing styled-jsx You can add the test here https://github.com/zeit/styled-jsx/blob/master/test/index.js
Install babel-preset-env as a dev dependency and use transform like this:

await transform('./fixtures/somefixture.js', { presets: [["babel-preset-env", { "modules": "commonjs" }]] })

[blackbing]

@giuseppeg it looks pass. https://github.com/blackbing/styled-jsx/commit/0feb15f5be267571583a459033bdb6696cef9c80 or do I miss something?

[giuseppeg]

yea it seems to be correct. Probably in Next.js preset-env is transforming things too early.
I'd try to use styled-jsx as a preset and run it after preset-env. I left a comment on your branch