With last update I am now getting lots of logging during the build.

[richtera]

👋 friend. Welcome to styled-jsx and thanks for contributing!

⚠️ IMPORTANT ⚠️

If you need help or have a question about styled-jsx please ask it on Spectrum https://spectrum.chat/styled-jsx or join our Slack community at https://zeit.chat and ask it in the #next channel.

Before you open a new issue please take a look at our Frequent Asked Questions and open issues.

Remember, often time asking in chat or looking at the FAQ/issues can be *faster than waiting for us to reply to a new issue**.

If you are here to report a bug or request a feature please remove this introductory section and fill out the information below!

---

Do you want to request a feature or report a bug?

Small bug

What is the current behavior?

During build I get notifications of plugins loaded:

[styled-jsx] Loading plugin from path: styled-jsx-plugin-sass

If the current behavior is a bug, please provide the steps to reproduce and possibly a minimal demo or testcase in the form of a Next.js app, CodeSandbox URL or similar

1. Use styled-jsx with the sass plugin.

What is the expected behavior?

No additional logging

Environment (include versions)

• OS: Mac OS node 9.11
• Browser: (this is a build problem)
• styled-jsx (version):

  ├─ next@6.1.1
  │  └─ styled-jsx@2.2.6
  └─ styled-jsx@3.0.2

Did this work in previous versions?

Yes worked fine prior to the last update and it's not a fatal issue, but kind of annoying.

[giuseppeg]

That's expected. Is it logged many times or just one?

[richtera]

I now get about 20 of this messages when I start dev or build

[giuseppeg]

ouch! Can you make a simple test repo that I can clone and try quickly? If there is a bug it should be fairly easy to fix it

[richtera]

It's just a nextjs app. I can put together a demo repo next week I think. But as far as I know I am not doing anything custom with styled-jsx except extracting the css in one place to be able to send a css blob to my cms.

[giuseppeg]

yeah but I don't have a lot of free time recently. So it'd be great if you could set up a repo and integrate a styled-jsx plugin and add a few styles so that I can clone and start to debug right away.

[richtera]

I added a little stack trace to each of the invocations. It looks like babel loads it fresh each time:

[styled-jsx] Loading plugin from path: styled-jsx-plugin-sass at Error: Where
    at /Users/andy/Development/oa-content/app/node_modules/styled-jsx/dist/_utils.js:421:13
    at Array.map (<anonymous>)
    at combinePlugins (/Users/andy/Development/oa-content/app/node_modules/styled-jsx/dist/_utils.js:410:18)
    at setStateOptions (/Users/andy/Development/oa-content/app/node_modules/styled-jsx/dist/_utils.js:545:21)
    at PluginPass.enter (/Users/andy/Development/oa-content/app/node_modules/styled-jsx/dist/babel.js:236:38)
    at newFn (/Users/andy/Development/oa-content/app/node_modules/@babel/traverse/lib/visitors.js:223:21)
    at NodePath._call (/Users/andy/Development/oa-content/app/node_modules/@babel/traverse/lib/path/context.js:64:19)
    at NodePath.call (/Users/andy/Development/oa-content/app/node_modules/@babel/traverse/lib/path/context.js:38:17)
    at NodePath.visit (/Users/andy/Development/oa-content/app/node_modules/@babel/traverse/lib/path/context.js:99:12)
    at TraversalContext.visitQueue (/Users/andy/Development/oa-content/app/node_modules/@babel/traverse/lib/context.js:135:18)
    at TraversalContext.visitSingle (/Users/andy/Development/oa-content/app/node_modules/@babel/traverse/lib/context.js:94:19)
    at TraversalContext.visit (/Users/andy/Development/oa-content/app/node_modules/@babel/traverse/lib/context.js:176:19)
    at Function.traverse.node (/Users/andy/Development/oa-content/app/node_modules/@babel/traverse/lib/index.js:76:17)
    at traverse (/Users/andy/Development/oa-content/app/node_modules/@babel/traverse/lib/index.js:46:12)
    at transformFile (/Users/andy/Development/oa-content/app/node_modules/@babel/core/lib/transformation/index.js:108:27)
    at runSync (/Users/andy/Development/oa-content/app/node_modules/@babel/core/lib/transformation/index.js:35:3)
