css config in the razzle.config.js

[fahamidev]

Hi everyone. I want to use css files from anywhere. And so I've used the razzle.config.js file and made some adjustments to it.

my config in the razzle.config.js file :

'use strict';

module.exports = {
    modify: (baseConfig, { target, dev }, webpack) => {
        const appConfig = Object.assign({}, baseConfig);
        appConfig.module.rules.push({
            test: /\.css$/,
            use: [
                'style-loader',
                {
                    loader: 'css-loader',
                    options: {
                        modules   : true,
                        sourceMap : true,
                    },
                }
            ]
        });
    return appConfig;
  }
};

and I encountered the following error after configuration:

/home/ehsan/Desktop/with-redux/node_modules/react-persian-datepicker/lib/styles/basic.css:1
(function (exports, require, module, __filename, __dirname) { .calendarContainer {
                                                              ^
SyntaxError: Unexpected token .
    at createScript (vm.js:80:10)
    at Object.runInThisContext (vm.js:139:10)
    at Module._compile (module.js:607:28)
    at Object.Module._extensions..js (module.js:654:10)
    at Module.load (module.js:556:32)
    at tryModuleLoad (module.js:499:12)
    at Function.Module._load (module.js:491:3)
    at Module.require (module.js:587:17)
    at require (internal/module.js:11:18)
    at Object.<anonymous> (/home/ehsan/Desktop/with-redux/node_modules/react-persian-datepicker/lib/components/Calendar.js:255:11)

There are two problems in the issue ( razzle/issues/34, razzle/issues/297 ), which is roughly the same problem and is related to this issue and I've read them.

@d4rky-pl And I've tried this solution and I'm faced with another error window is not defined :

/home/ehsan/Desktop/with-redux-original/build/server.js:813
        return window && document && document.all && !window.atob;
        ^

ReferenceError: window is not defined

I tried to resolve my issue in issue 297, but I preferred to check here. for example, I have placed the minimal github repository

Thanks for your guidance

[cruzlutor]

Same Issue, window is not defined Did you figure out how to fix it?

[d4rky-pl]

@EhsanFahami Your example repository repeats the same problem: You are defining css rules twice. See for yourself, add console.log(appConfig.module.rules) in razzle.config.js

Now, if you debug your code you'll see that /home/ehsan/Desktop/with-redux-original/build/server.js:813 points to isOldIE function, which you could then search node_modules for to discover that it's being used by style-loader.

Further investigation could then make you realize that style-loader is for client only and you shouldn't include it in server bundle so the original code I proposed should check the target and use different loaders on server.

[stale[bot]]

Hola! So here's the deal, between open source and my day job and life and what not, I have a lot to manage, so I use a GitHub bot to automate a few things here and there. This particular GitHub bot is going to mark this as stale because it has not had recent activity for a while. It will be closed if no further activity occurs in a few days. Do not take this personally--seriously--this is a completely automated action. If this is a mistake, just make a comment, DM me, send a carrier pidgeon, or a smoke signal.

[stale[bot]]

ProBot automatically closed this due to inactivity. Holler if this is a mistake, and we'll re-open it.

[jmpowen]

I don't suppose this has been solved. I checkout out 'razzle config-utils' @d4rky-pl but haven't been able to get your example to work from 297. I've been checking out a lot of solutions but they are either too old or not detailed enough (new to react, got a project with razzle to start...yay me). I don't want to give up since this seems simple enough to figure out once I know what I need in my razzle.config.js. I have my .css file in my project folder. I saw this solution by Jared Palmer but it seemed old, though I tried it and it did not work. This seemed to be the most insightful post (after all the other problems pointed here). Is that razzle.config.js in the example working now? I tried it and still had issues. I also went ahead and checked out the with-scss but it wasn't helpful. If you can just point me in the right way, I haven't needed a razzle.config.js before this issue so I figured I would just solve the error I am dealing with now and comeback to really dive deep into what I can do with the razzle.config.js later on. Thanks!