Storybook: v3.0.0-alpha.0 No PostCSS Config found

[danielduan]

I have a wrapper component that styles different backgrounds and padding/margins that imports a CSS file and lives in the /stories folder.

ERROR in ./~/css-loader?{"importLoaders":1}!./~/postcss-loader/lib!./stories/components/ComponentWrapper.css
Module build failed: Error: No PostCSS Config found in: .../stories/components

I think PostCSS loader deprecated the use of plugin definition in our default/webpack.config.js so we need to define this as a separate file postcss.config.js.

When I have time, i'll take a shot at fixing it.

[dmueller39]

Hello! Webpack noob here!

Is the following related to your issue? I encountered this with v3.0.0-alpha on a fresh react-native project. It mentionsconfiguration has an unknown property 'postcss'.. In the meantime I was able to install the 2.x version of storybook.

C02PF4U3G3QD:styledcomponentsdemo dmueller39$ yarn run storybook
yarn run v0.23.3
$ storybook start -p 7007 
=> Loading custom .babelrc from project directory.
=> Loading custom addons config.
=> Using default webpack setup based on "Create React App".
=> Loading custom webpack config (full-control mode).
/Projects/styledcomponentsdemo/node_modules/webpack/lib/webpack.js:19
        throw new WebpackOptionsValidationError(webpackOptionsValidationErrors);
        ^

WebpackOptionsValidationError: Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
 - configuration has an unknown property 'postcss'. These properties are valid:
   object { amd?, bail?, cache?, context?, dependencies?, devServer?, devtool?, entry, externals?, loader?, module?, name?, node?, output?, performance?, plugins?, profile?, recordsInputPath?, recordsOutputPath?, recordsPath?, resolve?, resolveLoader?, stats?, target?, watch?, watchOptions? }
   For typos: please correct them.
   For loader options: webpack 2 no longer allows custom properties in configuration.
     Loaders should be updated to allow passing options via loader options in module.rules.
     Until loaders are updated one can use the LoaderOptionsPlugin to pass these options to the loader:
     plugins: [
       new webpack.LoaderOptionsPlugin({
         // test: /\.xxx$/, // may apply this only for some modules
         options: {
           postcss: ...
         }
       })
     ]
 - configuration.resolve.extensions[2] should not be empty.
    at webpack (/Projects/styledcomponentsdemo/node_modules/webpack/lib/webpack.js:19:9)
    at exports.default (/Projects/styledcomponentsdemo/node_modules/@storybook/react-native/dist/server/middleware.js:29:40)
    at new Server (/Projects/styledcomponentsdemo/node_modules/@storybook/react-native/dist/server/index.js:46:50)
    at Object.<anonymous> (/Projects/styledcomponentsdemo/node_modules/@storybook/react-native/dist/bin/storybook-start.js:31:14)
    at Module._compile (module.js:571:32)
    at Object.Module._extensions..js (module.js:580:10)
    at Module.load (module.js:488:32)
    at tryModuleLoad (module.js:447:12)
    at Function.Module._load (module.js:439:3)
    at Module.runMain (module.js:605:10)
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

[danielduan]

@dmueller39 No, that's been fixed already with this PR and merged. I had that problem too.
https://github.com/storybooks/storybook/pull/1058

If you can't wait for a new alpha to be released, go into your node_modules and find the file dist/server/build.js.

Here's the correct version, the last line needs to be updated:

// Build the webpack configuration using the `baseConfig`
// custom `.babelrc` file and `webpack.config.js` files
// NOTE changes to env should be done before calling `getBaseConfig`
var config = (0, _config2.default)('PRODUCTION', (0, _webpackConfig2.default)(), configDir);
config.output.path = _path2.default.resolve(outputDir);

[dmueller39]

@danielduan thanks for clarifying.

[MasterAM]

@danielduan AFAICT, the two issues are unrelated.

This one seems to be related to the webpack2 API, which only allows certain properties for its config objects.

It complains about the postcss attribute added in the default webpack config, and the empty extension in the resolver.

[danielduan]

