import_jsx_dev_runtime.jsxDEV is not a function after upgrade to 1.7.0 in Docker Container

[mattoni]

What version of Remix are you using?

1.7.0

Steps to Reproduce

After upgrading to 1.7.0 and building my docker container, Going to any page yields import_jsx_dev_runtime.jsxDEV is not a function on the server, and an error page is rendered.

Here is my Docker file that causes it to fail:

# Base Node image
FROM node:lts-alpine as base

# Setup all node_modules
FROM base as deps

RUN mkdir /app
WORKDIR /app

ADD package.json ./
ADD yarn.lock ./
RUN yarn install --production=false

# Setup production node_modules
FROM base as production-deps

RUN mkdir /app
WORKDIR /app

COPY --from=deps /app/node_modules /app/node_modules
ADD package*.json ./

# Build the app
FROM base as build

ENV NODE_ENV=production

RUN mkdir /app
WORKDIR /app

COPY --from=deps /app/node_modules /app/node_modules

ADD . .
RUN yarn run build

# Build production image
FROM base

RUN mkdir /app
WORKDIR /app

COPY --from=production-deps /app/node_modules /app/node_modules

COPY --from=build /app/build /app/build
COPY --from=build /app/public /app/public
ADD . .

EXPOSE 3000

CMD ["yarn", "start"]

It is only failing in the container, running the app even with remix-serve works correctly. All package.json dependencies are locked in.

Expected Behavior

The app should work as it did before the upgrade to 1.7.0 (Release notes said no changes to code necessary).

Actual Behavior

The app fails to render any pages.

[jfstn]

I came across this issue today while updating remix. It seems to be related to the changes introduced in #3860. For now, I'm keeping @remix/dev on version 1.6.8 and using the other @remix/* dependencies on version 1.7.0

[mcansh]

i haven’t seen this in any of my testing thus far, i might be able to take a look tomorrow, but for sure on Monday.

[mcansh]

i can't reproduce :(

https://github.com/mcansh/simple-docker-test

you could try nuking node_modules as well as your assetsBuildDirectory and serverBuildPath

[mcansh]

~~ok, i did get this, but on 1.6.8 oddly enough~~

edit: oh duh semver ranges 🤦 - i think that may be the root of the issue.

edit 2: actually is this happening just locally or also when you deploy? Make sure you have a .dockerignore so that it doesn't also copy old build files (or node modules), a copy of .gitignore should do.

[jfstn]

I was able to do it locally, as in remix build and then remix start. I'll make sure that I'll run a clean build tomorrow or monday.

[chrisvariety]

Not sure why, but this reproduces handily on a stock blues stack while running npm run test:e2e:run. Normal npm run dev does not reproduce it.

Repro steps are:

npx create-remix --template remix-run/blues-stack (answer yes to everything, select TypeScript)
npm run docker
npm run setup
npm run build
npm run test:e2e:run

workspace/src/my-remix-app ❯ node --version
v14.18.1
workspace/src/my-remix-app ❯ npm --version
6.14.15

(seems to repro on node v16 as well)

[jonschlinkert]

We're getting a similar error with 1.7.0. I haven't looked at the code in 1.7.0 vs 1.6.8 but it seems that RemixServer is exported differently in 1.7.0 than in 1.6.8.

import { RemixServer } from '@remix-run/react';
console.log(RemixServer) //=> undefined

In 1.6.8, RemixServer is a function.

This is the error we're getting:

Remix App Server started at http://localhost:3000 (http://192.168.1.122:3000)
Warning: React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check your code at entry.server.tsx:18.
Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
 ...

[FlatMapIO]

We're getting a similar error with 1.7.0. I haven't looked at the code in 1.7.0 vs 1.6.8 but it seems that RemixServer is exported differently in 1.7.0 than in 1.6.8.

import { RemixServer } from '@remix-run/react';
console.log(RemixServer) //=> undefined

In 1.6.8, RemixServer is a function.

This is the error we're getting:

Remix App Server started at http://localhost:3000 (http://192.168.1.122:3000)
Warning: React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check your code at entry.server.tsx:18.
Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
 ...

The cause of the problem has been found: https://github.com/remix-run/remix/issues/4080#issuecomment-1229356069

[jfstn]

@FlatMapIO the problem does not seem to be precisely the same. I tried all those solutions and they don't seem to work.

[chrisvariety]

yep, React.jsx: type is invalid is an entirely different problem, not relevant to this issue.

[CanRau]

Hmm weird I'm sure I upgraded couple of days ago and just now ran into this issue 🤨 Also experimenting on another project I briefly ran into it, but resolved it by changing a custom transform stream

Downgrading to 1.6.8 seems to have solved it for now

[davidlukerice]

Odd. I also ran into this today when starting up my local dev server for the first time in a few days. Been on 1.7.0 for a while now, though. So not sure what's changed.

Edit: Got mine running again after doing a full clear of the current modules, re-building the app, then rerunning the local server. I also went ahead and bumped a number of out of date libraries while I was at it.

rm -rf node_modules/
rm package-lock.json
npm cache clear --force
npm i
npm build
npm start / npm run dev

[jfstn]

Just tried a clean build, with a clean package manager and docker cache. The problem is still there for me.

