v3.0.0-alpha.0 No PostCSS Config found #1061

danielduan · 2017-05-18T16:17:10Z

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.

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

dmueller39 · 2017-05-18T17:05:40Z

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 · 2017-05-18T17:09:05Z

@dmueller39 No, that's been fixed already with this PR and merged. I had that problem too.
#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 · 2017-05-18T23:41:37Z

@danielduan thanks for clarifying.

MasterAM · 2017-05-19T08:55:27Z

@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 · 2017-05-19T19:57:08Z

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

ndelangen · 2017-05-19T20:48:37Z

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

matt-oakes · 2017-05-22T14:22:20Z

@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

> SNIP@0.0.1 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 · 2017-05-22T15:56:05Z

@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 · 2017-05-22T21:04:48Z

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

ndelangen · 2017-05-22T22:00:33Z

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

ndelangen · 2017-05-22T22:12:03Z

published:

danielduan · 2017-05-22T22:13:52Z

@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 · 2017-05-22T22:16:07Z

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 · 2017-05-22T22:22:27Z

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 · 2017-05-22T22:24:41Z

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 · 2017-05-22T22:27:24Z

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.

danielduan mentioned this issue May 18, 2017

Upgraded webpack PostCSS plugin definition #1062

Merged

shilman added bug compatibility with other tools configuration babel / webpack labels May 19, 2017

danielduan closed this as completed May 19, 2017

danielduan reopened this May 22, 2017

matt-oakes mentioned this issue May 22, 2017

Upgrade React Native to webpack 2 config #1097

Merged

ndelangen closed this as completed May 22, 2017

dependencies bot mentioned this issue Nov 11, 2017

Update 2 dependencies from npm #2290

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

v3.0.0-alpha.0 No PostCSS Config found #1061

v3.0.0-alpha.0 No PostCSS Config found #1061

danielduan commented May 18, 2017 •

edited

Loading

dmueller39 commented May 18, 2017

danielduan commented May 18, 2017 •

edited

Loading

dmueller39 commented May 18, 2017

MasterAM commented May 19, 2017

danielduan commented May 19, 2017

ndelangen commented May 19, 2017

matt-oakes commented May 22, 2017

danielduan commented May 22, 2017 •

edited

Loading

matt-oakes commented May 22, 2017

ndelangen commented May 22, 2017

ndelangen commented May 22, 2017

danielduan commented May 22, 2017

ndelangen commented May 22, 2017 •

edited

Loading

matt-oakes commented May 22, 2017

ndelangen commented May 22, 2017

matt-oakes commented May 22, 2017

v3.0.0-alpha.0 No PostCSS Config found #1061

v3.0.0-alpha.0 No PostCSS Config found #1061

Comments

danielduan commented May 18, 2017 • edited Loading

dmueller39 commented May 18, 2017

danielduan commented May 18, 2017 • edited Loading

dmueller39 commented May 18, 2017

MasterAM commented May 19, 2017

danielduan commented May 19, 2017

ndelangen commented May 19, 2017

matt-oakes commented May 22, 2017

danielduan commented May 22, 2017 • edited Loading

matt-oakes commented May 22, 2017

ndelangen commented May 22, 2017

ndelangen commented May 22, 2017

danielduan commented May 22, 2017

ndelangen commented May 22, 2017 • edited Loading

matt-oakes commented May 22, 2017

ndelangen commented May 22, 2017

matt-oakes commented May 22, 2017

danielduan commented May 18, 2017 •

edited

Loading

danielduan commented May 18, 2017 •

edited

Loading

danielduan commented May 22, 2017 •

edited

Loading

ndelangen commented May 22, 2017 •

edited

Loading