Unexpected token 'export' with dynamicIconImports #1534

bightg30098 · 2023-08-26T10:35:04Z

Prerequisites

Version: 0.269.0
Are you running from source/main: yes
Are you using a released build: yes
Operating system: macOS 13.4.1
Bits: 64

Step to reproduce

git clone https://github.com/bightg30098/lucide-next-dynamic-import
cd lucide-next-dynamic-import
pnpm i
pnpm dev

Actual behavior

Any message or error

Server Error
SyntaxError: Unexpected token 'export'

This error happened while generating the page. Any console logs will be displayed in the terminal window.
Call Stack
<unknown>
/Users/bightg30098/gitlab/lucide-next-dynamic-import/node_modules/.pnpm/lucide-react (0.269.0_react@18.2.0/node_modules/lucide-react/dynamicIconImports.js (1246)
internalCompileFunction
node:internal/vm (73:18)
wrapSafe
node:internal/modules/cjs/loader (1178:20)
Module._compile
node:internal/modules/cjs/loader (1220:27)
Module._extensions..js
node:internal/modules/cjs/loader (1310:10)
Module.load
node:internal/modules/cjs/loader (1119:32)
Module._load
node:internal/modules/cjs/loader (960:12)
Module.require
node:internal/modules/cjs/loader (1143:19)
require
node:internal/modules/cjs/helpers (110:18)
lucide-react/dynamicIconImports
file:///Users/bightg30098/gitlab/lucide-next-dynamic-import/.next/server/pages/index.js (206:18)
__webpack_require__
file:///Users/bightg30098/gitlab/lucide-next-dynamic-import/.next/server/webpack-runtime.js (33:42)
eval
webpack-internal:///./src/components/Icon.tsx (9:89)
./src/components/Icon.tsx
file:///Users/bightg30098/gitlab/lucide-next-dynamic-import/.next/server/pages/index.js (66:1)
__webpack_require__
file:///Users/bightg30098/gitlab/lucide-next-dynamic-import/.next/server/webpack-runtime.js (33:42)
eval
webpack-internal:///./src/pages/index.tsx (7:74)
./src/pages/index.tsx
file:///Users/bightg30098/gitlab/lucide-next-dynamic-import/.next/server/pages/index.js (99:1)
__webpack_require__
file:///Users/bightg30098/gitlab/lucide-next-dynamic-import/.next/server/webpack-runtime.js (33:42)
eval
webpack-internal:///./node_modules/.pnpm/next@13.4.19_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/build/webpack/loaders/next-route-loader/index.js (22:78)
./node_modules/.pnpm/next@13.4.19_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/build/webpack/loaders/next-route-loader/index.js?kind=PAGES&page=%2F&preferredRegion=&absolutePagePath=.%2Fsrc%2Fpages%2Findex.tsx&absoluteAppPath=private-next-pages%2F_app&absoluteDocumentPath=private-next-pages%2F_document&middlewareConfigBase64=e30%3D!
file:///Users/bightg30098/gitlab/lucide-next-dynamic-import/.next/server/pages/index.js (33:1)
__webpack_require__
file:///Users/bightg30098/gitlab/lucide-next-dynamic-import/.next/server/webpack-runtime.js (33:42)
__webpack_exec__
file:///Users/bightg30098/gitlab/lucide-next-dynamic-import/.next/server/pages/index.js (337:39)
<unknown>
file:///Users/bightg30098/gitlab/lucide-next-dynamic-import/.next/server/pages/index.js (338:28)
Object.<anonymous>
file:///Users/bightg30098/gitlab/lucide-next-dynamic-import/.next/server/pages/index.js (341:3)
Module._compile
node:internal/modules/cjs/loader (1256:14)
Module._extensions..js
node:internal/modules/cjs/loader (1310:10)
Module.load
node:internal/modules/cjs/loader (1119:32)
Module._load
node:internal/modules/cjs/loader (960:12)
Module.require
node:internal/modules/cjs/loader (1143:19)
require
node:internal/modules/cjs/helpers (110:18)
requirePage
file:///Users/bightg30098/gitlab/lucide-next-dynamic-import/node_modules/.pnpm/next@13.4.19_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/server/require.js (112:75)
<unknown>
file:///Users/bightg30098/gitlab/lucide-next-dynamic-import/node_modules/.pnpm/next@13.4.19_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/server/load-components.js (80:84)
process.processTicksAndRejections
node:internal/process/task_queues (95:5)
async loadComponentsImpl
file:///Users/bightg30098/gitlab/lucide-next-dynamic-import/node_modules/.pnpm/next@13.4.19_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/server/load-components.js (80:26)
async DevServer.findPageComponentsImpl
file:///Users/bightg30098/gitlab/lucide-next-dynamic-import/node_modules/.pnpm/next@13.4.19_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/server/next-server.js (439:36)
async DevServer.findPageComponents
file:///Users/bightg30098/gitlab/lucide-next-dynamic-import/node_modules/.pnpm/next@13.4.19_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/server/dev/next-dev-server.js (556:20)
async DevServer.renderPageComponent
file:///Users/bightg30098/gitlab/lucide-next-dynamic-import/node_modules/.pnpm/next@13.4.19_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/server/base-server.js (1439:24)
async DevServer.renderToResponseImpl
file:///Users/bightg30098/gitlab/lucide-next-dynamic-import/node_modules/.pnpm/next@13.4.19_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/server/base-server.js (1495:32)
async DevServer.pipeImpl
file:///Users/bightg30098/gitlab/lucide-next-dynamic-import/node_modules/.pnpm/next@13.4.19_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/server/base-server.js (735:25)
async DevServer.handleCatchallRenderRequest
file:///Users/bightg30098/gitlab/lucide-next-dynamic-import/node_modules/.pnpm/next@13.4.19_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/server/next-server.js (703:13)
async DevServer.handleRequestImpl
file:///Users/bightg30098/gitlab/lucide-next-dynamic-import/node_modules/.pnpm/next@13.4.19_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/server/base-server.js (647:17)

Resources

Links lucide-next-dynamic-import
Screenshots

Here is what a great bug report would look like:

## Prerequisites

Version: Release v3.1.0
Running from: Import using webpack
Operating system: Mac OSX
Bits: 64 bits

## Step to reproduce

 - Import `check` icon
 - Add to a React component/view
 - Run the react app
 - Notice that the `check` isn't rendering correctly which seems a encoding problem
 
### Actual behavior:

 - Import `check` icon
 - Add to a React component/view
 - Run the react app
 - Check is displayed with correct encoding (e.g UTF-8)

## Any message or error

No console output
...

## Resources

No resources
...

The text was updated successfully, but these errors were encountered:

JulioCVaz · 2023-08-29T02:23:52Z

Same issue here

vsnthdev · 2023-08-29T03:32:01Z

Same issue here, waiting for this to be fixed before we can update to newer versions 🤞

hrithikmotto · 2023-08-29T08:29:01Z

same here

JanTrichter · 2023-09-02T17:19:22Z

Hi, thanks for reporting the issue @bightg30098

@JulioCVaz @vsnthdev @hrithikmotto
You fix this issue by adding transpilePackages: ['lucide-react'] to your next.config.js.

The entire file should look something like this for the provided repository:

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  transpilePackages: ['lucide-react']
}