@MasterAM you are correct. I should have clarified when I answered the question. I do have a PR open for the PostCSS issue.

[ndelangen]

It's merged and released as 3.0.0-alpha.1 🍻

[matt-oakes]

@ndelangen I'm still getting the postcss error with a React Native project when using 3.0.0-alpha.3. Is there something else I need to do?

$ npm run storybook

> [email protected] storybook /Users/matt/Projects/client/SNIP/SNIP
> storybook start -p 7007

=> Loading custom .babelrc from project directory.
=> Loading custom addons config.
=> Using default webpack setup based on "Create React App".
=> Loading custom webpack config (full-control mode).
/SNIP/node_modules/webpack/lib/webpack.js:19
        throw new WebpackOptionsValidationError(webpackOptionsValidationErrors);
        ^

WebpackOptionsValidationError: Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
 - configuration has an unknown property 'postcss'. These properties are valid:
   object { amd?, bail?, cache?, context?, dependencies?, devServer?, devtool?, entry, externals?, loader?, module?, name?, node?, output?, performance?, plugins?, profile?, recordsInputPath?, recordsOutputPath?, recordsPath?, resolve?, resolveLoader?, stats?, target?, watch?, watchOptions? }
   For typos: please correct them.
   For loader options: webpack 2 no longer allows custom properties in configuration.
     Loaders should be updated to allow passing options via loader options in module.rules.
     Until loaders are updated one can use the LoaderOptionsPlugin to pass these options to the loader:
     plugins: [
       new webpack.LoaderOptionsPlugin({
         // test: /\.xxx$/, // may apply this only for some modules
         options: {
           postcss: ...
         }
       })
     ]
 - configuration.resolve.extensions[2] should not be empty.
    at webpack (/SNIP/node_modules/webpack/lib/webpack.js:19:9)
    at exports.default (/SNIP/node_modules/@storybook/react-native/dist/server/middleware.js:29:40)
    at new Server (/SNIP/node_modules/@storybook/react-native/dist/server/index.js:46:50)
    at Object.<anonymous> (/SNIP/node_modules/@storybook/react-native/dist/bin/storybook-start.js:31:14)
    at Module._compile (module.js:541:32)
    at Object.Module._extensions..js (module.js:550:10)
    at Module.load (module.js:458:32)
    at tryModuleLoad (module.js:417:12)
    at Function.Module._load (module.js:409:3)
    at Module.runMain (module.js:575:10)

[danielduan]

@matt-oakes thanks.

Looks like the react-native project still uses the old plugin schema.
https://github.com/storybooks/storybook/blob/master/app/react-native/src/server/config/defaults/webpack.config.js#L42

reopening this ticket. @ndelangen can you take a look? I don't have any native projects set up to test.

[matt-oakes]

Thanks for reopening this @danielduan. I have had a go at fixing the issue with my extremely limited webpack knowledge.

[ndelangen]

I think this is now fixed, Will do a new alpha release for you @matt-oakes

[ndelangen]

published:

[danielduan]

@ndelangen unrelated to this issue, but is @storybooks/addons still needed or is that deprecated? it's not updated here and the latest alpha is still at 0.

[ndelangen]

If you needed it before, you still need it now.

We publish with lerna, and do not publish a package that has not been changed since last publish.

So it's fine for package to not be exactly the same, if it's the last alpha you're OK.

Easy way to install last alpha is like so:

npm i @storybook/addons@alpha --save

[matt-oakes]

The new alpha works great and fixes this issue. The only slight hiccup I had was that getstorybook doesn't add react-dom as a peer dependency when run. This can be fixed by simply running yarn add --dev react-dom@^15.5.4.

Thanks for the good work! I'm looking forward to trying this with React Native!

[ndelangen]

Hey, that sounds like a pretty easy fix! Do you dare touch our codebase @matt-oakes and make a PR adding react-dom to the cli?

Do you need react-dom for react-native?!?

[matt-oakes]

You need it for the browser UI to work. If you don't have it and open the browser you get some lovely lovely errors!

I'll open a new issue to track it and look into fixing it tomorrow.