webpack 2 with parser rules requireEnsure breaks react-styleguidist

[oieduardorabelo]

Hi guys!

I searched in the issues with these keywords: require, ensure, require.ensure, and nothing related to my problem came in the result.

I already fixed it, but, I did a bit of googling, and there's no issues/topics with that, so, my intention here is to share my findings. For someone searching about it, or facing the same problem.

My problem

I was working in a project and implementing react-styleguidist, when I tried to run it, this was the error:

Not that helpful, right?! My styleguide.config.js:

module.exports = {
  components: 'client/presentation/**/*.jsx',
};

Pretty simple, so, what is happening?

Deep down in the webpack config chain (you know merge, merge, import and merge hahaha), and stuck in the base configuration, I found this declaration in the webpack config:

Since react-styleguidist relies in the webpack syntax for require.ensure, looking in the documentation for the Rule.parser, it shows this declaration just turn off that syntax, and no error message is defined/throw by react-styleguidist or even webpack to help with that.

Was just a few hours to find it, but, maybe someone else can run in the same problem.

Would be interesting the "check" the webpack config to see if this rule is there, and display a better message.

Thanks!

[sapegin]

Thanks for a detailed bug report! I’ll think what we can do to improve this ;-)

[oieduardorabelo]

@sapegin I could make a PR using babel-plugin-syntax-dynamic-import to fix this bug,

since is just one file using require.ensure, I don't know if is worth it,

another question I've is: which of them, webpack or react-styleguidist, should throw a warning about the disabled syntax?

[sapegin]

@oieduardorabelo I don’t really understand what this plugin does an how it would solve the issue.

I think we should fix the “polyfill” so it won’t fail silently at least:

// FIX: require.ensure polyfill for tests
// Can’t make it work from tests, it shouldn’t be in the app code.
if (typeof require.ensure !== 'function') {
	require.ensure = (d, c) => c(require);
}

[sapegin]

We don’t have the piece of code I’ve mentioned in the previous comment so I suppose this isn’t relevant anymore.

I’m closing this for now. Feel free to reopen if you still have this issue.