Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Contributing: Local next build failing #27826

Closed
ctjlewis opened this issue Aug 6, 2021 · 7 comments
Closed

Contributing: Local next build failing #27826

ctjlewis opened this issue Aug 6, 2021 · 7 comments
Labels
bug Issue was opened via the bug report template.

Comments

@ctjlewis
Copy link
Contributor

ctjlewis commented Aug 6, 2021 •
edited

What version of Next.js are you using?

Latest

What version of Node.js are you using?

Latest

What browser are you using?

Chrome (Not relevant)

What operating system are you using?

Ubuntu (Not relevant)

How are you deploying your application?

next build

Describe the Bug

I'm trying to use my local version of Next, following yarn prepublish, to build the example repo (that create-next-app makes) with next build. The local version is linked in package.json via "next": "/path/to/local/next".

yarn dev works as expected, but trying to use the local next build throws:

yarn build
yarn run v1.22.5
$ next build
info  - Using webpack 5. Reason: Enabled by default https://nextjs.org/docs/messages/webpack5
info  - Checking validity of types  
(node:1720046) UnhandledPromiseRejectionWarning: Error: You must provide the URL of lib/mappings.wasm by calling SourceMapConsumer.initialize({ 'lib/mappings.wasm': ... }) before using SourceMapConsumer
    at readWasm (/home/christian/PersonalProjects/next-testing/deferred/node_modules/source-map/lib/read-wasm.js:8:13)
    at wasm (/home/christian/PersonalProjects/next-testing/deferred/node_modules/source-map/lib/wasm.js:25:16)
    at /home/christian/PersonalProjects/next-testing/deferred/node_modules/source-map/lib/source-map-consumer.js:264:14
    at processTicksAndRejections (internal/process/task_queues.js:93:5)
(Use `node --trace-warnings ...` to show where the warning was created)
(node:1720046) 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)
(node:1720046) [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.
(node:1720046) UnhandledPromiseRejectionWarning: Error: You must provide the URL of lib/mappings.wasm by calling SourceMapConsumer.initialize({ 'lib/mappings.wasm': ... }) before using SourceMapConsumer
    at readWasm (/home/christian/PersonalProjects/next-testing/deferred/node_modules/source-map/lib/read-wasm.js:8:13)
    at wasm (/home/christian/PersonalProjects/next-testing/deferred/node_modules/source-map/lib/wasm.js:25:16)
    at /home/christian/PersonalProjects/next-testing/deferred/node_modules/source-map/lib/source-map-consumer.js:264:14
    at processTicksAndRejections (internal/process/task_queues.js:93:5)
(node:1720046) 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: 2)
info  - Creating an optimized production build  
Failed to compile.

HookWebpackError: aSourceMapConsumer.originalPositionFor is not a function


> Build error occurred
Error: > Build failed because of webpack errors
    at /home/christian/PersonalProjects/next-testing/deferred/node_modules/next/dist/build/index.js:390:19
    at async Span.traceAsyncFn (/home/christian/PersonalProjects/next-testing/deferred/node_modules/next/dist/telemetry/trace/trace.js:60:20)
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

I tried moving the project inside the next/ project, but that throws a different error I encountered multiple times trying to develop locally, a complaint about the Document class in next/document using hooks:

