webpack-rails now prevents errors from being shown in console

[rhys-vdw]

Hi @mipearson. Thanks for webpack-rails! We've been using it successfully for the last few months, with no complaints until now.

Seems this commit prevents linter and compile errors from getting through to the browser console via webpack-dev-server. Instead I see this annoying Rails error screen:

This prevents the project from loading and is a show stopper. Is there a way to turn this off? Also, having this behaviour as default is a breaking change, so I think you should have bumped major version (if you're following semver).

Also I know it's a PITA, but it would be really helpful if you maintained a changelog somewhere. Took us a while to find the issue.

Anybody else hitting this problem: 0.9.7 seems to be the most recent working version.

[mipearson]

Ah, right.

Yes, I'm happy for it to be made a flag.

I didn't consider this a breaking change, as at the time I considered that
webpack-rails silently allowing compile bugs to go unnoticed was a bug in
and of itself, and the correct behaviour was to error out. It's worth
noting, also, that this gem is still in 0.x-land, and per semver can be a
bit fast and loose with breaking changes, although I've tried my best not
to be. I'm waiting on integrating react-rails support before I mark 1.0.

I agree regarding a CHANGELOG. I think I will start tracking changes,
almost certainly will be doing so once it hits 1.x.

On Tue, Oct 18, 2016 at 2:31 PM, Rhys van der Waerden <
[email protected]> wrote:

Hi @mipearson https:/mipearson. Thanks for webpack-rails!
We've been using it successfully for the last few months, with no
complaints until now.

Seems this commit
882b29f
prevents linter and compile errors from getting through to the browser
console via webpack-dev-server. Instead I see this annoying Rails error
screen:

[image: image]
https://cloud.githubusercontent.com/assets/822105/19463277/5945f230-953e-11e6-9682-f09db0784c72.png

This prevents the project from loading and is a show stopper. Is there a
way to turn this off? Also, having this behaviour as default is a breaking
change, so I think you should have bumped major version (if you're
following semver).

Also I know it's a PITA, but it would be really helpful if you maintained
a changelog somewhere. Took us a while to find the issue.

Anybody else hitting this problem: 0.9.7 seems to be the most recent
working version.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
#63, or mute the thread
https:/notifications/unsubscribe-auth/AAF8JfqauGl8itqzoa0hpzhflxArP-ftks5q1D2fgaJpZM4KZVyx
.

Michael Pearson

[mipearson]

Also, recent changes have been merged (or will be soon) that filter out
"non-error" (ie linter) errors. The intent was this change was for the
Rails developer to see instantly that their JS wasn't available - similar
to if you break something in sprockets - rather than going "what the hell
happened to my JS?" and having to check the webpack log.

On Tue, Oct 18, 2016 at 6:07 PM, Michael Pearson [email protected]
wrote:

Ah, right.

Yes, I'm happy for it to be made a flag.

I didn't consider this a breaking change, as at the time I considered that
webpack-rails silently allowing compile bugs to go unnoticed was a bug in
and of itself, and the correct behaviour was to error out. It's worth
noting, also, that this gem is still in 0.x-land, and per semver can be a
bit fast and loose with breaking changes, although I've tried my best not
to be. I'm waiting on integrating react-rails support before I mark 1.0.

I agree regarding a CHANGELOG. I think I will start tracking changes,
almost certainly will be doing so once it hits 1.x.

On Tue, Oct 18, 2016 at 2:31 PM, Rhys van der Waerden <
[email protected]> wrote:

Hi @mipearson https:/mipearson. Thanks for webpack-rails!
We've been using it successfully for the last few months, with no
complaints until now.

Seems this commit
882b29f
prevents linter and compile errors from getting through to the browser
console via webpack-dev-server. Instead I see this annoying Rails error
screen:

[image: image]
https://cloud.githubusercontent.com/assets/822105/19463277/5945f230-953e-11e6-9682-f09db0784c72.png

This prevents the project from loading and is a show stopper. Is there a
way to turn this off? Also, having this behaviour as default is a breaking
change, so I think you should have bumped major version (if you're
following semver).

Also I know it's a PITA, but it would be really helpful if you maintained
a changelog somewhere. Took us a while to find the issue.

Anybody else hitting this problem: 0.9.7 seems to be the most recent
working version.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
#63, or mute the
thread
https:/notifications/unsubscribe-auth/AAF8JfqauGl8itqzoa0hpzhflxArP-ftks5q1D2fgaJpZM4KZVyx
.

Michael Pearson

Michael Pearson

[rhys-vdw]

@mipearson Right. The webpack log is displayed in console for me via react-dev-server. I'm not sure if this is an optional config or not, but it's one of the main advantages of using webpack - so you don't need to lose your page when you make a mistake. Particularly when using hot module reloading it's pretty annoying to be dragged back to that sprockets-esque error screen.

[nathanmarks]

@mipearson Any chance of cutting a release with an option on top of 0.9.9? I'm using a config option only available in 0.9.9 but want to opt out of this feature.

[rhys-vdw]

We've remained locked to 0.9.7 until this issue is resolved.

[nathanmarks]

@rhys-vdw I need a config option not available in 0.9.7 or else I can't setup my webpack-dev-server properly so it's accessible both inside and outside a VM. I actually tried rolling back after reading your response.

[rhys-vdw]

Oh that might be a problem for us soon when we move to a container based system. I've linked the commit in the issue report above, so you could fork and reverse it. Is there a changelog somewhere? I couldn't find one.

…

On Sat, Jan 14, 2017, 8:43 AM Nathan ***@***.***> wrote: @rhys-vdw <https:/rhys-vdw> I need a config option not available in 0.9.7 or else I can't setup my webpack-dev-server properly so it's accessible both inside and outside a VM. I actually tried rolling back after reading your response. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#63 (comment)>, or mute the thread <https:/notifications/unsubscribe-auth/AAyLWbllXx8sdQWwHLsL7SOlWiqermvLks5rR-_jgaJpZM4KZVyx> .

[mipearson]

Fixed merged in to 0.9.10

[rhys-vdw]

We've just upgraded to latest. How do we disable the page load on JS error?

[rhys-vdw]

Actually it seems to be okay now. I experienced an issue where I first loaded the page and was given the Rails error screen with my linter errors and warnings. When I fixed them and reloaded the page the errors remained. I'm not sure if this is related but I'll report in more detail if I see it again.

[rhys-vdw]

Okay, I've just had the error again:

Full text:

Webpack::Rails::Manifest::WebpackError at /tests/2b0338793f2/edit
Error in webpack compile, details follow below:
./app/assets/javascripts/components/test-form/usability-test-form.js

/Users/rhys/Projects/usability-hub/usability_hub/app/assets/javascripts/components/test-form/usability-test-form.js
  432:16  error    'DeviceFrameSelect' is not defined  react/jsx-no-undef
  463:14  warning  Unexpected 'todo' comment           no-warning-comments

✖ 2 problems (1 error, 1 warning)

 @ ./app/assets/javascripts/initialize-react.js.erb 460:28-81 473:6-86
 @ ./app/assets/javascripts/application.js
 @ multi (webpack)-dev-server/client?http://localhost:3808 webpack/hot/dev-server application.js

./app/assets/javascripts/components/test-form/usability-test-form.js
Module build failed: SyntaxError: Unexpected token, expected , (815:2)

  813 |   ).isRequired,
  814 |   deviceFrames: PropTypes.arrayOf(UhPropTypes.deviceFrame.require('name', 'id').isRequired).isRequired
