[Bug] Serverless Deployement

[carlfedak]

Version

1.0.0

Reproduction link

http://n.a

Operating System

osx

Device

macbook pro

Browser & Version

n/a

Steps to reproduce

Trying to deploy with serverless framework. Have only unzipped project, no code changes:

1. Unzip project

2. npm install

3. Initialize serverless framework project in same directory

4. Edit serverless.yml file to have only the following:
   creativeTimTest:
   component: "@sls-next/[email protected]"

5. execute command "serverless"

What is expected?

Deployed to AWS

What is actually happening?

Error: Command failed with exit code 1: node_modules/.bin/next build
Warning: Built-in CSS support is being disabled due to custom CSS configuration being detected.
See here for more info: https://err.sh/next.js/built-in-css-disabled

warn - Compiled with warnings

./node_modules/next/dist/next-server/server/load-components.js
Critical dependency: the request of a dependency is an expression

./node_modules/next/dist/next-server/server/load-components.js
Critical dependency: the request of a dependency is an expression

./node_modules/next/dist/next-server/server/require.js
Critical dependency: the request of a dependency is an expression

./node_modules/next/dist/next-server/server/require.js
Critical dependency: the request of a dependency is an expression

./node_modules/next/dist/next-server/server/require.js
Critical dependency: the request of a dependency is an expression

Warning: You have opted-out of Automatic Static Optimization due to getInitialProps in pages/_app. This does not opt-out pages with getStaticProps
Read more: https://err.sh/next.js/opt-out-auto-static-optimization

Build error occurred
TypeError: document.querySelector is not a function
at new StyleSheet (/Users/carl/Projects/templates/d1/.next/serverless/pages/admin/grid-system.js:23293:44)
at new StyleSheetRegistry (/Users/carl/Projects/templates/d1/.next/serverless/pages/admin/grid-system.js:17941:33)
at Object.3niX (/Users/carl/Projects/templates/d1/.next/serverless/pages/admin/grid-system.js:5250:26)
at webpack_require (/Users/carl/Projects/templates/d1/.next/serverless/pages/admin/grid-system.js:23:31)
at Object.nWF0 (/Users/carl/Projects/templates/d1/.next/serverless/pages/admin/grid-system.js:31943:14)
at webpack_require (/Users/carl/Projects/templates/d1/.next/serverless/pages/admin/grid-system.js:23:31)
at Object.DTay (/Users/carl/Projects/templates/d1/.next/serverless/pages/admin/grid-system.js:11651:18)
at webpack_require (/Users/carl/Projects/templates/d1/.next/serverless/pages/admin/grid-system.js:23:31)
at Object.VDXt (/Users/carl/Projects/templates/d1/.next/serverless/pages/admin/grid-system.js:19892:38)
at webpack_require (/Users/carl/Projects/templates/d1/.next/serverless/pages/admin/grid-system.js:23:31) {
type: 'TypeError'
}
info - Creating an optimized production build...
info - Collecting page data...

---

Solution

Additional comments

I realize this isn't necessarily part of your template but help would be appreciated. I CAN do the above with a simple:

1. npx create-next-app
2. initialize serverless project
3. Use same serverless.yml
4. execute command "serverless"

I believe this is something that is being used in the grid-system.js file (and most/all of the files in the pages/admin directory), as a test I deleted that and the next one triggered was full-screen-maps.js, followed by google-maps.js (all in the admin page directory). If I scrap that whole directory (pages/admin) then it works fine, output similar to this:

creativeTimTest:
appUrl: https://myURL
bucketName:
distributionId:

64s › creativeTimTest › done

Any advice would be greatly appreciated.

[dan-valang]

I get the same error when using target: 'serverless' on next config

[carlfedak]

If the dev happens to come along here:

1. Unzip your template folder
2. npm install
3. Edit next.config.js:

const withPlugins = require("next-compose-plugins");
const withImages = require("next-images");
const withSass = require("@zeit/next-sass");
const withCSS = require("@zeit/next-css");
const webpack = require("webpack");
const path = require("path");

