Error: Module Parse failed, when importing a css file. #1065

New Issue

fergalmoran · 2025-08-09T17:18:44Z

fergalmoran commented

2025-08-09 17:18:44 +00:00

Originally created by @KraigWalker on 1/31/2017

I'm using the React Redux Spa template with the latest webpack 2 changes, and have started to add component-specific styles.css files in my project.

I'm having difficulty getting the webpack build to run successfully however, and I'm not quite certain why this is.

I have a component NavTop which imports it's own styles.css file, in a similary fashion to what's seen in client-boot.tsx:

import './styles.css';
import * as React from "react";
import { Link } from "react-router";

import { UserPanel } from '../../Panels/UserPanel';

...

export class NavTop extends React.Component<PanelProps, PanelState> {
...
}

When attempting to build, webpack gives me the following error:

ERROR in ./clientapp/components/Navigation/NavTop/styles.css
    Module parse failed: C:\MyPath\ReactReduxSpa\clientapp\components\Navigation\NavTop\styles.css Unexpected token (2:0)
    You may need an appropriate loader to handle this file type.
    | /* Header: Horizontal Top Bar */
    | .app-nav-horizontal {
    |     display: inline-flex;
    |     height: 60px;
     @ ./clientapp/components/Navigation/NavTop/NavTop.tsx 11:0-23
     @ ./clientapp/components/Layout.tsx
     @ ./clientapp/routes.tsx
     @ ./clientapp/boot-server.tsx

When I remove the import statement from the file, the webpack build completes successfully without including the styles.css of the NavTop component.

My webpack.config.js file is as follows:

const path = require('path');
const webpack = require('webpack');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const CheckerPlugin = require('awesome-typescript-loader').CheckerPlugin;
const merge = require('webpack-merge');

module.exports = (env) => {
    const isDevBuild = !(env && env.prod);

    // Configuration in common to both client-side and server-side bundles
    const sharedConfig = () => ({
        stats: { modules: false },
        resolve: { extensions: ['.js', '.jsx', '.ts', '.tsx'] },
        output: {
            filename: '[name].js',
            publicPath: '/dist/' // Webpack dev middleware, if enabled, handles requests for this URL prefix
        },
        module: {
            rules: [
                { test: /\.tsx?$/, include: /clientapp/, use: 'babel-loader' },
                { test: /\.tsx?$/, include: /clientapp/, use: 'awesome-typescript-loader?silent=true' }
            ]
        },
        plugins: [new CheckerPlugin()]
    });

    // Configuration for client-side bundle suitable for running in browsers
    const clientBundleOutputDir = './wwwroot/dist';
    const clientBundleConfig = merge(sharedConfig(), {
        entry: { 'main-client': './clientapp/boot-client.tsx' },
        module: {
            rules: [
                { test: /\.css$/, use: ExtractTextPlugin.extract({ loader: 'css-loader' }) },
                { test: /\.(png|jpg|jpeg|gif|svg)$/, use: 'url-loader?limit=25000' }
            ]
        },
        output: { path: path.join(__dirname, clientBundleOutputDir) },
        plugins: [
            new ExtractTextPlugin('site.css'),
            new webpack.DllReferencePlugin({
                context: __dirname,
                manifest: require('./wwwroot/dist/vendor-manifest.json')
            })
        ].concat(isDevBuild ? [
            // Plugins that apply in development builds only
            new webpack.SourceMapDevToolPlugin({
                filename: '[file].map', // Remove this line if you prefer inline source maps
                moduleFilenameTemplate: path.relative(clientBundleOutputDir, '[resourcePath]') // Point sourcemap entries to the original file locations on disk
            })
        ] : [
            // Plugins that apply in production builds only
            new webpack.optimize.UglifyJsPlugin()
        ])
    });

    // Configuration for server-side (prerendering) bundle suitable for running in Node
    const serverBundleConfig = merge(sharedConfig(), {
        resolve: { mainFields: ['main'] },
        entry: { 'main-server': './clientapp/boot-server.tsx' },
        plugins: [
            new webpack.DllReferencePlugin({
                context: __dirname,
                manifest: require('./clientapp/dist/vendor-manifest.json'),
                sourceType: 'commonjs2',
                name: './vendor'
            })
        ],
        output: {
            libraryTarget: 'commonjs',
            path: path.join(__dirname, './clientapp/dist')
        },
        target: 'node',
        devtool: 'inline-source-map'
    });

    return [clientBundleConfig, serverBundleConfig];
};

My package.json file is on-par with what's currently used in the ReactReduxSpa example, using webpack 2.2 etc.

Is there something I'm doing wrong with regards to importing additional css files (i.e not css/site.css) ? 😖

Any help would be greatly appreciated

*Originally created by @KraigWalker on 1/31/2017* I'm using the React Redux Spa template with the latest webpack 2 changes, and have started to add component-specific `styles.css` files in my project. I'm having difficulty getting the webpack build to run successfully however, and I'm not quite certain why this is. I have a component `NavTop` which imports it's own `styles.css` file, in a similary fashion to what's seen in `client-boot.tsx`: ```javascript import './styles.css'; import * as React from "react"; import { Link } from "react-router"; import { UserPanel } from '../../Panels/UserPanel'; ... export class NavTop extends React.Component<PanelProps, PanelState> { ... } ``` When attempting to build, webpack gives me the following error: ```` ERROR in ./clientapp/components/Navigation/NavTop/styles.css Module parse failed: C:\MyPath\ReactReduxSpa\clientapp\components\Navigation\NavTop\styles.css Unexpected token (2:0) You may need an appropriate loader to handle this file type. | /* Header: Horizontal Top Bar */ | .app-nav-horizontal { | display: inline-flex; | height: 60px; @ ./clientapp/components/Navigation/NavTop/NavTop.tsx 11:0-23 @ ./clientapp/components/Layout.tsx @ ./clientapp/routes.tsx @ ./clientapp/boot-server.tsx ```` When I remove the `import` statement from the file, the webpack build completes successfully without including the `styles.css` of the `NavTop` component. My `webpack.config.js` file is as follows: ```javascript const path = require('path'); const webpack = require('webpack'); const ExtractTextPlugin = require('extract-text-webpack-plugin'); const CheckerPlugin = require('awesome-typescript-loader').CheckerPlugin; const merge = require('webpack-merge'); module.exports = (env) => { const isDevBuild = !(env && env.prod); // Configuration in common to both client-side and server-side bundles const sharedConfig = () => ({ stats: { modules: false }, resolve: { extensions: ['.js', '.jsx', '.ts', '.tsx'] }, output: { filename: '[name].js', publicPath: '/dist/' // Webpack dev middleware, if enabled, handles requests for this URL prefix }, module: { rules: [ { test: /\.tsx?$/, include: /clientapp/, use: 'babel-loader' }, { test: /\.tsx?$/, include: /clientapp/, use: 'awesome-typescript-loader?silent=true' } ] }, plugins: [new CheckerPlugin()] }); // Configuration for client-side bundle suitable for running in browsers const clientBundleOutputDir = './wwwroot/dist'; const clientBundleConfig = merge(sharedConfig(), { entry: { 'main-client': './clientapp/boot-client.tsx' }, module: { rules: [ { test: /\.css$/, use: ExtractTextPlugin.extract({ loader: 'css-loader' }) }, { test: /\.(png|jpg|jpeg|gif|svg)$/, use: 'url-loader?limit=25000' } ] }, output: { path: path.join(__dirname, clientBundleOutputDir) }, plugins: [ new ExtractTextPlugin('site.css'), new webpack.DllReferencePlugin({ context: __dirname, manifest: require('./wwwroot/dist/vendor-manifest.json') }) ].concat(isDevBuild ? [ // Plugins that apply in development builds only new webpack.SourceMapDevToolPlugin({ filename: '[file].map', // Remove this line if you prefer inline source maps moduleFilenameTemplate: path.relative(clientBundleOutputDir, '[resourcePath]') // Point sourcemap entries to the original file locations on disk }) ] : [ // Plugins that apply in production builds only new webpack.optimize.UglifyJsPlugin() ]) }); // Configuration for server-side (prerendering) bundle suitable for running in Node const serverBundleConfig = merge(sharedConfig(), { resolve: { mainFields: ['main'] }, entry: { 'main-server': './clientapp/boot-server.tsx' }, plugins: [ new webpack.DllReferencePlugin({ context: __dirname, manifest: require('./clientapp/dist/vendor-manifest.json'), sourceType: 'commonjs2', name: './vendor' }) ], output: { libraryTarget: 'commonjs', path: path.join(__dirname, './clientapp/dist') }, target: 'node', devtool: 'inline-source-map' }); return [clientBundleConfig, serverBundleConfig]; }; ``` My package.json file is on-par with what's currently used in the ReactReduxSpa example, using webpack 2.2 etc. Is there something I'm doing wrong with regards to importing additional css files (i.e not `css/site.css`) ? 😖 Any help would be greatly appreciated

fergalmoran closed this issue

2025-08-09 17:18:44 +00:00

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: github/JavaScriptServices#1065