> 815 |   projects: PropTypes.arrayOf(PropTypes.string.isRequired).isRequired,
      |   ^
  816 |   testSteps: PropTypes.arrayOf(UhPropTypes.testStep.isRequired).isRequired,
  817 |   s3Config: UhPropTypes.s3Config.isRequired,
  818 |   screenshots: PropTypes.arrayOf(UhPropTypes.screenshot.isRequired).isRequired,

BabelLoaderError: SyntaxError: Unexpected token, expected , (815:2)

  813 |   ).isRequired,
  814 |   deviceFrames: PropTypes.arrayOf(UhPropTypes.deviceFrame.require('name', 'id').isRequired).isRequired
> 815 |   projects: PropTypes.arrayOf(PropTypes.string.isRequired).isRequired,
      |   ^
  816 |   testSteps: PropTypes.arrayOf(UhPropTypes.testStep.isRequired).isRequired,
  817 |   s3Config: UhPropTypes.s3Config.isRequired,
  818 |   screenshots: PropTypes.arrayOf(UhPropTypes.screenshot.isRequired).isRequired,

    at transpile (/Users/rhys/Projects/usability-hub/usability_hub/node_modules/babel-loader/lib/index.js:61:13)
    at Object.module.exports (/Users/rhys/Projects/usability-hub/usability_hub/node_modules/babel-loader/lib/index.js:155:20)
 @ ./app/assets/javascripts/initialize-react.js.erb 460:28-81 473:6-86
 @ ./app/assets/javascripts/application.js
 @ multi (webpack)-dev-server/client?http://localhost:3808 webpack/hot/dev-server application.js

Compare to my webpack output:

16:18:28 webpack.1 | WARNING in ./app/assets/javascripts/components/test-form/usability-test-form.js
16:18:28 webpack.1 |
16:18:28 webpack.1 | /Users/rhys/Projects/usability-hub/usability_hub/app/assets/javascripts/components/test-form/usability-test-form.js
16:18:28 webpack.1 |   166:30  warning  'deviceFrames' is missing in props validation   react/prop-types
16:18:28 webpack.1 |   166:44  warning  'deviceFrameId' is missing in props validation  react/prop-types
16:18:28 webpack.1 |   470:14  warning  Unexpected 'todo' comment                       no-warning-comments
16:18:28 webpack.1 |
16:18:28 webpack.1 | ✖ 3 problems (0 errors, 3 warnings)
16:18:28 webpack.1 |
16:18:28 webpack.1 |  @ ./app/assets/javascripts/initialize-react.js.erb 460:28-81 473:6-86
16:18:28 webpack.1 |  @ ./app/assets/javascripts/application.js
16:18:28 webpack.1 |  @ multi (webpack)-dev-server/client?http://localhost:3808 webpack/hot/dev-server application.js

Note that the errors described in the Rails error have been corrected, but on reload I still get the same error screen from Rails.

Restarting the server seems to be the only way to clear the issue. (edit: see next comment)

It seems the error information is being cached somehow and not updated on reload.

Before this happened I played around by deliberately adding in compile errors into the view and HMR was presenting the errors as usual. Would you prefer I opened a new issue for this @mipearson ?

[rhys-vdw]

Resolving all warnings and errors from ESLint permitted the page to load again, but until that time it will show the errors displayed the first time (not the current warnings and errors).

[rhys-vdw]

Okay, not always. Now I can fix all the warnings and errors and reloading the page will not clear the error page. I can fix the error by restarting foreman.

PS: Sorry for the influx of comments, @mipearson. I should also point out that I can probably find time to look into this problem myself if that would be helpful.