Hi,
I recently tried to update to nextjs12 and react18 to see if there would be any problems upgrading and I’ve run into some problems deploying to Netlify. Everything works great locally, but the deploy fails because it thinks React does not include useRef from Jotai library.
Has anyone run into similar issues and know what you can do to resolve these issues?
next.config
// next.config.js
const withTM = require('next-transpile-modules')(['@personal-component-library']);
module.exports = withTM({
webpack(config) {
config.module.rules.push({
test: /\.svg$/i,
issuer: /\.[jt]sx?$/,
use: [{ loader: '@svgr/webpack', options: { } }],
})
return config
},
})
netlify.toml
[build]
functions = "functions"
command = "CI= npm run build && npm run export"
publish = "out"
[[redirects]]
from = "/api/*"
to = "/.netlify/functions/:splat"
status = 200
[functions]
directory = "functions/"
external_node_modules = ["firebase-admin", "node-fetch"]
tsconfig
Have also tried with target & module: “es6”
{
"compilerOptions": {
"target": "es5",
"lib": [
"dom",
"dom.iterable",
"esnext"
],
"allowJs": true,
"skipLibCheck": true,
"strict": false,
"forceConsistentCasingInFileNames": true,
"noEmit": true,
"esModuleInterop": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"jsx": "preserve",
"incremental": true
},
"exclude": [
"node_modules"
],
"include": [
"next-env.d.ts",
"**/*.ts",
"**/*.tsx"
]
}
build log
5:42:44 PM: ────────────────────────────────────────────────────────────────
5:42:44 PM: Netlify Build
5:42:44 PM: ────────────────────────────────────────────────────────────────
5:42:44 PM:
5:42:44 PM: ❯ Version
5:42:44 PM: @netlify/build 26.1.3
5:42:44 PM:
5:42:44 PM: ❯ Flags
5:42:44 PM: baseRelDir: true
5:42:44 PM: buildId: 61e59c5cd96c350008690ad7
5:42:44 PM: deployId: 61e59c5cd96c350008690ad9
5:42:44 PM:
5:42:44 PM: ❯ Current directory
5:42:44 PM: /opt/build/repo
5:42:44 PM:
5:42:44 PM: ❯ Config file
5:42:44 PM: /opt/build/repo/netlify.toml
5:42:44 PM:
5:42:44 PM: ❯ Context
5:42:44 PM: branch-deploy
5:42:44 PM:
5:42:44 PM: ❯ Loading plugins
5:42:44 PM: - @netlify/plugin-nextjs@3.9.2 from Netlify app
5:42:44 PM:
5:42:44 PM: ❯ Outdated plugins
5:42:44 PM: - @netlify/plugin-nextjs@3.9.2: latest version is 4.2.0
5:42:44 PM: Migration guide: https://ntl.fyi/next-plugin-migration
5:42:44 PM: To upgrade this plugin, please uninstall and re-install it from the Netlify plugins directory (https://app.netlify.com/plugins)
5:42:46 PM:
5:42:46 PM: ────────────────────────────────────────────────────────────────
5:42:46 PM: 1. @netlify/plugin-nextjs (onPreBuild event)
5:42:46 PM: ────────────────────────────────────────────────────────────────
5:42:46 PM:
5:42:46 PM: Using Next.js 12.0.8
5:42:46 PM: Warning: support for Next.js >=11.1.0 is experimental
5:42:46 PM: NOTE: Static HTML export Next.js projects (projects that use `next export`) do not require most of this plugin. For these sites, this plugin *only* caches builds.
5:42:46 PM:
5:42:46 PM: (@netlify/plugin-nextjs onPreBuild completed in 13ms)
5:42:46 PM:
5:42:46 PM: ────────────────────────────────────────────────────────────────
5:42:46 PM: 2. build.command from netlify.toml
5:42:46 PM: ────────────────────────────────────────────────────────────────
5:42:46 PM:
5:42:46 PM: $ CI= npm run build && npm run export
5:42:46 PM: > @philipaarseth/prepi@0.1.0 build /opt/build/repo
5:42:46 PM: > next build
5:42:47 PM: (node:1511) ExperimentalWarning: The ESM module loader is experimental.
5:42:47 PM: warn - No build cache found. Please configure build caching for faster rebuilds. Read more: https://nextjs.org/docs/messages/no-cache
5:42:47 PM: info - Checking validity of types...
5:43:05 PM: warn - No ESLint configuration detected. Run next lint to begin setup
5:43:05 PM: info - Creating an optimized production build...
5:44:27 PM: info - Compiled successfully
5:44:27 PM: info - Collecting page data...
5:44:29 PM: (node:1593) ExperimentalWarning: The ESM module loader is experimental.
5:44:29 PM: (node:1600) ExperimentalWarning: The ESM module loader is experimental.
5:44:29 PM: (node:1511) UnhandledPromiseRejectionWarning: file:///opt/build/repo/node_modules/jotai/esm/index.mjs:1
5:44:29 PM: import { createContext, useState, useEffect, useRef, createElement, useDebugValue, useContext, useCallback, useReducer } from 'react';
5:44:29 PM: ^^^^^^
5:44:29 PM: SyntaxError: The requested module 'react' does not provide an export named 'useRef'
5:44:29 PM: at ModuleJob._instantiate (internal/modules/esm/module_job.js:92:21)
5:44:29 PM: at async ModuleJob.run (internal/modules/esm/module_job.js:107:20)
5:44:29 PM: at async Loader.import (internal/modules/esm/loader.js:179:24)
5:44:29 PM: (node:1511) 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)
5:44:29 PM: (node:1511) [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.
5:44:29 PM: (node:1593) UnhandledPromiseRejectionWarning: file:///opt/build/repo/node_modules/jotai/esm/index.mjs:1
5:44:29 PM: import { createContext, useState, useEffect, useRef, createElement, useDebugValue, useContext, useCallback, useReducer } from 'react';
5:44:29 PM: ^^^^^^
and it goes on like that for quite a while, there’s 33 blocks like this
end of build log
5:44:29 PM: SyntaxError: The requested module 'react' does not provide an export named 'useRef'
5:44:29 PM: at ModuleJob._instantiate (internal/modules/esm/module_job.js:92:21)
5:44:29 PM: at async ModuleJob.run (internal/modules/esm/module_job.js:107:20)
5:44:29 PM: at async Loader.import (internal/modules/esm/loader.js:179:24) {
5:44:29 PM: type: 'SyntaxError'
5:44:29 PM: }
5:44:30 PM: npm ERR! code ELIFECYCLE
5:44:30 PM: npm ERR! errno 1
5:44:30 PM: npm ERR! @philipaarseth/prepi@0.1.0 build: `next build`
5:44:30 PM: npm ERR! Exit status 1
5:44:30 PM: npm ERR!
5:44:30 PM: npm ERR! Failed at the @philipaarseth/prepi@0.1.0 build script.
5:44:30 PM: npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
5:44:30 PM: npm ERR! A complete log of this run can be found in:
5:44:30 PM: npm ERR! /opt/buildhome/.npm/_logs/2022-01-17T16_44_30_274Z-debug.log
5:44:30 PM:
5:44:30 PM: ────────────────────────────────────────────────────────────────
5:44:30 PM: "build.command" failed
5:44:30 PM: ────────────────────────────────────────────────────────────────
5:44:30 PM:
5:44:30 PM: Error message
5:44:30 PM: Command failed with exit code 1: CI= npm run build && npm run export
5:44:30 PM:
5:44:30 PM: Error location
5:44:30 PM: In build.command from netlify.toml:
5:44:30 PM: CI= npm run build && npm run export
5:44:30 PM:
5:44:30 PM: Resolved config
5:44:30 PM: build:
5:44:30 PM: command: CI= npm run build && npm run export
5:44:30 PM: commandOrigin: config
5:44:30 PM: environment:
environment variable names here
5:44:30 PM: publish: /opt/build/repo/out
5:44:30 PM: publishOrigin: config
5:44:30 PM: functions:
5:44:30 PM: '*':
5:44:30 PM: external_node_modules:
5:44:30 PM: - firebase-admin
5:44:30 PM: - node-fetch
5:44:30 PM: functionsDirectory: /opt/build/repo/functions
5:44:30 PM: plugins:
5:44:30 PM: - inputs: {}
5:44:30 PM: origin: ui
5:44:30 PM: package: '@netlify/plugin-nextjs'
5:44:30 PM: redirects:
5:44:30 PM: - from: /api/*
status: 200
to: /.netlify/functions/:splat
redirectsOrigin: config
Looks pretty similar to this issue
If I try to build locally there are no problems, only when trying to deploy to netlify will it fail.
