Issue while using with next

[manojadams]

Getting following issue while trying to use this library:

import { jsxs as M, jsx as v, Fragment as De } from "react/jsx-runtime";
^^^^^^

SyntaxError: Cannot use import statement outside a module
    at compileFunction (<anonymous>)
    at Object.compileFunction (node:vm:352:18)
    at wrapSafe (node:internal/modules/cjs/loader:1033:15)
    at Module._compile (node:internal/modules/cjs/loader:1069:27)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1159:10)
    at Module.load (node:internal/modules/cjs/loader:981:32)
    at Function.Module._load (node:internal/modules/cjs/loader:822:12)
    at Module.require (node:internal/modules/cjs/loader:1005:19)
    at require (node:internal/modules/cjs/helpers:102:18)

[viclafouch]

Hello !

I couldn't repro, plz give a repo to test !

Ty

[manojadams]

Repro:

• Create a new next project (https://nextjs.org/docs)
• This steps requires some explanation:
  • I am using mui-tel-input in a another npm library(https://www.npmjs.com/package/@manojadams/metaforms-mui/v/3.0.0)
  • If you install this library (npm i @manojadams/metaforms-mui) in newly project project and
  • Try to use the library somewhere like <MaterialForms schema={{ fields: [] }} onSubmit={() => { // to do }} />
  • And try to build the project (npm run build)
  • The build fails and it complains the following error: ` import { jsxs as M, jsx as v, Fragment as De } from "react/jsx-runtime"; ^^^^^^

SyntaxError: Cannot use import statement outside a module at compileFunction () at Object.compileFunction (node:vm:352:18) at wrapSafe (node:internal/modules/cjs/loader:1033:15) at Module._compile (node:internal/modules/cjs/loader:1069:27) at Object.Module._extensions..js (node:internal/modules/cjs/loader:1159:10) at Module.load (node:internal/modules/cjs/loader:981:32) at Function.Module._load (node:internal/modules/cjs/loader:822:12) at Module.require (node:internal/modules/cjs/loader:1005:19) at require (node:internal/modules/cjs/helpers:102:18) at Object. (/Users/manojadams/projects/wealthy/goku/node_modules/@manojadams/metaforms-mui/dist/index.js:9:19)

Build error occurred Error: Failed to collect page data for /fixed-deposit/basic-form at /Users/manojadams/projects/wealthy/goku/node_modules/next/dist/build/utils.js:916:15 at processTicksAndRejections (node:internal/process/task_queues:96:5) { type: 'Error' } `

• If I do not use mui-tel-input component in the library, it works fine.
• Not able to figure out what is the issue.

[viclafouch]

Maybe try this in your next.config.js file:

const nextConfig = {
  transpilePackages: ['@manojadams/metaforms-mui'],
}

module.exports = nextConfig

[petergok]

Transpiling the mui-tel-input itself worked for me:

const nextConfig = {
  transpilePackages: ['mui-tel-input'],
}

module.exports = nextConfig

[antokhio]

Transpiling the mui-tel-input itself worked for me:

const nextConfig = {
  transpilePackages: ['mui-tel-input'],
}

module.exports = nextConfig

Hi. I've would not call this a proper solution. Looks like there is something fishy with a build. It prolly thinks it's ESM but it's CJS. Gonna check if there is a way to properly fix that.

This is the reason why i don't like vite for packages, with tsup you can setup this part easily...