CODEWITHSUNDEEP
reactjswebpackwebpack-4
Kam
Kam

Reputation: 63

Excluding CSS path in webpack failure

config/webpack.dev.config.js:

/**
 * module dependencies for webpack dev configuration
 */
const path = require('path');
const webpack = require('webpack');

// define paths
const nodeModulesPath = path.resolve(__dirname, '../node_modules');
const buildPath = path.resolve(__dirname, '../public', 'build');
const mainAppPath = path.resolve(__dirname, '../frontend', 'App', 'index.js');
const sharedStylesPath = path.resolve(__dirname, '../frontend', 'SharedStyles');
const componentsPath = path.resolve(__dirname, '../frontend', 'Components');
const containersPath = path.resolve(__dirname, '../frontend', 'Containers');
const viewsPath = path.resolve(__dirname, '../frontend', 'Views');

const editorPath = path.resolve(__dirname, '../frontend/Components/MyEditor');

/**
 * webpack development configuration
 */
module.exports = {
  target  : 'web',
  devtool: 'inline-source-map',

  entry: [
    'webpack-hot-middleware/client',
    mainAppPath,
  ],

  output: {
    filename: 'bundle.js',
    path: buildPath,
    publicPath: '/build/',
  },

  module: {
    loaders: [
      {
        test: /\.js$/,
        loaders: [ 'react-hot', 'babel-loader' ],
        exclude: [nodeModulesPath],
      },
      {
        test: /\.css$/,
        exclude: [editorPath],
        loaders: [
          'style-loader',
          'css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]',
          'postcss-loader?sourceMap=inline',
        ],
      },
      { test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192' },
      { test: /\.svg$/, loader: 'url-loader?limit=10000&mimetype=image/svg+xml' },
    ],
  },

  postcss: [ require('autoprefixer'), require('postcss-nesting') ],

  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoErrorsPlugin(),
  ],

  resolve : {
    extensions: ['', '.js', '.css'],
    alias: {
      SharedStyles: sharedStylesPath,
      Components: componentsPath,
      Containers: containersPath,
      Views: viewsPath,
    },
  },
};

frontend/Components/MyEditor/index.js:

import React, { Component } from 'react';

import { Editor } from 'react-draft-wysiwyg';
import './editor.css'; // this cause an error because global CSS doesn't work by webpack

class MyEditor extends Component {
    render() {
        return (
            <div>
           <Editor />
            </div>
        );
    }
}

export default MyEditor;

Error:

ERROR in ./frontend/Components/MyEditor/editor.css
Module parse failed: /home/mycomputer/ReForum/frontend/Components/MyEditor/editor.css Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected token (1:0)
    at Parser.pp$4.raise (/home/mycomputer/ReForum/node_modules/webpack/node_modules/acorn/dist/acorn.js:2221:15)
    at Parser.pp.unexpected (/home/mycomputer/ReForum/node_modules/webpack/node_modules/acorn/dist/acorn.js:603:10)
    at Parser.pp$3.parseExprAtom (/home/mycomputer/ReForum/node_modules/webpack/node_modules/acorn/dist/acorn.js:1822:12)
    at Parser.pp$3.parseExprSubscripts (/home/mycomputer/ReForum/node_modules/webpack/node_modules/acorn/dist/acorn.js:1715:21)
    at Parser.pp$3.parseMaybeUnary (/home/mycomputer/ReForum/node_modules/webpack/node_modules/acorn/dist/acorn.js:1692:19)
    at Parser.pp$3.parseExprOps (/home/mycomputer/ReForum/node_modules/webpack/node_modules/acorn/dist/acorn.js:1637:21)
    at Parser.pp$3.parseMaybeConditional (/home/mycomputer/ReForum/node_modules/webpack/node_modules/acorn/dist/acorn.js:1620:21)
    at Parser.pp$3.parseMaybeAssign (/home/mycomputer/ReForum/node_modules/webpack/node_modules/acorn/dist/acorn.js:1597:21)
    at Parser.pp$3.parseExpression (/home/mycomputer/ReForum/node_modules/webpack/node_modules/acorn/dist/acorn.js:1573:21)
    at Parser.pp$1.parseStatement (/home/mycomputer/ReForum/node_modules/webpack/node_modules/acorn/dist/acorn.js:727:47)
    at Parser.pp$1.parseTopLevel (/home/mycomputer/ReForum/node_modules/webpack/node_modules/acorn/dist/acorn.js:638:25)
    at Parser.parse (/home/mycomputer/ReForum/node_modules/webpack/node_modules/acorn/dist/acorn.js:516:17)
    at Object.parse (/home/mycomputer/ReForum/node_modules/webpack/node_modules/acorn/dist/acorn.js:3098:39)
    at Parser.parse (/home/mycomputer/ReForum/node_modules/webpack/lib/Parser.js:902:15)
    at NormalModule.<anonymous> (/home/mycomputer/ReForum/node_modules/webpack/lib/NormalModule.js:104:16)
    at NormalModule.onModuleBuild (/home/mycomputer/ReForum/node_modules/webpack-core/lib/NormalModuleMixin.js:310:10)
    at nextLoader (/home/mycomputer/ReForum/node_modules/webpack-core/lib/NormalModuleMixin.js:275:25)
    at /home/mycomputer/ReForum/node_modules/webpack-core/lib/NormalModuleMixin.js:259:5
    at Storage.provide (/home/mycomputer/ReForum/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:52:20)
    at CachedInputFileSystem.readFile (/home/mycomputer/ReForum/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:140:24)
    at NormalModule.onLoadPitchDone (/home/mycomputer/ReForum/node_modules/webpack-core/lib/NormalModuleMixin.js:255:7)
    at NormalModule.loadPitch (/home/mycomputer/ReForum/node_modules/webpack-core/lib/NormalModuleMixin.js:182:27)
 @ ./frontend/Components/MyEditor/index.js 17:0-23
webpack: Failed to compile.

I try to exclude "frontend/Components/MyEditor/editor.css" file from webpack css-loader so that I can apply global css by putting "import './editor.css';" in any js file.

But currently it results in an error that module parse is failed.

In webpack config, I put "exclude: [editorPath]" and "const editorPath = path.resolve(__dirname, '../frontend/Components/MyEditor');".

so I thought it was correct but it doesn't work. How can I fix this?

Upvotes: 0

Views: 162

Answers (1)

Tien Duong
Tien Duong

Reputation: 2595

Because you exluded the css file from css-loader. So the webpack didn't know what to do with the file. You need to write a new module loader for that file.

 module: {
    loaders: [
      {
        test: /\.js$/,
        loaders: [ 'react-hot', 'babel-loader' ],
        exclude: [nodeModulesPath],
      },
      {
        test: /\.css$/,
        exclude: [editorPath],
        loaders: [
          'style-loader',
          'css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]',
          'postcss-loader?sourceMap=inline',
        ],
      },
      {
        test: /\.css$/,
        include: [editorPath],
        loaders: [
          'css-loader',
        ],
      },
      { test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192' },
      { test: /\.svg$/, loader: 'url-loader?limit=10000&mimetype=image/svg+xml' },
    ],
  },

Upvotes: 1

Related Questions