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

richtera · 2018-08-22T14:29:25Z

👋 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

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.

The text was updated successfully, but these errors were encountered:

giuseppeg · 2018-08-24T08:01:54Z

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

richtera · 2018-08-24T08:59:57Z

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

giuseppeg · 2018-08-29T06:46:45Z

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 · 2018-08-30T13:09:41Z

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 · 2018-08-30T13:50:54Z

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 · 2018-08-31T11:42:54Z

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 · 2018-08-31T11:43:45Z

I am thinking maybe just remove the log message :)

sedubois · 2018-09-06T07:16:47Z

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 · 2018-09-06T07:57:29Z

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 · 2018-09-06T09:23:56Z

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 · 2018-09-06T17:59:07Z

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 · 2018-09-11T15:16:07Z

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

eliasthompson · 2018-10-20T03:01:49Z

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 · 2018-10-24T00:33:09Z

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 · 2018-10-24T06:50:37Z

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 · 2018-10-24T07:17:13Z

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 · 2018-10-29T18:06:22Z

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 · 2018-11-06T18:38:47Z

Bump, This is making build status unreadable

eliasthompson · 2018-11-06T18:54:34Z

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 · 2018-11-07T11:11:02Z

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

Fixes #480

giuseppeg · 2018-11-07T13:48:48Z

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 vercel/next.js#5617

atombender · 2018-11-07T16:35:25Z

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 · 2018-11-07T16:44:28Z

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

atombender · 2018-11-07T17:40:21Z

@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 · 2018-11-07T22:28:00Z

@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 · 2018-11-07T22:37:15Z

@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 · 2018-11-08T08:50:55Z

@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 · 2018-11-08T22:55:40Z

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 · 2018-11-09T14:45:41Z

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

giuseppeg · 2018-11-09T18:36:31Z

@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 giuseppeg/styled-jsx-plugin-sass#27

eliasthompson · 2018-11-09T18:54:16Z

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!

sedubois mentioned this issue Sep 5, 2018

How to upgrade styled-jsx to 3.0.2? greglobinski/gatsby-starter-hero-blog#26

Closed

This was referenced Oct 25, 2018

Enable logging only development #511

Closed

It's consoled too many logs.How to shut down it? #514

Closed

giuseppeg mentioned this issue Nov 6, 2018

Fix issue with plugins info message flooding #518

Merged

giuseppeg closed this as completed in #518 Nov 7, 2018

giuseppeg added a commit that referenced this issue Nov 7, 2018

Fix issue with plugins info message flooding (#518)

f179f53

Fixes #480

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

richtera commented Aug 22, 2018

giuseppeg commented Aug 24, 2018

richtera commented Aug 24, 2018

giuseppeg commented Aug 29, 2018 •

edited

richtera commented Aug 30, 2018

giuseppeg commented Aug 30, 2018

richtera commented Aug 31, 2018

richtera commented Aug 31, 2018

sedubois commented Sep 6, 2018

giuseppeg commented Sep 6, 2018

sedubois commented Sep 6, 2018 •

edited

sedubois commented Sep 6, 2018

jeffscottward commented Sep 11, 2018

eliasthompson commented Oct 20, 2018

ryanfitzer commented Oct 24, 2018

sedubois commented Oct 24, 2018 •

edited

giuseppeg commented Oct 24, 2018 •

edited

eliasthompson commented Oct 29, 2018

ricardo-cantu commented Nov 6, 2018

eliasthompson commented Nov 6, 2018

giuseppeg commented Nov 7, 2018

giuseppeg commented Nov 7, 2018

atombender commented Nov 7, 2018

giuseppeg commented Nov 7, 2018

atombender commented Nov 7, 2018

giuseppeg commented Nov 7, 2018

atombender commented Nov 7, 2018

giuseppeg commented Nov 8, 2018

atombender commented Nov 8, 2018

ricardo-cantu commented Nov 9, 2018

giuseppeg commented Nov 9, 2018

eliasthompson commented Nov 9, 2018

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

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

Comments

richtera commented Aug 22, 2018

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

What is the current behavior?

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

What is the expected behavior?

Environment (include versions)

Did this work in previous versions?

giuseppeg commented Aug 24, 2018

richtera commented Aug 24, 2018

giuseppeg commented Aug 29, 2018 • edited

richtera commented Aug 30, 2018

giuseppeg commented Aug 30, 2018

richtera commented Aug 31, 2018

richtera commented Aug 31, 2018

sedubois commented Sep 6, 2018

giuseppeg commented Sep 6, 2018

sedubois commented Sep 6, 2018 • edited

sedubois commented Sep 6, 2018

jeffscottward commented Sep 11, 2018

eliasthompson commented Oct 20, 2018

ryanfitzer commented Oct 24, 2018

sedubois commented Oct 24, 2018 • edited

giuseppeg commented Oct 24, 2018 • edited

eliasthompson commented Oct 29, 2018

ricardo-cantu commented Nov 6, 2018

eliasthompson commented Nov 6, 2018

giuseppeg commented Nov 7, 2018

giuseppeg commented Nov 7, 2018

atombender commented Nov 7, 2018

giuseppeg commented Nov 7, 2018

atombender commented Nov 7, 2018

giuseppeg commented Nov 7, 2018

atombender commented Nov 7, 2018

giuseppeg commented Nov 8, 2018

atombender commented Nov 8, 2018

ricardo-cantu commented Nov 9, 2018

giuseppeg commented Nov 9, 2018

eliasthompson commented Nov 9, 2018

giuseppeg commented Aug 29, 2018 •

edited

sedubois commented Sep 6, 2018 •

edited

sedubois commented Oct 24, 2018 •

edited

giuseppeg commented Oct 24, 2018 •

edited