Next.js: Error resolving a CSS file import with custom Webpack rule

[kpuputti]

Hi!

I'm (eventually) attempting to build a PostCSS/cssnext setup on top of Next.js, but somehow importing a CSS file cannot be resolved.

My pages/index.js file tries to import the pages/index.css file (that exists):

import './index.css'

With the Webpack config:

next.config.js:

module.exports = {
  webpack(config) {
    config.module.rules.push({
      test: /\.css$/,
      exclude: /node_modules/,
      loader: ['style-loader', 'css-loader']
    });
    return config;
  }
};

results in

output:

yarn run v0.15.1
$ next
> Using "webpack" config function defined in next.config.js.
 DONE  Compiled successfully in 3004ms

> Ready on http://localhost:3000
{ Error: Cannot find module './index.css'
    at Function.Module._resolveFilename (module.js:469:15)
    at Function.Module._load (module.js:417:25)
    at Module.require (module.js:497:17)
    at require (internal/module.js:20:19)
    at Object.<anonymous> (/Users/kpuputti/code/projects/nextlatest/pages/index.js?entry:3:1)
    at Module._compile (module.js:570:32)
    at Object.Module._extensions..js (module.js:579:10)
    at Module.load (module.js:487:32)
    at tryModuleLoad (module.js:446:12)
    at Function.Module._load (module.js:438:3) code: 'MODULE_NOT_FOUND' }

Package versions in package.json:

  "dependencies": {
    "css-loader": "^0.26.1",
    "next": "2.0.0-beta.12",
    "style-loader": "^0.13.1"
  }

Do I need to do some extra setup to get the resolving work, or how should I approach this? Thanks!

[Chathula]

https://github.com/css-modules/css-modules-require-hook

as i heard this works perfectly!

[joelburget]

I have a similar issue with raw importing markdown.

next.config.js

module.exports = {
  webpack: (config, { dev }) => {
    config.module.rules.push({ test: /\.md$/, loader: 'raw-loader' });
    return config;
  }
}

code

import React from 'react';

import render from '../md/renderer';
import Wrapper from '../components/Wrapper';

import content from './index.md';

export default () => (
  <Wrapper>
    {render(content)}
  </Wrapper>
)

error

> Ready on http://localhost:3000
{ Error: Cannot find module './index.md'
    at Function.Module._resolveFilename (module.js:472:15)
    at Function.Module._load (module.js:420:25)
    at Module.require (module.js:500:17)
    at require (internal/module.js:20:19)
    at Object.<anonymous> (/Users/joel/sites/joelburget.com/pages/index.js?entry:6:1)
    at Module._compile (module.js:573:32)
    at Object.Module._extensions..js (module.js:582:10)
    at Module.load (module.js:490:32)
    at tryModuleLoad (module.js:449:12)
    at Function.Module._load (module.js:441:3) code: 'MODULE_NOT_FOUND' }

[joelburget]

As an additional data point, if I load the page in the browser (showing the error), then edit my source with any change, including adding a blank line, the page live reloads and shows the expected content. But when I reload I get the error page again.

[joelburget]

Also, I was running 2.0.0-beta.0 when I first saw this error and have since upgraded to 2.0.0-beta.9 and still see it.

[skidding]

It seems like the problem is an imparity between server and client side rendering. You add a webpack loader for some new file type but it doesn't apply on the first render (because SSR doesn't involve bundling via webpack, right?), so it doesn't work. But if you manage to re-render on the client (either by following a link or triggering HMR) it works.

If this is correct, the whole extending your webpack config to add additional loaders use case is flawed, because SSR is at the core of Next.js. @rauchg

The alternative is to rely on Babel transforms instead of webpack loaders, because those get applied consistently.

[arunoda]

Guys, yes this is a real problem.
The real issue comes when we need to deal with the server side.
Since we don't(and can't) run webpack on the server, if a module introduce a new file extension to require, it'll be kind a hard to do.

Just like @skidding mentioned, babel plugins will be the solution for this. (At least in the short term)

[davidrossjones]

@arunoda No way to get this working on the server? Something like this? https://github.com/halt-hammerzeit/universal-webpack

[arunoda]

Thanks @davidrossjones. I have seen similar projects. But we need find a reliable but performant way to do it. Need to investigate into these tools.

[Larry850806]

I have the same problems when I import the bootstrap css. Is there any solution?

[noeljackson]

Has any one tried using https://github.com/istarkov/babel-plugin-webpack-loaders with success?

[arunoda]

@noeljackson That should be something interesting. I'd like to play with this.

[noeljackson]

@arunoda It seems like babel-plugin-webpack-loaders should work, but then I run into an issue with loading pages and webpack-hot-middleware-client ... I tested this with Rauch's blog example of next.js This is the type of error I get.

Module build failed: TypeError: /Users/noel/n/optimized.technology/pages/2014/7-principles-of-rich-web-applications.js?entry: Path must be a string. Received undefined
    at assertPath (path.js:7:11)
    at Object.parse (path.js:1494:5)
    at Object.<anonymous> (/Users/noel/n/optimized.technology/webpack.config.js:16:35)
    at Module._compile (module.js:570:32)
    at loader (/Users/noel/n/optimized.technology/node_modules/babel-register/lib/node.js:144:5)
    at Object.require.extensions.(anonymous function) [as .js] (/Users/noel/n/optimized.technology/node_modules/babel-register/lib/node.js:154:7)
    at Module.load (module.js:487:32)
    at tryModuleLoad (module.js:446:12)
    at Function.Module._load (module.js:438:3)
    at Module.require (module.js:497:17)

 @ multi ./~/next/dist/client/webpack-hot-middleware-client ./pages/2014/7-principles-of-rich-web-applications.js?entry

[davibe]

Please, have a look at https://github.com/davibe/next.js-css-global-style-test and #544

[tgoldenberg]

@davibe I found that the repo you linked to loaded the css / scss but caused other issues. For example, I wasn't able to deploy successfully. Really wish there was better support for css imports in some way... And I don't get why <style jsx>{interpolatedStyles}</style> doesn't work. We should be able to use css as modules some way...

[timneutkens]

This is actually a duplicate of #544. Closing this in favor of having the full CSS importing discussion there.