[mcansh]

Just tried a clean build, with a clean package manager and docker cache. The problem is still there for me.

is your repo public? or can you try to reproduce on a fresh npx [email protected]?

[CanRau]

Uh to clarify to me it happened running dev on my machine, so no Docker required 😅

But since last time it didn't happen again 🤷🏻‍♂️

[jfstn]

Just tried a clean build, with a clean package manager and docker cache. The problem is still there for me.

is your repo public? or can you try to reproduce on a fresh npx [email protected]?

This only happens with remix-run/dev 1.7.0

[chrisvariety]

Just tried a clean build, with a clean package manager and docker cache. The problem is still there for me.

is your repo public? or can you try to reproduce on a fresh npx [email protected]?

public repo reproduction steps are here https://github.com/remix-run/remix/issues/4081#issuecomment-1229538116 (as mentioned, doesn't repro on 1.6.8)

[dusty]

I'm having a similar problem, getting an error TypeError: (0 , import_react.useFetcher) is not a function\n that I'm seeing in the ErrorBoundary.

However, I am having a really hard time reproducing it on a minimal repro. Also, tried clearing out node_modules, cache, build, etc.. My app works fine on 1.6.8, not on 1.7.0.

yarn dev node 18.7 macos 12.5.1

[wladpaiva]

This is not particular to the @remix-run/dev. I'm experiencing the same issue on my vercel environment as well.

Vercel:

Local:

[InTheCloudDan]

I'm getting it when deploying to fly.io. Local dev appears to be working fine, as soon as I deployed it app stopped loading and this is in the logs:

2022-09-13T10:20:03.887 app[2d96f538] ewr [info] at handleRequest (/app/app/entry.server.tsx:23:9)
2022-09-13T10:20:03.887 app[2d96f538] ewr [info] at handleDocumentRequest (/app/node_modules/@remix-run/server-runtime/dist/server.js:409:20)
2022-09-13T10:20:03.887 app[2d96f538] ewr [info] at requestHandler (/app/node_modules/@remix-run/server-runtime/dist/server.js:49:18)
2022-09-13T10:20:03.887 app[2d96f538] ewr [info] at /app/node_modules/@remix-run/express/dist/server.js:39:22

[eseyfert]

Ran into the same issue. Runs without issues locally, but then end up seeing the import_jsx_dev_runtime.jsxDEV is not a function error in our Cypress tests GitHub workflows. Reverting to @remix-run/[email protected] fixed that issue, so something is up.

[arnemolland]

This is blocking us from upgrading our production apps as well; runs fine on local machines but the production builds running in containers are all encountering this on >1.7.0. Happens both the default express-based Remix App Server and deno runtimes.

[krivaten]

I'm getting it when deploying to fly.io. Local dev appears to be working fine, as soon as I deployed it app stopped loading and this is in the logs:

2022-09-13T10:20:03.887 app[2d96f538] ewr [info] at handleRequest (/app/app/entry.server.tsx:23:9)
2022-09-13T10:20:03.887 app[2d96f538] ewr [info] at handleDocumentRequest (/app/node_modules/@remix-run/server-runtime/dist/server.js:409:20)
2022-09-13T10:20:03.887 app[2d96f538] ewr [info] at requestHandler (/app/node_modules/@remix-run/server-runtime/dist/server.js:49:18)
2022-09-13T10:20:03.887 app[2d96f538] ewr [info] at /app/node_modules/@remix-run/express/dist/server.js:39:22

Same thing here. I'm able to reproduce it running remix-serve build locally as well. Even running npx [email protected] and selecting the bare bones Fly setup, I get the error.

[mcansh]

@dusty @wladiston both of your issues are an upstream issue with esbuild (which has since been fixed in 0.15.8) https://github.com/evanw/esbuild/issues/2534 - i'll be looking into upgrading our dependency next week

[dusty]

Thanks for the followup @mcansh . We recently tried out 1.7.2 while moving all the keys above spreads and all is well for us.

[krivaten]

Thanks @mcansh. Using an npm-shrinkwrap.json I've confirmed that updating esbuild to 0.14.50 resolves the problem.

[egorpavlikhin]

Adding remix build before running the app worked for me:

"dev": "remix build && run-p dev:*",
"dev:node": "cross-env NODE_ENV=development nodemon ./server.js --watch ./server.js",
"dev:remix": "npm run clean && npm run partytown && remix watch",

[arnemolland]

We managed to fix the issue by forcing esbuild to ^0.15.8 (resolutions field in package.json). Now running remix 1.7.2.

[mcansh]

We managed to fix the issue by forcing esbuild to ^0.15.8 (resolutions field in package.json). Now running remix 1.7.2.

nice, I'm actively working on updating our esbuild dep, but we're usually a little weary to do so as it's < v1. they recently added first party support for yarn pnp, which i've personally never used so want to make sure we don't cause any (more) issues after updating :)

[joelazar]

I also came across this issue today but in a slightly different format.

I've built with NODE_ENV=development env, but when I tried to execute the built server with NODE_ENV=production, it failed with the same issue mentioned in the description.

Reverting @remix-run/dev to 1.6.8 solves this.