Allow overriding Webpack module rules

[mrm007]

See changeset for details.

[changeset-bot]

🦋 Changeset detected

Latest commit: 078adf5

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
playroom	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[pascalduez]

Hello,

this should probably have been released as a major version?
It breaks our current implementation.

ERROR in ./components/FrameComponent.js 11:4

Module parse failed: Unexpected token (11:4)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| export default function Root(props) {
|   return (
>     <div>

Investigating.

Our stripped down config.

module.exports = {
  components: './components/components',
  frameComponent: './components/FrameComponent.js',
  webpackConfig: () => ({
    module: {
      rules: [
        {
          test: /\.js$/,
          exclude: /node_modules/,
          use: [
            {
              loader: 'babel-loader',
              options: {
                targets: { browsers: 'defaults', esmodules: true },
                // Our config with all the proper js, react etc. plugins.
                presets: ['@our/config'],
              },
            },
          ],
        },
      ],
    },
  }),
};

EDIT: actually even without having any rules defined this breaks.
As soon as you have webpackConfig.

EDIT 2:
I can fix the .js rule by adding include: [path.resolve('./components')] (where FrameComponent lives).
Looks like the include key is properly merged.
But this does not work for a .css rule.

[mrm007]

Hi @pascalduez,

Overriding Playroom's Webpack loaders means you have to provide support for processing JSX in your JS/TS files. Playroom merges its default config with yours, overwriting Playroom's module.rules with yours. This is an escape hatch for when you need to do something more complex than what Playroom provides out of the box. The caveat is that you have to recreate what Playroom provides out of the box.

If you have a reproducible example of this not working, I'd be happy to take a look.

[rbardini]

This change breaks my build too:

Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> .storybook-button {
|   font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
|   font-weight: 700;

even though I have the following rule:

{
  test: /\.css$/,
  include: path.resolve(__dirname, 'src'),
  use: ['style-loader', 'css-loader'],
}

v0.32.0 works with the config above.