Failed the building Next.js appliaction only in the Netlify

hideokamoto · September 20, 2021, 12:58pm

Info

Site: stripe-stencil-element.netlify.app
Framework: Next.js
Build Command: yarn build && yarn export
Git: GitHub - stripe-elements/docs

Summary

We made a new Next.js application to deploy into Netlify.
But we’re not sure why our application always failed to build only in Netlify.

We can build the application in our local.

$ next build
info  - Using webpack 5. Reason: Enabled by default https://nextjs.org/docs/messages/webpack5
info  - Checking validity of types  
info  - Creating an optimized production build  
info  - Compiled successfully
info  - Collecting page data  
info  - Generating static pages (12/12)
info  - Finalizing page optimization  

Page                                                       Size     First Load JS
┌ ● / (1207 ms)                                            834 B          99.7 kB
├   /_app                                                  0 B            98.8 kB
├ ○ /404                                                   196 B            99 kB
├ λ /api/hello                                             0 B            98.8 kB
├ ● /blog (841 ms)                                         936 B          99.8 kB
├ ● /blog/[slug] (856 ms)                                  907 B          99.7 kB
├   └ /blog/blog%2Fhello-stripe-webcomponent (856 ms)
├ ● /components (1862 ms)                                  796 B          99.6 kB
├ ● /components/[name] (5549 ms)                           734 B          99.6 kB
├   ├ /components/stripe-payment-sheet (1543 ms)
├   ├ /components/stripe-payment-sheet-modal (1542 ms)
├   ├ /components/stripe-element-modal (1298 ms)
├   └ /components/stripe-payment-request-button (1166 ms)
├ ● /examples                                              739 B          99.6 kB
└ ○ /examples/html-tag                                     809 B          99.6 kB
+ First Load JS shared by all                              98.8 kB
  ├ chunks/framework.a6ad82.js                             42.2 kB
  ├ chunks/main.4560e2.js                                  23.6 kB
  ├ chunks/pages/_app.720faa.js                            30.1 kB
  ├ chunks/webpack.ce14dd.js                               2.95 kB
  └ css/e6888192b85e2a3433eb.css                           4.2 kB

λ  (Server)  server-side renders at runtime (uses getInitialProps or getServerSideProps)
○  (Static)  automatically rendered as static HTML (uses no initial props)
●  (SSG)     automatically generated as static HTML + JSON (uses getStaticProps)
   (ISR)     incremental static regeneration (uses revalidate in getStaticProps)

✨  Done in 27.93s.

So we think it’s a Netlify-related issue.

Error Log

In Netlify, we always get the following error.

9:52:00 PM: $ yarn build && yarn export
9:52:00 PM: yarn run v1.22.10
9:52:00 PM: $ next build
9:52:01 PM: info  - Using webpack 5. Reason: Enabled by default https://nextjs.org/docs/messages/webpack5
9:52:02 PM: warn  - No build cache found. Please configure build caching for faster rebuilds. Read more: https://nextjs.org/docs/messages/no-cache
9:52:02 PM: info  - Checking validity of types...
9:52:12 PM: info  - Creating an optimized production build...
9:52:46 PM: info  - Compiled successfully
9:52:46 PM: info  - Collecting page data...
9:52:47 PM: (node:1734) UnhandledPromiseRejectionWarning: Error [ERR_PACKAGE_PATH_NOT_EXPORTED]: Package subpath './lib/languages/javascript' is not defined by "exports" in /opt/build/repo/node_modules/highlight.js/package.json
9:52:47 PM:     at applyExports (internal/modules/cjs/loader.js:491:9)
9:52:47 PM:     at resolveExports (internal/modules/cjs/loader.js:507:23)
9:52:47 PM:     at Function.Module._findPath (internal/modules/cjs/loader.js:635:31)
9:52:47 PM:     at Function.Module._resolveFilename (internal/modules/cjs/loader.js:953:27)
9:52:47 PM:     at Function.Module._load (internal/modules/cjs/loader.js:842:27)
9:52:47 PM:     at Module.require (internal/modules/cjs/loader.js:1026:19)
9:52:47 PM:     at require (internal/modules/cjs/helpers.js:72:18)
9:52:47 PM:     at Object.7733 (/opt/build/repo/.next/server/pages/_app.js:136:36)
9:52:47 PM:     at __webpack_require__ (/opt/build/repo/.next/server/webpack-runtime.js:25:42)
9:52:47 PM:     at __webpack_exec__ (/opt/build/repo/.next/server/pages/_app.js:417:39)
9:52:47 PM: (node:1734) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag `--unhandled-rejections=strict` (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 1)
9:52:47 PM: (node:1734) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.
9:52:47 PM: > Build error occurred
9:52:47 PM: Error [ERR_PACKAGE_PATH_NOT_EXPORTED]: Package subpath './lib/languages/javascript' is not defined by "exports" in /opt/build/repo/node_modules/highlight.js/package.json
9:52:47 PM:     at applyExports (internal/modules/cjs/loader.js:491:9)
9:52:47 PM:     at resolveExports (internal/modules/cjs/loader.js:507:23)
9:52:47 PM:     at Function.Module._findPath (internal/modules/cjs/loader.js:635:31)
9:52:47 PM:     at Function.Module._resolveFilename (internal/modules/cjs/loader.js:953:27)
9:52:47 PM:     at Function.Module._load (internal/modules/cjs/loader.js:842:27)
9:52:47 PM:     at Module.require (internal/modules/cjs/loader.js:1026:19)
9:52:47 PM:     at require (internal/modules/cjs/helpers.js:72:18)
9:52:47 PM:     at Object.7733 (/opt/build/repo/.next/server/pages/_app.js:136:36)
9:52:47 PM:     at __webpack_require__ (/opt/build/repo/.next/server/webpack-runtime.js:25:42)
9:52:47 PM:     at __webpack_exec__ (/opt/build/repo/.next/server/pages/_app.js:417:39) {
9:52:47 PM:   type: 'NodeError',
9:52:47 PM:   code: 'ERR_PACKAGE_PATH_NOT_EXPORTED'
9:52:47 PM: }
9:52:47 PM: error Command failed with exit code 1.
9:52:47 PM: info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
9:52:47 PM: 
9:52:47 PM: ────────────────────────────────────────────────────────────────
9:52:47 PM:   "build.command" failed                                        
9:52:47 PM: ────────────────────────────────────────────────────────────────
9:52:47 PM: 
9:52:47 PM:   Error message
9:52:47 PM:   Command failed with exit code 1: yarn build && yarn export
9:52:47 PM: 
9:52:47 PM:   Error location
9:52:47 PM:   In Build command from Netlify app:
9:52:47 PM:   yarn build && yarn export
9:52:47 PM: 
9:52:47 PM:   Resolved config
9:52:47 PM:   build:
9:52:47 PM:     command: yarn build && yarn export
9:52:47 PM:     commandOrigin: ui
9:52:47 PM:     environment:
9:52:47 PM:       - GITHUB_ACCESS_TOKEN
9:52:47 PM:       - YARN_FLAGS
9:52:47 PM:     publish: /opt/build/repo/out
9:52:47 PM:     publishOrigin: ui
9:52:47 PM:   plugins:
9:52:47 PM:     - inputs: {}
9:52:47 PM:       origin: ui
9:52:47 PM:       package: '@netlify/plugin-nextjs'

