Next.js pages using Link module not loading files with CSS import

Viewed 5810

I'm adding next.js (7.0.2) to an existing project and can't figure out why the Link module isn't loading pages that have import 'style.css'.

I have followed the @zeit/next-css instructions and also the Next.js/Express integration.

I installed the following packages

  • next 7.0.2
  • @zeit/next-css
  • css-loader@1.0.1
  • express (v4)

next.config.js

    // ./next.config.js file
    const withCSS = require('@zeit/next-css')
    module.exports = withCSS() 

index.js

    // ./pages/index.js file
    import Link from 'next/link'
    const Index = () => (
      <div>
        <p>Hello Next.js</p>
        <p>
          <Link href="/test"><a>test</a></Link>
        </p>
      </div>
    )

    export default Index

test.js

    // ./pages/test.js file
    import "../style.css"
    export default () => <div className="example">Hello World!</div>

style.css

    // ./style.css file
      .example {
        font-size: 50px;
      }

Expected behavior: The Link module will load pages with CSS just like it would any other page.

Actual behavior: All pages will load EXCEPT the one that has import 'my.css'. I can load that page directly via a url.

EG -

  1. Works = loading http://localhost:3000/index
  2. Works = loading http://localhost:3000/test (and css is applied)
  3. Does NOT work = Load http://localhost:3000/index and click the test link. Nothing happens. If I go to the Network tab on the Developer Tools (Chrome) I see test.js listed and the initiator is page-loader.js. This seems to be followed by a series of on-demand-entries-ping?page=/ but not sure what it means.

Update: If I comment out the import "../style.css" the file loads (without CSS). So it seems there is something in the css processing with server side routing that isn't right with my setup.

@Darryl - here are the relevant snippets from my express initialization file. The entire file can be found (current iteration) at https://github.com/tagyoureit/nodejs-poolController/blob/6.0-DEV/src/lib/comms/server.js#L33.

  function startServerAsync(type) {
    ...
    const _next = require('next')
    const dev = process.env.NODE_ENV !== 'production'
    ...
    // servers is an object that holds http/https/socketio/mdns and other servers
    // type='http' in current testing
    servers[type].next = _next({ dev }) 
    servers[type].next.prepare()
      .then(() => {
        servers[type].app = express();
        servers[type].server = 
        container.http.createServer(servers[type].app);
        configExpressServer(servers[type].app, express, servers[type].next);
        servers[type].server = servers[type].server.listen(servers[type].port, function () {
        container.logger.verbose('Express Server ' + type + ' listening at port %d', servers[type].port);
        container.io.init(servers[type].server, type)
            resolve('Server ' + type + ' started.');
      });
    }

    // assign static/api routes
    function configExpressServer(app, express, _next) {
      // use next as router
      const handle = _next.getRequestHandler()

      // many app.get / app.use statements
      ...
      // catch all to route through next
      app.get('*', (req, res) => {
        const { parse } = require('url')
        const parsedUrl = parse(req.url, true)
        const { pathname, query } = parsedUrl
        handle(req, res, parsedUrl)
      })
  }
1 Answers

i had this problem too, after spending much more time finally i've found a solution, first thing you shuold manage your code with layouts and then in any pages that uses layouts you must add : import Link From 'next/link' just After importing layout line. i hope this solves your problem

Related