Join the conversation

Sign in to join this conversation, and others like it, in the communities you care about.

ZEIT

Our mission is to make cloud computing as easy and accessible as mobile computing. You can find our Next.js community here.

ZEIT / Now

Next.js 7 & next-css @ now?

Next.js 7 & next-css @ now?

ZEIT / Now · January 21, 2019 at 6:04pm
Hello! I'm new here, trying out "now" and i dont know what i'm doing (wrong).

I used next.js 6 with static-export on my own hoster and wanted to do a relaunch of my webapp with next.js 7 on now.
I do that on codeanywhere.com and everything is working fine (npm run dev, and stuff)

When i use "now" to deploy, i'm getting some errors and i think i've done the basic things.

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

(working fine in dev)

now.js
{
"version": 2,
"builds": [
{ "src": "next.config.js", "use": "@now/next" },
{ "src": "static/**/*", "use": "@now/static" }
]
}
(i also tried using { "src": "package.json", "use": "@now/next" } )

But i'm always getting errors with .css?

"ModuleNotFoundError: Module not found: Error: Can't resolve '../static/css/custom.css' in '/tmp/5b8c698a/pages'"

as i'm using
import "../static/css/custom.css"
and in dev its working fine but i'm getting the error while deploying to now :(

What do i have to do, to make it work?

January 22, 2019 at 10:48am

Hello Daniel! Is your code public? Can you try to follow: 1- You need your Next version to be greater than 8 (eg: "^8.0.0-canary.7"). 2- Include "now-build": "next build" in "scripts". 3- Edit next.config.js to include {"target": "serverless"} 4- Don't forget { "src": "package.json", "use": "@now/next" }

like-fill
1
  • reply
  • like

January 22, 2019 at 4:12pm

Hello Paulo. Right now it is not public :\ So i did every step you mentioned. Its the same error:

resolve '../static/css/custom.css' in '/tmp/51c1849e/pages'
  using description file: /tmp/51c1849e/package.json (relative path: ./pages)
    Field 'browser' doesn't contain a valid alias configuration
    using description file: /tmp/51c1849e/package.json (relative path: ./static/css/custom.css)
      no extension
        Field 'browser' doesn't contain a valid alias configuration
        /tmp/51c1849e/static/css/custom.css doesn't exist
      .wasm
        Field 'browser' doesn't contain a valid alias configuration
        /tmp/51c1849e/static/css/custom.css.wasm doesn't exist
      .mjs
        Field 'browser' doesn't contain a valid alias configuration
        /tmp/51c1849e/static/css/custom.css.mjs doesn't exist
      .js
        Field 'browser' doesn't contain a valid alias configuration
        /tmp/51c1849e/static/css/custom.css.js doesn't exist
      .jsx
        Field 'browser' doesn't contain a valid alias configuration
        /tmp/51c1849e/static/css/custom.css.jsx doesn't exist
      .json
        Field 'browser' doesn't contain a valid alias configuration
        /tmp/51c1849e/static/css/custom.css.json doesn't exist
      as directory
        /tmp/51c1849e/static/css/custom.css doesn't exist