module.exports = withPlugins([[withSass], [withImages], [withCSS]], {
  target: 'serverless',
  webpack(config, options) {
    config.resolve.modules.push(path.resolve("./"));
    return config;
  },
});

4. npm run build

Errors will show:

Build error occurred
TypeError: document.querySelector is not a function
at new StyleSheet (/Users/carl/Projects/templates/test1/.next/serverless/pages/admin/full-screen-maps.js:33510:44)
at new StyleSheetRegistry (/Users/carl/Projects/templates/test1/.next/serverless/pages/admin/full-screen-maps.js:26034:33)
at Object.3niX (/Users/carl/Projects/templates/test1/.next/serverless/pages/admin/full-screen-maps.js:7518:26)
at webpack_require (/Users/carl/Projects/templates/test1/.next/serverless/pages/admin/full-screen-maps.js:23:31)
at Object.nWF0 (/Users/carl/Projects/templates/test1/.next/serverless/pages/admin/full-screen-maps.js:44809:14)
at webpack_require (/Users/carl/Projects/templates/test1/.next/serverless/pages/admin/full-screen-maps.js:23:31)
at Object.DTay (/Users/carl/Projects/templates/test1/.next/serverless/pages/admin/full-screen-maps.js:16299:18)
at webpack_require (/Users/carl/Projects/templates/test1/.next/serverless/pages/admin/full-screen-maps.js:23:31)
at Object.VDXt (/Users/carl/Projects/templates/test1/.next/serverless/pages/admin/full-screen-maps.js:28157:38)
at webpack_require (/Users/carl/Projects/templates/test1/.next/serverless/pages/admin/full-screen-maps.js:23:31) {
type: 'TypeError'
}

[labedal]

Iam interested to to resolve this bug.

[labedal]

I had the problem with another project. My way to solve this was:

_app.tsx -> add following after your imports:

if (typeof document === 'undefined') { // @ts-ignore global.document = { querySelector: function () {}, }; }

[einazare]

Hello guys,

Sorry for this late reply, I do not know why Github never notified me about this issue.
At the moment I do not have any idea how to fix this.
If you've managed to fix it, could you please share your fix here as well?

Best,
Manu

[einazare]

Hello again, guys, @carlfedak @dvalle-nearsoft @labedal ,

I've managed to solve this.
First of all, you need to change all of the files that make use of makeStyles. You need to move the following code:

const useStyles = makeStyles(styles);

From outside of the components, to inside of them, so for example this file components/Accordion/Accordion.js, will be changed from:

...

const useStyles = makeStyles(styles);

export default function AccordionExample(props) {
  ...
  const classes = useStyles();
  ...
  );
}

Accordion.defaultProps = {
  ...
};

Accordion.propTypes = {
  ...
};

To

...

export default function AccordionExample(props) {
  ...
  const useStyles = makeStyles(styles);
  const classes = useStyles();
  ...
  );
}

Accordion.defaultProps = {
  ...
};

Accordion.propTypes = {
  ...
};

So, I just moved const useStyles = makeStyles(styles); inside the component/function (NOTE: there are 69 components that make use of the above code, so you need to make the above change in all 69 of them - it took me around 1 minute with find and replace).
After that, you need to go inside variables/charts.js, and delete the following bits of codes (it took me around 1 minute with find and replace):

• 1 occurence

if (typeof window === "undefined") {
  global.window = {};
}
if (typeof document === "undefined") {
  global.document = {};
}
// ##############################
// // // javascript library for creating charts
// #############################
var Chartist = require("chartist");

• 3 occurances:

    lineSmooth: Chartist.Interpolation.cardinal({
      tension: 0,
    }),

• 3 occurances:

    lineSmooth: Chartist.Interpolation.cardinal({
      tension: 10,
    }),

• 6 occurenaces

easing: Chartist.Svg.Easing.easeOutQuint,

And that it is. You are good to go. These days, not sure if today, tomorrow, or on Monday (1st of February 2021), I'll release a new version with the above changes.

Best,
Manu