menu

ZEIT

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

Channels
Team

Next.js 7 & next-css @ now?

January 21, 2019 at 6:04pm

Next.js 7 & next-css @ 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('

/next-css')

module.exports = withCSS()

(working fine in dev)

now.js

{

"version": 2,

"builds": [

{ "src": "next.config.js", "use": "

/next" },

{ "src": "static/**/*", "use": "

/static" }

]

}

(i also tried using { "src": "package.json", "use": "

/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": "

/next" }

like-fill
1
  • reply
  • like

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

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": "

/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

/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 /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