[styled-jsx] Loading plugin from path: styled-jsx-plugin-sass at Error: Where
    at /Users/andy/Development/oa-content/app/node_modules/styled-jsx/dist/_utils.js:421:13
    at Array.map (<anonymous>)
    at combinePlugins (/Users/andy/Development/oa-content/app/node_modules/styled-jsx/dist/_utils.js:410:18)
    at setStateOptions (/Users/andy/Development/oa-content/app/node_modules/styled-jsx/dist/_utils.js:545:21)
    at PluginPass.enter (/Users/andy/Development/oa-content/app/node_modules/styled-jsx/dist/babel.js:236:38)
    at newFn (/Users/andy/Development/oa-content/app/node_modules/@babel/traverse/lib/visitors.js:223:21)
    at NodePath._call (/Users/andy/Development/oa-content/app/node_modules/@babel/traverse/lib/path/context.js:64:19)
    at NodePath.call (/Users/andy/Development/oa-content/app/node_modules/@babel/traverse/lib/path/context.js:38:17)
    at NodePath.visit (/Users/andy/Development/oa-content/app/node_modules/@babel/traverse/lib/path/context.js:99:12)
    at TraversalContext.visitQueue (/Users/andy/Development/oa-content/app/node_modules/@babel/traverse/lib/context.js:135:18)
    at TraversalContext.visitSingle (/Users/andy/Development/oa-content/app/node_modules/@babel/traverse/lib/context.js:94:19)
    at TraversalContext.visit (/Users/andy/Development/oa-content/app/node_modules/@babel/traverse/lib/context.js:176:19)
    at Function.traverse.node (/Users/andy/Development/oa-content/app/node_modules/@babel/traverse/lib/index.js:76:17)
    at traverse (/Users/andy/Development/oa-content/app/node_modules/@babel/traverse/lib/index.js:46:12)
    at transformFile (/Users/andy/Development/oa-content/app/node_modules/@babel/core/lib/transformation/index.js:108:27)
    at runSync (/Users/andy/Development/oa-content/app/node_modules/@babel/core/lib/transformation/index.js:35:3)

[richtera]

I am thinking maybe just remove the log message :)

[sedubois]

I have the same issue with styled-jsx 3.0.2, these lines are printed 142 times altogether:

[styled-jsx] Loading plugin from path: styled-jsx-plugin-postcss
[styled-jsx] Loading plugin from path: styled-jsx-plugin-stylelint

How can we disable these logs?

[giuseppeg]

Can you prepare a minimal next.js app and wire up a plugin so that I can debug? It should load those only once

[sedubois]

I use Gatsby, and the issue is not systematic, I can't reproduce it reliably so far. I'm running a currently private version based off this template, where I've upgraded all dependencies to latest (except react-icons latest I think, not compatible with Gatsby v1): https://github.com/greglobinski/gatsby-starter-hero-blog/

Also, even if it is only printed once, I would still like to be able to disable these info messages. Could that please be added?

Here's a screenshot I took at one point...

[sedubois]

This reproduces the issue for me:

git clone https://github.com/sedubois/lingui-and-styledjsx-debug
cd lingui-and-styledjsx-debug
yarn
yarn dev

This shows the same as in the image above.

[jeffscottward]

Bump. I get a wall of logs and Im not even using Next.js

[eliasthompson]

Getting this on a lot of my repos as well. Nothing but a massive wall of [styled-jsx] Loading plugin from path: styled-jsx-plugin-sass every time I build.

[ryanfitzer]

The log is in _utils.js on line 488, inside of the combinePlugins function:

log('Loading plugin from path: ' + plugin)

This function is called inside setStateOptions, which is called on every <style jsx/> tag in each file. Hence, the numerous logs.

[sedubois]

Plugins are supposed to be cached so should only load once: https://github.com/zeit/styled-jsx/blob/bd7ae2a7f2ea755c54ecaabbd84b4337a14664f3/src/_utils.js#L636-L637

But for some reason it's not working. Maybe some concurrency involved?

[giuseppeg]

state is per file that's probably why this piece executes once per file i.e. multiple times per compilation. Probably we can keep a module variable and do that only once. I think I did that at the beginning but now I forgot why I switched to the current version.

[eliasthompson]

Also of note (this may be a separate issue), when I run webpack --profile --json > ./stats.json to export a stats file to analyze in a tool, the JSON is invalid because [styled-jsx] Loading plugin from path: styled-jsx-plugin-sass is printed at the top of the file. Only after manually opening the file and removed those logs does the JSON become valid.

[ricardo-cantu]

Bump, This is making build status unreadable

[eliasthompson]

There's a pull request (#518) up that fixes this. Looks like it'll be merged once approved and released shortly after. @giuseppeg any ETA on release?

[giuseppeg]

@eliasthompson I'll try to get this out today or tomorrow

[giuseppeg]

Just released 3.1.1 which includes this fix. If you are using Next.js you will have to wait for this to be merged and a new version of canary to be released https://github.com/zeit/next.js/pull/5617

[atombender]

I just upgraded to 3.1.1, and I'm still getting the excessive log output. Not using Next; just plain Webpack with babel-loader.