yarn next dev next-testing/deferred/
yarn run v1.22.5
$ node --trace-deprecation --enable-source-maps packages/next/dist/bin/next dev next-testing/deferred/
ready - started server on 0.0.0.0:3000, url: http://localhost:3000
info  - Using webpack 5. Reason: Enabled by default https://nextjs.org/docs/messages/webpack5
event - compiled successfully
event - build page: /
wait  - compiling...
event - build page: /next/dist/pages/_error
Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.
    at resolveDispatcher (/home/christian/PersonalProjects/next.js/next-testing/deferred/node_modules/react/cjs/react.development.js:1476:13)
    at Object.useContext (/home/christian/PersonalProjects/next.js/next-testing/deferred/node_modules/react/cjs/react.development.js:1484:20)
    at Head (/home/christian/PersonalProjects/next.js/next-testing/deferred/node_modules/next/dist/shared/lib/head.js:170:34)
        -> /home/christian/PersonalProjects/next.js/next-testing/deferred/node_modules/next/dist/shared/lib/shared/lib/head.tsx:1:42
    at processChild (/home/christian/PersonalProjects/next.js/node_modules/react-dom/cjs/react-dom-server.node.development.js:3353:14)
    at resolve (/home/christian/PersonalProjects/next.js/node_modules/react-dom/cjs/react-dom-server.node.development.js:3270:5)
    at ReactDOMServerRenderer.render (/home/christian/PersonalProjects/next.js/node_modules/react-dom/cjs/react-dom-server.node.development.js:3753:22)
    at ReactDOMServerRenderer.read (/home/christian/PersonalProjects/next.js/node_modules/react-dom/cjs/react-dom-server.node.development.js:3690:29)
    at Object.renderToString (/home/christian/PersonalProjects/next.js/node_modules/react-dom/cjs/react-dom-server.node.development.js:4298:27)
    at Object.renderPage (/home/christian/PersonalProjects/next.js/packages/next/dist/server/render.js:575:35)
        -> /home/christian/PersonalProjects/next.js/packages/next/dist/server/server/render.tsx:4:72
    at Function.getInitialProps (webpack-internal:///../../packages/next/dist/pages/_document.js:193:19)
event - compiled successfully
Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.
    at resolveDispatcher (/home/christian/PersonalProjects/next.js/next-testing/deferred/node_modules/react/cjs/react.development.js:1476:13)
    at Object.useContext (/home/christian/PersonalProjects/next.js/next-testing/deferred/node_modules/react/cjs/react.development.js:1484:20)
    at Html (webpack-internal:///../../packages/next/dist/pages/_document.js:223:19)
    at processChild (/home/christian/PersonalProjects/next.js/node_modules/react-dom/cjs/react-dom-server.node.development.js:3353:14)
    at resolve (/home/christian/PersonalProjects/next.js/node_modules/react-dom/cjs/react-dom-server.node.development.js:3270:5)
    at ReactDOMServerRenderer.render (/home/christian/PersonalProjects/next.js/node_modules/react-dom/cjs/react-dom-server.node.development.js:3753:22)
    at ReactDOMServerRenderer.read (/home/christian/PersonalProjects/next.js/node_modules/react-dom/cjs/react-dom-server.node.development.js:3690:29)
    at Object.renderToStaticMarkup (/home/christian/PersonalProjects/next.js/node_modules/react-dom/cjs/react-dom-server.node.development.js:4314:27)
    at renderDocument (/home/christian/PersonalProjects/next.js/packages/next/dist/server/render.js:87:45)
        -> /home/christian/PersonalProjects/next.js/packages/next/dist/server/server/render.tsx:4:72
    at Object.renderToHTML (/home/christian/PersonalProjects/next.js/packages/next/dist/server/render.js:610:16)
        -> /home/christian/PersonalProjects/next.js/packages/next/dist/server/server/render.tsx:1055:14
Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.
    at resolveDispatcher (/home/christian/PersonalProjects/next.js/next-testing/deferred/node_modules/react/cjs/react.development.js:1476:13)
    at Object.useContext (/home/christian/PersonalProjects/next.js/next-testing/deferred/node_modules/react/cjs/react.development.js:1484:20)
    at Head (/home/christian/PersonalProjects/next.js/next-testing/deferred/node_modules/next/dist/shared/lib/head.js:170:34)
        -> /home/christian/PersonalProjects/next.js/next-testing/deferred/node_modules/next/dist/shared/lib/shared/lib/head.tsx:1:42
    at processChild (/home/christian/PersonalProjects/next.js/node_modules/react-dom/cjs/react-dom-server.node.development.js:3353:14)
    at resolve (/home/christian/PersonalProjects/next.js/node_modules/react-dom/cjs/react-dom-server.node.development.js:3270:5)
    at ReactDOMServerRenderer.render (/home/christian/PersonalProjects/next.js/node_modules/react-dom/cjs/react-dom-server.node.development.js:3753:22)
    at ReactDOMServerRenderer.read (/home/christian/PersonalProjects/next.js/node_modules/react-dom/cjs/react-dom-server.node.development.js:3690:29)
    at Object.renderToString (/home/christian/PersonalProjects/next.js/node_modules/react-dom/cjs/react-dom-server.node.development.js:4298:27)
    at Object.renderPage (/home/christian/PersonalProjects/next.js/packages/next/dist/server/render.js:575:35)
        -> /home/christian/PersonalProjects/next.js/packages/next/dist/server/server/render.tsx:4:72
    at Function.getInitialProps (webpack-internal:///../../packages/next/dist/pages/_document.js:193:19)
Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.
    at resolveDispatcher (/home/christian/PersonalProjects/next.js/next-testing/deferred/node_modules/react/cjs/react.development.js:1476:13)
    at Object.useContext (/home/christian/PersonalProjects/next.js/next-testing/deferred/node_modules/react/cjs/react.development.js:1484:20)
    at Html (webpack-internal:///../../packages/next/dist/pages/_document.js:223:19)
    at processChild (/home/christian/PersonalProjects/next.js/node_modules/react-dom/cjs/react-dom-server.node.development.js:3353:14)
    at resolve (/home/christian/PersonalProjects/next.js/node_modules/react-dom/cjs/react-dom-server.node.development.js:3270:5)
    at ReactDOMServerRenderer.render (/home/christian/PersonalProjects/next.js/node_modules/react-dom/cjs/react-dom-server.node.development.js:3753:22)
    at ReactDOMServerRenderer.read (/home/christian/PersonalProjects/next.js/node_modules/react-dom/cjs/react-dom-server.node.development.js:3690:29)
    at Object.renderToStaticMarkup (/home/christian/PersonalProjects/next.js/node_modules/react-dom/cjs/react-dom-server.node.development.js:4314:27)
    at renderDocument (/home/christian/PersonalProjects/next.js/packages/next/dist/server/render.js:87:45)
        -> /home/christian/PersonalProjects/next.js/packages/next/dist/server/server/render.tsx:4:72
    at Object.renderToHTML (/home/christian/PersonalProjects/next.js/packages/next/dist/server/render.js:610:16)
        -> /home/christian/PersonalProjects/next.js/packages/next/dist/server/server/render.tsx:1055:14
Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.
    at resolveDispatcher (/home/christian/PersonalProjects/next.js/next-testing/deferred/node_modules/react/cjs/react.development.js:1476:13)
    at Object.useContext (/home/christian/PersonalProjects/next.js/next-testing/deferred/node_modules/react/cjs/react.development.js:1484:20)
    at Head (/home/christian/PersonalProjects/next.js/next-testing/deferred/node_modules/next/dist/shared/lib/head.js:170:34)
        -> /home/christian/PersonalProjects/next.js/next-testing/deferred/node_modules/next/dist/shared/lib/shared/lib/head.tsx:1:42
    at processChild (/home/christian/PersonalProjects/next.js/node_modules/react-dom/cjs/react-dom-server.node.development.js:3353:14)
    at resolve (/home/christian/PersonalProjects/next.js/node_modules/react-dom/cjs/react-dom-server.node.development.js:3270:5)
    at ReactDOMServerRenderer.render (/home/christian/PersonalProjects/next.js/node_modules/react-dom/cjs/react-dom-server.node.development.js:3753:22)
    at ReactDOMServerRenderer.read (/home/christian/PersonalProjects/next.js/node_modules/react-dom/cjs/react-dom-server.node.development.js:3690:29)
    at Object.renderToString (/home/christian/PersonalProjects/next.js/node_modules/react-dom/cjs/react-dom-server.node.development.js:4298:27)
    at Object.renderPage (/home/christian/PersonalProjects/next.js/packages/next/dist/server/render.js:575:35)
        -> /home/christian/PersonalProjects/next.js/packages/next/dist/server/server/render.tsx:4:72
    at Function.getInitialProps (webpack-internal:///../../packages/next/dist/pages/_document.js:193:19)
Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.
    at resolveDispatcher (/home/christian/PersonalProjects/next.js/next-testing/deferred/node_modules/react/cjs/react.development.js:1476:13)
    at Object.useContext (/home/christian/PersonalProjects/next.js/next-testing/deferred/node_modules/react/cjs/react.development.js:1484:20)
    at Html (webpack-internal:///../../packages/next/dist/pages/_document.js:223:19)
    at processChild (/home/christian/PersonalProjects/next.js/node_modules/react-dom/cjs/react-dom-server.node.development.js:3353:14)
    at resolve (/home/christian/PersonalProjects/next.js/node_modules/react-dom/cjs/react-dom-server.node.development.js:3270:5)
    at ReactDOMServerRenderer.render (/home/christian/PersonalProjects/next.js/node_modules/react-dom/cjs/react-dom-server.node.development.js:3753:22)
    at ReactDOMServerRenderer.read (/home/christian/PersonalProjects/next.js/node_modules/react-dom/cjs/react-dom-server.node.development.js:3690:29)
    at Object.renderToStaticMarkup (/home/christian/PersonalProjects/next.js/node_modules/react-dom/cjs/react-dom-server.node.development.js:4314:27)
    at renderDocument (/home/christian/PersonalProjects/next.js/packages/next/dist/server/render.js:87:45)
        -> /home/christian/PersonalProjects/next.js/packages/next/dist/server/server/render.tsx:4:72
    at Object.renderToHTML (/home/christian/PersonalProjects/next.js/packages/next/dist/server/render.js:610:16)
        -> /home/christian/PersonalProjects/next.js/packages/next/dist/server/server/render.tsx:1055:14
Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.
    at resolveDispatcher (/home/christian/PersonalProjects/next.js/next-testing/deferred/node_modules/react/cjs/react.development.js:1476:13)
    at Object.useContext (/home/christian/PersonalProjects/next.js/next-testing/deferred/node_modules/react/cjs/react.development.js:1484:20)
    at Head (/home/christian/PersonalProjects/next.js/next-testing/deferred/node_modules/next/dist/shared/lib/head.js:170:34)
        -> /home/christian/PersonalProjects/next.js/next-testing/deferred/node_modules/next/dist/shared/lib/shared/lib/head.tsx:1:42
    at processChild (/home/christian/PersonalProjects/next.js/node_modules/react-dom/cjs/react-dom-server.node.development.js:3353:14)
    at resolve (/home/christian/PersonalProjects/next.js/node_modules/react-dom/cjs/react-dom-server.node.development.js:3270:5)
    at ReactDOMServerRenderer.render (/home/christian/PersonalProjects/next.js/node_modules/react-dom/cjs/react-dom-server.node.development.js:3753:22)
    at ReactDOMServerRenderer.read (/home/christian/PersonalProjects/next.js/node_modules/react-dom/cjs/react-dom-server.node.development.js:3690:29)
    at Object.renderToString (/home/christian/PersonalProjects/next.js/node_modules/react-dom/cjs/react-dom-server.node.development.js:4298:27)
    at Object.renderPage (/home/christian/PersonalProjects/next.js/packages/next/dist/server/render.js:575:35)
        -> /home/christian/PersonalProjects/next.js/packages/next/dist/server/server/render.tsx:4:72
    at Function.getInitialProps (webpack-internal:///../../packages/next/dist/pages/_document.js:193:19)

Expected Behavior

The same behavior as a globally installed Next binary (i.e., the same behavior as seen after rm -rf node_modules && yarn global add next && next build).

To Reproduce

It seems like building canary locally, next build will not work on projects it is tested on. If nobody can reproduce this, thoughts would be welcome on what is causing these errors.
@ctjlewis ctjlewis added the bug Issue was opened via the bug report template. label Aug 6, 2021
@ctjlewis ctjlewis mentioned this issue Aug 9, 2021
Closed
@casperiv0
Copy link
Contributor

Yeah, I seem to be getting to same exact issue on Ubuntu (Ubuntu 20.04 LTS) and MacOS (12.0 Monterey).

@ijjk
Copy link
Member

ijjk commented Aug 13, 2021 •
edited

Hi, it's recommended to test apps with the locally built version of Next.js by moving the app within the Next.js repo and running with yarn next-with-deps ./app-folder (related contributing doc) since this helps prevent conflicts with existing deps in the app being tested. next currently can't be installed globally as this also creates conflicts.

@ctjlewis
Copy link
Contributor Author

Thanks @ijjk, I believe I tried that and it did not resolve. I will try again to confirm. Either way I will update #27913 to reflect whatever works.

@ctjlewis
Copy link
Contributor Author

ctjlewis commented Aug 13, 2021 •
edited

Initializing a Next project inside the repo, I can build it with:

yarn next-with-deps build [folder-name]

Though I do get this error related to ESLint conflicts, it builds correctly and serves with next start also:

~/PersonalProjects/next.js$ yarn next-with-deps build repro
yarn run v1.22.5
$ ./scripts/next-with-deps.sh build repro
$ node --trace-deprecation --enable-source-maps packages/next/dist/bin/next build repro
info  - Using webpack 5. Reason: Enabled by default https://nextjs.org/docs/messages/webpack5
info  - Checking validity of types  
error - ESLint: Plugin "react" was conflicted between "repro/.eslintrc.json » eslint-config-next/core-web-vitals » /home/christian/PersonalProjects/next.js/repro/node_modules/eslint-config-next/index.js" and ".eslintrc.json".

@ijjk
Copy link
Member

ijjk commented Aug 14, 2021

Hmm it might be good to note in the contributing doc that the monorepo's .eslintrc can cause conflicts when testing inside the monorepo

@ijjk
Copy link
Member

ijjk commented Sep 18, 2021

Closing as I think this is resolved now that #27913 has landed

@ijjk ijjk closed this as completed Sep 18, 2021
@balazsorban44
Copy link
Member

This issue has been automatically locked due to no recent activity. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.

@vercel vercel locked as resolved and limited conversation to collaborators Jan 27, 2022
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
bug Issue was opened via the bug report template.
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
4 participants
@ctjlewis @balazsorban44 @ijjk @casperiv0