Can't import css styles as object

[mschipperheyn]

I'm on react-universally@next. I use flexboxgrid which has the following declaration in a component

import styles from 'flexboxgrid/dist/flexboxgrid.css';

export default function getClass(className) {
    return (styles && styles[className]) ? styles[className] : className;
}

I get this error:

npm ERR! [email protected] start: `node build/server`

(function (exports, require, module, __filename, __dirname) { .container-fluid,

SyntaxError: Unexpected token .
    at exports.runInThisContext (vm.js:53:16)
    at Module._compile (module.js:511:25)
   at Object.Module._extensions..js (module.js:550:10)
   at Module.load (module.js:456:32)
   at tryModuleLoad (module.js:415:12)
   at Function.Module._load (module.js:407:3)
   at Module.require (module.js:466:17)
   at require (internal/module.js:20:19)
   at Object.<anonymous>    (../node_modules/react-flexbox-grid/lib/components/Grid.js:18:20)
     at Module._compile (module.js:541:32)

There is a referencing issue on that project as well: roylee0704/react-flexbox-grid#80

[birkir]

Two questions

• Which branch are you using?
• Do you have any feature branches merged in?

Anyhow, this package seem to use css-modules which you need to enable by yourself.

Short answer:
css-loader?modules=1&localIdentName=[hash:base64:5]

[mschipperheyn]

Thanks. But no joy. I use the next branch, with some changes to support stage-0, etc.

These are the files:
https://gist.github.com/mschipperheyn/b34091863e96cdd50e38eb9210119bdc

[birkir]

You only added it to ifDevClient, which means that the ifNode is missing it.

Set it to css-loader/locals?modules=1&localIdentName=[hash:base64:5]

They clearly state it in the documentation that css-modules is required: https:/roylee0704/react-flexbox-grid#css-modules

If you want a full blown example of how to setup css modules with react-universally, take a look between the lines here: https:/ueno-llc/starter-kit-universally/blob/master/internal/webpack/configFactory.js - specially the css-loader things.

[mschipperheyn]

Thanks! That seems to have cleared it up!

[mschipperheyn]

Hmm, cried success too soon.
Still have the issue. Tried to follow that blob as well as possible with some syntax updates.

https://gist.github.com/mschipperheyn/27692fb32da4a2e76232a3eeb0ef78ac

[birkir]

Seems to be a issue with the package you're using, please read the README, under Isomorphic Support they reference a github issue where nobody got it to work correctly.

Try the https:/nkt/react-flexgrid as suggested by fellow developers having problems as well.

[mschipperheyn]

Yeah, I will have a go. There's a mention of a solution here: roylee0704/react-flexbox-grid#28 (comment), that I'm not sure how to implement since react universally uses a factory for creating the webpack.config.js

Thanks for supporting me on this!

[mschipperheyn]

BTW, I'm not so sure this problem is flexbox-grid specific as I found other references as well. They either suggest its server side rendering leading babel to try to parse css as a javascript file or the importing of css in a node_modules/[module].

kriasoft/react-starter-kit#902
webpack/webpack#1754 (comment)
http://stackoverflow.com/questions/30347722/importing-css-files-in-isomorphic-react-components

[birkir]

Well, looking better into this, it is more of a general webpack importing css files from node_modules kind of problem. Shipping css files with npm packages is still not generalized, so everybody does it different.

But until you have any stronger case of this being problem with react-universally or suggestion how we can help with this I'm closing the issue. Have a good day! 👍

[mschipperheyn]

For those looking into this, I "think" I solved this, but due to a follow up issue: webpack-contrib/extract-text-webpack-plugin#131, I cannot correctly verify if I have:

configFactory.js

 const localIdentName = ifDev('[name]__[local]___[hash:base64:5]', '[hash:base64:10]');
 //plugins

ifNode(
    () => new ExtractTextPlugin({
      filename: '[name]-[chunkhash].css', allChunks: true,
    }),
  ),

  //modules / rules

  /*ifNode({
          loaders: [
              `css-loader/locals?modules=1&importLoaders=1&localIdentName=${localIdentName}`,
              'sass-loader',
          ],
      }),*/
  ifNode({
          loader: ExtractTextPlugin.extract({
            use: [
                `css-loader/locals?modules=1&importLoaders=1&localIdentName=${localIdentName}`,
                'sass-loader',
            ],
          }),
        }),

[mschipperheyn]

@birkir I do think this is a React Universally issue. In a nutshell, it is not possible to

import styles from 'some_stylesheet.css';

Which is one of the ways you are supposed to be able to use stylesheets (including scss). I personally don't like this style, but it is used. And if any third party library uses this. BOOM

It specifically applies to the scenario of server side / universal loading, because it only occurs there.

I recommend you reopen this issue. One of the things that could be considered is looking at this: https:/kriasoft/isomorphic-style-loader

[birkir]

We are already importing css files in ./shared/components/DemoApp/index.js, they work fine.

CSS modules also work fine in a test I did right this moment, you can see the diff at the bottom.

Just because a third party package doesn't work for you does not mean that react-universally has broken css imports. It simply does not have css-modules enabled by default (I'll maybe make it configurable in the future). Me and my team have built dozens of server side rendered websites with scss and css modules using loads of third party modules without using isomorphic style loader.

───────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────
 -- a/internal/webpack/configFactory.js
 ++ b/internal/webpack/configFactory.js
───────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────
@@ -418,7 +418,7 @@ export default function webpackConfigFactory(buildOptions) {
           loaders: [
             'style-loader',
             {
-               path: 'css-loader',
+               path: 'css-loader?modules=1&localIdentName=[hash:base64:10]',
               // Include sourcemaps for dev experience++.
               query: { sourceMap: true },
             },
@@ -472,13 +472,13 @@ export default function webpackConfigFactory(buildOptions) {
             ifOptimizeClient(() => ({
               loader: ExtractTextPlugin.extract({
                 fallback: 'style-loader',
-                 use: ['css-loader'],
+                 use: ['css-loader?modules=1&localIdentName=[hash:base64:10]'],
               }),
             })),
             // When targetting the server we use the "/locals" version of the
             // css loader, as we don't need any css files for the server.
             ifNode({
-               loaders: ['css-loader/locals'],
+               loaders: ['css-loader/locals?modules=1&localIdentName=[hash:base64:10]'],
             }),
           ),
         ),

───────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────
 -- a/shared/components/DemoApp/globals.css
 ++ b/shared/components/DemoApp/globals.css
───────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────
@@ -19,3 +19,7 @@ ul {
 }

 ul li { display: inline; margin: 0 .5rem; }

+ .app {
+   padding: 10px;
+ }

───────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────
 -- a/shared/components/DemoApp/index.js
 ++ b/shared/components/DemoApp/index.js
───────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────
@@ -4,7 +4,7 @@ import React from 'react';
 import Switch from 'react-router-dom/Switch';
 import Route from 'react-router-dom/Route';

- import './globals.css';
+ import s from './globals.css';

 import AsyncHome from './AsyncHome';
 import AsyncAbout from './AsyncAbout';
@@ -13,7 +13,7 @@ import Header from './Header';

 function DemoApp() {
   return (
-     <div style={{ padding: '10px' }}>
+     <div className={s.app}>
       <Header />
       <Switch>
         <Route exact path="/" component={AsyncHome} />

[mschipperheyn]

Fair enough, I do not have the experience in these issues that you have, so I will assume you are right.

This is the offending css for reference: https:/kristoferjoseph/flexboxgrid/blob/master/src/css/flexboxgrid.css