0

I have Server rendered my create-react-app by reading this tutorial.

And now, I cannot import CSS files in .js files!

Tried using style-loader, css-loader, extract-text-webpack-plugin, mini-css-extract-plugin, tried tweaking webpack configuration, but nothing helped.

NO StackOverflow answer helped. So this question.

This is my package.json:

{
  ...
  "scripts": {
    "dev:build-server": "NODE_ENV=development webpack --config webpack.server.js --mode=development -w",
    "dev:start": "nodemon ./server-build/index.js",
    "dev": "npm-run-all --parallel build dev:*",
    "start": "serve --single ./build",
    "client": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "now-build": "react-scripts build && mv build dist",
    "deploy": "npm run build && now ./build -A ../now.json --public --name=kumarabhirup"
  },
  ...
}

This is webpack.server.js

const path = require('path');
const nodeExternals = require('webpack-node-externals');
const webpack = require('webpack')
const ExtractTextPlugin = require('extract-text-webpack-plugin');
// const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
  entry: './server/index.js',

  target: 'node',

  externals: [nodeExternals()],

  output: {
    path: path.resolve('server-build'),
    filename: 'index.js'
  },

  module: {
    rules: [
      {
        test: /\.js$/,
        use: 'babel-loader'
      },
      {
        test: /\.css$/,
        // use: ['style-loader', MiniCssExtractPlugin.loader, 'css-loader'] NOT WORKED
        use: ExtractTextPlugin.extract('style-loader', 'css-loader') // NOT WORKING
      },
      {
        test: /\.scss$/,
        use: [
            "style-loader",
            "css-loader",
            "sass-loader"
        ]
      }
    ]
  },

  plugins: [
    new webpack.EnvironmentPlugin({...process.env}),
    new ExtractTextPlugin('[name].css') // TRIED THIS TOO
    // new MiniCssExtractPlugin({ TRIED THIS
    //   filename: 'style.css',
    // })
  ]
};

Error it throws at me when I, import 'react-circular-progressbar/dist/styles.css',

/Users/iqubex/Sites/kumarabhirup/kumarabhirup/node_modules/react-circular-progressbar/dist/styles.css:7
.CircularProgressbar {
^

SyntaxError: Unexpected token .
    at new Script (vm.js:83:7)
    at createScript (vm.js:267:10)
    at Object.runInThisContext (vm.js:319:10)
    at Module._compile (internal/modules/cjs/loader.js:686:28)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:734:10)
    at Module.load (internal/modules/cjs/loader.js:620:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:560:12)
    at Function.Module._load (internal/modules/cjs/loader.js:552:3)
    at Module.require (internal/modules/cjs/loader.js:659:17)
    at require (internal/modules/cjs/helpers.js:22:18)
[nodemon] app crashed - waiting for file changes before starting...

All that I expect is the working of imported CSS files. Please help

Kumar Abhirup
  • 308
  • 1
  • 4
  • 16
  • 1
    `module: {loaders: [{test: /\.js$/, exclude: /node_modules/, loaders: ['babel']},{test: /\.css$/, loaders: ['style', 'css']}]}`, can you try this and make the plugins array in webpack to empty. – ggorantala Feb 02 '19 at 09:49
  • this too, isnt working ☹️ – Kumar Abhirup Feb 02 '19 at 13:18
  • Do you implort css from the dist directory? The output is not set to `dist` directory but is that safe? I mean isn't there any other program to write in that folder? Can you show me your project structure? (Directories) – Ali Doustkani Feb 04 '19 at 04:46
  • I created another project, which was custom and with no CRA... this time it worked... it must be due to the file structure. anyways, thanks for the help. Your answer worked when I did all from scratch. :-) – Kumar Abhirup Feb 04 '19 at 08:22

1 Answers1

4

@gopigorantala is right.

Change the loader to one of these, it should work: 

use: ['style-loader', 'css-loader']

or 

use: [MiniCssExtractPlugin.loader, 'css-loader']

You probably won't need to use ExtractTextPlugin. Just use MiniCssExtractPlugin. It'll work.

The style-loader loads the styles into DOM with <style> at runtime, and MiniCssExtractPlugin extract them to a separate file. So you don't need to use both of them.

Ali Doustkani
  • 728
  • 7
  • 14