and now with next.js 8, the site is reloading every 10 seconds or so in npm run dev :(

  • reply
  • like

Daniel, let's try this: Rename static to something else, like vendor, and tell me if it works. Remember to change your imports too.

Edited
  • reply
  • like

January 22, 2019 at 5:27pm

PS: The above is needed because our Next.js builder does not downloads static/ for performance reasons. We will document this behavior soon.

Edited
  • reply
  • like

IT WORKS (nearly). Okay, that did its thing, but i have css, js and images in vendor. Only css is working, for js and images i get 404. In my now.js i have { "src": "vendor/**/*", "use": "@now/static" }. Do i have to specify something?

  • reply
  • like

Check the "Output" section of your deployment in .now.sh/_src for clues. Can you share that with us here? You can DM me as well...

Edited
  • reply
  • like

@now/next doesn’t download /static for performance reasons. For example it can hold many static assets that are not needed for the build process. You don't have to add any other "builds" as @now/next will automatically make /static available, it just doesn't download it for the build step. Meaning that you have to move out anything that you import in the application into a different directory.

  • reply
  • like

Check the "Output" section of your deployment in .now.sh/_src for clues. Can you share that with us here? You can DM me as well...

while building he does find my vendor-stuff, but in _src it shows only css.

┌ package.json        Ready               [47s]
├── λ index (253.91KB) [sfo1]
├── \_next/static/chunks/0.js (424B)
├── \_next/static/chunks/0.js.map (99B)
├── \_next/static/chunks/styles.507f0b1b6344a5c714e6.js (106B)
├── \_next/static/chunks/styles.js (2.47KB)
├── \_next/static/chunks/styles.js.map (2.44KB)
├── \_next/static/runtime/main-e64b80a499e3424325a7.js (20.38KB)
├── \_next/static/runtime/webpack-89179faa512dd01fbb62.js (1.45KB)
├── \_next/static/runtime/webpack.js (33.84KB)
├── \_next/static/runtime/webpack.js.map (35.07KB)
├── \_next/static/webpack/52f6162a3a1216312356.hot-update.json (48B)
├── \_next/static/webpack/cae0d8bdc0e5fa824372.hot-update.json (35B)
├── \_next/static/webpack/styles.52f6162a3a1216312356.hot-update.js (1.27KB)
├── \_next/static/webpack/styles.52f6162a3a1216312356.hot-update.js.map (1.3KB)
├── \_next/static/X5Q5~T6ddZXNHOE1Fs1M5/pages/\_app.js (3.62KB)
├── \_next/static/X5Q5~T6ddZXNHOE1Fs1M5/pages/\_error.js (4.7KB)
├── \_next/static/X5Q5~T6ddZXNHOE1Fs1M5/pages/index.js (50.32KB)
├── \_next/static/chunks/commons.97139d6aa7123f625a00.js (181.89KB)
├── \_next/static/css/styles.chunk.css (244.08KB)
├── \_next/static/css/styles.chunk.css.map (244.84KB)
├── \_next/static/css/styles.f38cb2d1.chunk.css (244.04KB)
├── \_next/static/development/pages/\_error.js.map (203.13KB)
├── \_next/static/development/pages/\_app.js.map (277.76KB)
├── \_next/static/development/pages/\_error.js (266.19KB)
├── \_next/static/development/pages/\_app.js (346.65KB)
├── \_next/static/development/pages/index.js.map (414.87KB)
├── \_next/static/development/pages/index.js (573.76KB)
├── \_next/static/development/dll/dll\_47f70750073cb71555d8.js (834.53KB)
├── \_next/static/runtime/main.js (850.9KB)
└── \_next/static/runtime/main.js.map (850.07KB)
┌ vendor/\*\*/\*         Ready               [513ms]
├── vendor/fonts/B-McE.ttf
├── vendor/img/ic\_check.svg
├── vendor/css/uikit.min.css
├── vendor/js/serviceworker.js
├── vendor/img/ic\_uncheck.1.svg
├── vendor/img/monitor.png
├── vendor/css/custom.css
├── vendor/img/ic\_uncheck.svg
├── vendor/img/ic\_check.1.svg
├── vendor/css/uikit.css
├── vendor/img/headerimage.png
├── vendor/img/google-play-badge.svg
├── vendor/fonts/B-McE.woff
├── vendor/js/uikit-icons.min.js
├── vendor/img/hero\_desktop.png
├── vendor/img/playstore.png
├── vendor/js/uikit.js
├── vendor/img/Download\_on\_the\_App\_Store\_Badge\_DE\_Source\_135x40.svg
├── vendor/img/apple.png
├── vendor/js/uikit.min.js
├── vendor/img/hero\_mobile.png
├── vendor/js/uikit-icons.js
└── vendor/img/backgroundimage.png
> Success! Deployment ready [51s]

same with run dev and here its refreshing the page every 10 seconds.

Edited
  • reply
  • like

Log in or sign up to chat