hrishikesh · September 22, 2021, 4:39am

I’m unable to try building this locally as it says I need to be authenticated to make some requests?

Error occurred prerendering page "/components/stripe-element-modal". Read more: https://nextjs.org/docs/messages/prerender-error
HttpError: This endpoint requires you to be authenticated.
    at /Users/hrishikesh/Downloads/docs-main/node_modules/@octokit/request/dist-node/index.js:86:21
    at processTicksAndRejections (node:internal/process/task_queues:96:5)
    at async getGitHubReadme (/Users/hrishikesh/Downloads/docs-main/.next/server/chunks/922.js:20:16)
    at async getStaticProps (/Users/hrishikesh/Downloads/docs-main/.next/server/pages/components/[name].js:88:7)
    at async renderToHTML (/Users/hrishikesh/Downloads/docs-main/node_modules/next/dist/server/render.js:329:24)
    at async /Users/hrishikesh/Downloads/docs-main/node_modules/next/dist/export/worker.js:273:36
    at async Span.traceAsyncFn (/Users/hrishikesh/Downloads/docs-main/node_modules/next/dist/telemetry/trace/trace.js:60:20)
Deprecation: [@octokit/request-error] `error.code` is deprecated, use `error.status`.
    at RequestError.get (/Users/hrishikesh/Downloads/docs-main/node_modules/@octokit/request-error/dist-node/index.js:57:21)
    at renderToHTML (/Users/hrishikesh/Downloads/docs-main/node_modules/next/dist/server/render.js:344:38)
    at processTicksAndRejections (node:internal/process/task_queues:96:5)
    at async /Users/hrishikesh/Downloads/docs-main/node_modules/next/dist/export/worker.js:273:36
    at async Span.traceAsyncFn (/Users/hrishikesh/Downloads/docs-main/node_modules/next/dist/telemetry/trace/trace.js:60:20)

hideokamoto · September 23, 2021, 6:33am

Oh, I forgot to share about the specific of the application…
We need to set a GitHub access token into your environment variables as GITHUB_ACCESS_TOKEN.
I think we can access our GitHub repo using your own personal access token because the target repo is public.

Please read our README.md file to run our application in your local.

Thanks for trying to reproduce our issue!

hideokamoto · September 23, 2021, 6:35am

Just information.

I found a way to work around the issue.
Now we using the require function instead of the import statement.


const registerHljsLanguages = (name: string, pathName?: string): void => {
  try {
    const mod = require(`../node_modules/highlight.js/lib/languages/${pathName || name}`)
    hljs.registerLanguage(name, mod);
  } catch (e) {
    console.log(e)
  }
}
registerHljsLanguages('javascript')
registerHljsLanguages('typescript')
registerHljsLanguages('shell')
registerHljsLanguages('html', 'xml')
registerHljsLanguages('undefined', 'shell')

It’s a temporary solution, but if someone surfacing the same issue, the idea might be helpful.

hrishikesh · September 23, 2021, 7:01am

Thank you for sharing that.

Is there a specific reason why it’s just a temporary solution? Also, is there any difference in behaviour if you try to import the module in the start of the file instead of trying to import it dynamically?

hideokamoto · September 23, 2021, 7:17am

We wanna use the import instead of the require function.
In TypeScript, we usually use the import statement.

I’m not sure why, but when we replace from the import to the require, the error in Netlify will be resolved.
So now we’re using require for temporary to pass the Netlify Building process, but we wanna back to use the import for the future.

hillary · September 28, 2021, 6:39pm

Hey there, @hideokamoto

Thanks for your patience here. I spoken with our NextJS experts today about this, and they are wondering if you uninstall the plugin if you will be able to use import. Let us know!