Next.js: with-ant-design example does not export

Created on 3 Apr 2019 · 8Comments · Source: vercel/next.js

Examples bug report

Example name

with-ant-design

Describe the bug

It is not possible to export the example.

To Reproduce

Steps to reproduce the behavior, please provide code snippets or a repository:

Go to with-ant-design example
Follow the setup instructions
Add "export": "next build && next export" to the scripts section
run npm run export
The export fails with the following error:

> using build directory: /private/tmp/with-ant-design-app/.next
  copying "static build" directory
> No "exportPathMap" found in "next.config.js". Generating map from "./pages"
  launching 3 threads with concurrency of 10 per thread
[=--] 1/3 33% Infinity/s 0.0s /private/tmp/with-ant-design-app/node_modules/antd/lib/style/index.css:7
body {
     ^

SyntaxError: Unexpected token {
    at createScript (vm.js:80:10)
    at Object.runInThisContext (vm.js:139:10)
    at Module._compile (module.js:617:28)
    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.<anonymous> (/private/tmp/with-ant-design-app/node_modules/antd/lib/form/style/css.js:3:1)
/private/tmp/with-ant-design-app/node_modules/antd/lib/style/index.css:7
body {
     ^

SyntaxError: Unexpected token {
    at createScript (vm.js:80:10)
    at Object.runInThisContext (vm.js:139:10)
    at Module._compile (module.js:617:28)
    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.<anonymous> (/private/tmp/with-ant-design-app/node_modules/antd/lib/form/style/css.js:3:1)
{}
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] export: `next build && next export`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] export script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

Expected behavior

The export should have succeeded, and I should have been able to run the static website.

System information

OS: macOS 10.14.4 (18E226)
Version of Next.js: [email protected]

Source

rgreinho

👍4

Most helpful comment

I created a script with headless chrome to run export script by manually executing pupetter:

const render = require('prerender-chrome-headless');
const fs = require('fs');
const handler = require('../build/home').default;
const renderHtml = async () => {
  const html = await render('http://localhost:3000');
  fs.writeFileSync('build/index.html', html);
}
const httpServer = require('http').createServer(handler);
httpServer.listen('3000');
renderHtml().then(() => {
  httpServer.close();
});

handler is an export express server.

Just leave here for anyone interested.

revskill10 on 5 Apr 2019

👍3

All 8 comments

It works fine with version 7.0.2.

rgreinho on 3 Apr 2019

Same problem here.

amesas on 3 Apr 2019

I looked into this and the issue is that when exporting next compiles in worker and therefore the following workaround won't work https://github.com/zeit/next.js/blob/94603cff14d21ed40a302e3916e2816be43580d7/examples/with-ant-design/next.config.js#L4-L7

Chances are that Next is not compiling files from node_modules and it is possible to tweak the webpack config to add an exception for those css files so that next-css processes them.

giuseppeg on 3 Apr 2019

See #6727, it includes a workaround patch (which I'm successfully using since 8.0).

lukasluecke on 4 Apr 2019

I created a script with headless chrome to run export script by manually executing pupetter:

const render = require('prerender-chrome-headless');
const fs = require('fs');
const handler = require('../build/home').default;
const renderHtml = async () => {
  const html = await render('http://localhost:3000');
  fs.writeFileSync('build/index.html', html);
}
const httpServer = require('http').createServer(handler);
httpServer.listen('3000');
renderHtml().then(() => {
  httpServer.close();
});

handler is an export express server.

Just leave here for anyone interested.

revskill10 on 5 Apr 2019

👍3

I'm also encountered this problem. Still waiting for patch.

samuelg123 on 6 Apr 2019

Same here. Any hope for a fix in the next release?

nguyend91 on 8 Apr 2019

👍1

I created a script with headless chrome to run export script by manually executing pupetter:

const render = require('prerender-chrome-headless');
const fs = require('fs');
const handler = require('../build/home').default;
const renderHtml = async () => {
  const html = await render('http://localhost:3000');
  fs.writeFileSync('build/index.html', html);
}
const httpServer = require('http').createServer(handler);
httpServer.listen('3000');
renderHtml().then(() => {
  httpServer.close();
});