[giuseppeg]

oh boy :) @atombender can you put a sample repo together?

[atombender]

@giuseppeg Here. Output:

$ yarn run server
yarn run v1.12.1
$ PORT=3000 NODE_ENV=development node -r @babel/register -r @babel/polyfill ./server.js
Server listening on port 3000
[styled-jsx] Loading plugin from path: styled-jsx-plugin-sass
[styled-jsx] Loading plugin from path: styled-jsx-plugin-sass
[styled-jsx] Loading plugin from path: styled-jsx-plugin-sass
webpack built b9ba76b59637eee11fa7 in 1483ms
ℹ ｢wdm｣: Hash: b9ba76b59637eee11fa7
Version: webpack 4.23.0
Time: 1483ms
Built at: 11/07/2018 12:36:45 PM
    Asset      Size  Chunks             Chunk Names
   app.js  1.44 MiB    main  [emitted]  main
app.js.gz   305 KiB          [emitted]
Entrypoint main = app.js
[0] multi ./src/index.js webpack-hot-middleware/client 40 bytes {main} [built]
[./node_modules/@babel/polyfill/lib/index.js] 893 bytes {main} [built]
[./node_modules/ansi-html/index.js] 4.16 KiB {main} [built]
[./node_modules/debug/src/browser.js] 4.62 KiB {main} [built]
[./node_modules/react-dom/index.js] 1.33 KiB {main} [built]
[./node_modules/react-hot-loader/index.js] 676 bytes {main} [built]
[./node_modules/react/index.js] 190 bytes {main} [built]
[./node_modules/strip-ansi/index.js] 161 bytes {main} [built]
[./node_modules/webpack-hot-middleware/client-overlay.js] (webpack)-hot-middleware/client-overlay.js 2.16 KiB {main} [built]
[./node_modules/webpack-hot-middleware/client.js] (webpack)-hot-middleware/client.js 7.59 KiB {main} [built]
[./node_modules/webpack-hot-middleware/process-update.js] (webpack)-hot-middleware/process-update.js 4.26 KiB {main} [built]
[./node_modules/webpack/buildin/harmony-module.js] (webpack)/buildin/harmony-module.js 573 bytes {main} [built]
[./node_modules/webpack/buildin/module.js] (webpack)/buildin/module.js 497 bytes {main} [built]
[./src/App.js] 3.55 KiB {main} [built]
[./src/index.js] 842 bytes {main} [built]
    + 311 hidden modules
ℹ ｢wdm｣: Compiled successfully.

Looks like one gets a new [styled-jsx] Loading plugin from path: styled-jsx-plugin-sass line for each component loaded that contains <style jsx>.

Node 10.11.0.

[giuseppeg]

@atombender thanks! It seems that the issue in your case is caused by the sassOptions for some reason babel is mutating the includePaths option. It would be great if you could debug this issue a bit since I don't have much free time these days. You can add a console.log(pluginsToString) to node_modules/styled-jsx/lib/_utils.js at line 409.

[atombender]

@giuseppeg It happens here, in styled-jsx-plugin-sass. The settings are:

{
  "sassOptions": {"includePaths": ["./src/styles"]},
  "babel": {
    "location": {
      "start": {"line": 10, "column": 20},
      "end": {"line": 14, "column": 9}
    },
    "vendorPrefixes": true,
    "sourceMaps": false,
    "isGlobal": false,
    "filename": "/Users/alex/Trash/styledtestcase/src/Thing2.jsx"
  }
}

If I comment out the includePaths.push() line, the logging only occurs once.

[giuseppeg]

@atombender great thank you! This is definitely an issue with the sass plugin now. It shouldn't push the same directory multiple times and probably only push new "base" directories. I think that if includePaths has ./src/ for example probably it can easily include files from subfolders so we don't need to push ./src/something/ for example. Can you make a PR to styled-jsx-plugin-sass to fix this?

[atombender]

I can work on a PR, but this might be a breaking change, if people have accidentally used relative imports. For example, @import "foo" will find ./src/foo.scss or whatever today, but not if we fix the path modification.

[ricardo-cantu]

Why not just remove the log? I don't see that it's very useful anyway.

[giuseppeg]

@ricardo-cantu that doesn't solve the real issue. We should fix the behavior above first and then we can discuss about removing the log message if it is still annoying.

@atombender I created an issue on the plugin repo https://github.com/giuseppeg/styled-jsx-plugin-sass/issues/27

[eliasthompson]

The update is great and works for me after a clean npm install, but I'm still getting the Webpack JSON profile issue, so I split that off into a separate issue, #520. Thanks for the fix @giuseppeg!