Next-plugins: next-css not working with next 6 & next 7

[CYB3RL1F3]

Bug report

Impossible to load style from node_module react-slick.

Describe the bug

Receive this message :

Module build failed (from app/node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleParseError: Module parse failed: Unexpected character '' (1:0)
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)

To Reproduce

apply next.config.js like following :

module.exports = withCss(withTypescript({
    distDir: '../dist',
}));

Also tried :

const wcss = withCss({
    server: true
});

module.exports = withTypescript({
    distDir: '../dist',
    ...wcss
});

I tried options like modules, etc...
The CSS file is loaded from a node_module.
Important : we are in a lerna context. The component using the css is in UI and called from main-app. The typescript is configured in UI (that's why there is only distDir in the typescript options).

Steps to reproduce the behavior, please provide code snippets or a repository:
with next 7.0.0 and next-css 1.0.0

System information

• Version of Next.js: [e.g. 7.0.0]

Additional context

Add any other context about the problem here.

[needcaffeine]

Please show how you are referencing the actual stylesheet.

[CYB3RL1F3]

using import :

import 'slick-carousel/slick/slick-theme.css';
import 'slick-carousel/slick/slick.css';

I also tried the following way :

const withPlugins = (nextConfig = {}) => {
    return Object.assign({}, nextConfig, {
        webpack(config, options) {
            if (!config.plugins) config.plugins = [];
            config.plugins.push(
                new MiniCssExtractPlugin({
                    filename: 'style.css',
                    chunkFilename: '[name].css'
                })
            );
            config.module.rules.push({
                test: /\.css$/,
                use: [
                    {
                        loader: MiniCssExtractPlugin.loader,
                        options: {
                            publicPath: './static'
                        }
                    },
                    {
                        loader: 'css-loader',
                        options: {
                            modules: true,
                            sourceMap: true
                        }
                    }
                ]
            });

            if (typeof nextConfig.webpack === 'function') {
                return nextConfig.webpack(config, options);
            }

            return config;
        }
    });
};

And have as result :

Unexpected token .
site/node_modules/slick-carousel/slick/slick.css:2
.slick-slider
^

SyntaxError: Unexpected token .

I really need CSS in the project. A clue ?

[efleurine]

@CYB3RL1F3 it may be related to this issue #77 since you are also using typescript too.

[dptoot]

It appears this would be the issue.

https://github.com/webpack-contrib/mini-css-extract-plugin/issues/282

Removing @font-face declarations work for me (although I need them)

[mastepanoski]

Same issue:

TypeError: Cannot destructure property createHash of 'undefined' or 'null'.
at Object. (app/node_modules/mini-css-extract-plugin/dist/index.js:21:5)
at Module._compile (module.js:653:30)
at Object.Module._extensions..js (module.js:664:10)
at Module.load (module.js:566:32)
at tryModuleLoad (module.js:506:12)
at Function.Module._load (module.js:498:3)
at Module.require (module.js:597:17)
at require (internal/module.js:11:18)
at Object. (app/node_modules/mini-css-extract-plugin/dist/cjs.js:3:18)
at Module._compile (module.js:653:30)
at Object.Module._extensions..js (module.js:664:10)

next.config.js

'use strict'

/* eslint-disable */
const withCss = require('@zeit/next-css')
const withImages = require('next-images')
const withPlugins = require('next-compose-plugins')

// fix: prevents error when .css files are required by node
if (typeof require !== 'undefined') {
    require.extensions['.css'] = (file) => { }
}

module.exports = withPlugins([
    withCss,
    withImages
])

Package.json Deps

{"dependencies": {
"@zeit/next-css": "1.0.1",
"body-parser": "^1.18.3",
"boom": "^7.2.0",
"compression": "^1.7.3",
"connect-session-sequelize": "^5.2.2",
"cookie-parser": "^1.4.3",
"enquire-js": "^0.2.1",
"express": "^4.16.3",
"express-session": "^1.15.6",
"helmet": "^3.13.0",
"isomorphic-unfetch": "^3.0.0",
"lusca": "^1.6.1",
"mobile-detect": "^1.4.3",
"next": "^7.0.1",
"next-compose-plugins": "^2.1.1",
"next-images": "^1.0.1",
"prop-types": "^15.6.2",
"react": "^16.5.2",
"react-dom": "^16.5.2",
"react-iframe": "^1.3.3",
"react-no-ssr": "^1.1.0",
"sequelize": "^4.39.0",
"universal-cookie": "^3.0.4"
},
"optionalDependencies": {
"fsevents": "*"
},
"devDependencies": {
"@storybook/addon-actions": "^3.4.11",
"@storybook/addon-links": "^3.4.11",
"@storybook/addons": "^3.4.11",
"@storybook/react": "^3.4.11",
"babel-core": "^6.26.3",
"babel-eslint": "^10.0.1",
"babel-runtime": "^6.26.0",
"faker": "^4.1.0",
"husky": "^1.1.0",
"jest": "^23.6.0",
"snazzy": "^8.0.0",
"standard": "^12.0.1"
},
"standard": {
"parser": "babel-eslint",
"globals": [
"describe",
"it",
"fetch",
"navigator",
"__DEV__",
"XMLHttpRequest",
"FormData",
"React$Element"
],
"ignore": [
"logs",
"node_modules"
]
},
"engines": {
"node": "8.x.x"
},
"husky": {
"hooks": {
"pre-commit": "npm run lint"
}
}}

If you run _NODE_ENV=production next build_ or _NODE_ENV=development node index.js_ then the exception will be triggered.

[olastor]

+1 doesn't work for me either (next 7.0.1, @zeit/next-css 1.0.1)

TypeError: Cannot destructure property `createHash` of 'undefined' or 'null'.

[olastor]

A quick fix for me was adding webpack as a dependency, using yarn add webpack

[manuelbieh]

Same issue here but only on Windows 10 with Cygwin. When I switch to Ubuntu on Windows Linux Subsystem it works fine. Same project, same node_modules.

[timneutkens]

Hi, thanks for creating an issue. We currently recommend using https://nextjs.org/docs/basic-features/built-in-css-support as the plugins have been deprecated in favor of the built-in support.