sensitive-blue

React Dropzone "Cannot use import statement outside a module"

5 Replies

sensitive-blueOP•9mo ago

Not sure what is going on but when i use a server function in a layout route i get this error. it doesn't appear to happen on the index route "@tanstack/react-router": "^1.89.2", and react 19

rival-black•9mo ago

can you provide a minimal reproducer ?

sensitive-blueOP•9mo ago

@Manuel Schiller hmm, haven't been able to repro but i think i've isolated it down to a component using react dropzone https://github.com/react-dropzone/react-dropzone/blob/master/src/index.js

/Users/am/Coding/tools/node_modules/react-dropzone/dist/es/index.js:37
import React, { forwardRef, Fragment, useCallback, useEffect, useImperativeHandle, useMemo, useReducer, useRef } from "react";
^^^^^^

SyntaxError: Cannot use import statement outside a module

/Users/am/Coding/tools/node_modules/react-dropzone/dist/es/index.js:37
import React, { forwardRef, Fragment, useCallback, useEffect, useImperativeHandle, useMemo, useReducer, useRef } from "react";
^^^^^^

SyntaxError: Cannot use import statement outside a module

GitHub

react-dropzone/src/index.js at master · react-dropzone/react-dropzone

Simple HTML5 drag-drop zone with React.js. Contribute to react-dropzone/react-dropzone development by creating an account on GitHub.

sensitive-blueOP•9mo ago

Ok the issue is https://github.com/react-dropzone/react-dropzone/issues/1259 and fix is

// app.config.ts
routers: {
        ssr: {
            entry: './src/web/ssr.tsx',
            vite: {
                ssr: {
                    noExternal: ['react-dropzone'],
                },
            },
        },
    },

// app.config.ts
routers: {
        ssr: {
            entry: './src/web/ssr.tsx',
            vite: {
                ssr: {
                    noExternal: ['react-dropzone'],
                },
            },
        },
    },

GitHub

[BUG] react-dropzone cannot be imported in a Node.js ESM environmen...

I am experimenting with React SSR in a project that uses ESM ("type": "module" is set in package.json). The project uses react-dropzone, and although it will not be part of the ...

rival-black•9mo ago

good catch

Gaming

Programming

React Dropzone "Cannot use import statement outside a module"

Did you find this page helpful?