module.exports = nextConfig

You can find more infos about that in the NextJS documentation

@ericfennis can we just close the issue or is this something that should be added to the documentation? I'm not a React dev so I can't really tell if that's the best solution but it fixes the issue from the provided repo for me.

vsnthdev · 2023-09-02T17:21:21Z

@JanTrichter Let me try the mentioned solution and see if this works.

If it works, then I guess we can add this to the dynamic imports docs and close this issue.

vsnthdev · 2023-09-05T06:34:05Z

I can confirm the issue gets resolved by #1534 (comment) ✅

JanTrichter · 2023-09-05T15:45:43Z

I'll add a note to the docs when I find the time. If anyone else wants to provide a PR for that please do so!

JanTrichter · 2023-09-17T12:04:42Z

Since the solution that is provided here seems to work and there is a PR to update the docs we can close this issue @ericfennis.

melrose13-69 · 2024-08-10T16:02:49Z

the same problem is present during tests (Jest)

ericfennis · 2024-08-14T15:10:30Z

@melrose13-69 you should switch to running jest with Esmodule support

bightg30098 added the 🐛 bug Something isn't working label Aug 26, 2023

JanTrichter mentioned this issue Sep 17, 2023

add info about dynamic imports to nextjs docs #1564

Merged

7 tasks

ericfennis closed this as completed in #1564 Oct 17, 2023

BorisTherin mentioned this issue Nov 12, 2023

Lucide dynamic loading 3forges/juste-un-curieux#38

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Unexpected token 'export' with dynamicIconImports #1534

Unexpected token 'export' with dynamicIconImports #1534

bightg30098 commented Aug 26, 2023

JulioCVaz commented Aug 29, 2023

vsnthdev commented Aug 29, 2023

hrithikmotto commented Aug 29, 2023

JanTrichter commented Sep 2, 2023

vsnthdev commented Sep 2, 2023

vsnthdev commented Sep 5, 2023

JanTrichter commented Sep 5, 2023

JanTrichter commented Sep 17, 2023

melrose13-69 commented Aug 10, 2024

ericfennis commented Aug 14, 2024

Unexpected token 'export' with dynamicIconImports #1534

Unexpected token 'export' with dynamicIconImports #1534

Comments

bightg30098 commented Aug 26, 2023

Prerequisites

Step to reproduce

Actual behavior

Any message or error

Resources

JulioCVaz commented Aug 29, 2023

vsnthdev commented Aug 29, 2023

hrithikmotto commented Aug 29, 2023

JanTrichter commented Sep 2, 2023

vsnthdev commented Sep 2, 2023

vsnthdev commented Sep 5, 2023

JanTrichter commented Sep 5, 2023

JanTrichter commented Sep 17, 2023

melrose13-69 commented Aug 10, 2024

ericfennis commented Aug 14, 2024