viclafouch / mui-tel-input

📌 A phone number input designed for MUI (Material ui) V6 built with libphonenumber-js
https://viclafouch.github.io/mui-tel-input
MIT License
158 stars 65 forks source link

Next.js build error on 4.0.1 #108

Closed jakeleventhal closed 9 months ago

jakeleventhal commented 9 months ago
/path/to/repo/node_modules/.pnpm/mui-tel-input@4.0.1_@emotion+react@11.11.1_@emotion+styled@11.11.0_@mui+material@5.14.18_@typ_p6xvgzvgrjz63gxhznghs575o4/node_modules/mui-tel-input/dist/mui-tel-input.es.js:1
import { jsxs as _, jsx as p, Fragment as Fe } from "react/jsx-runtime";
^^^^^^

SyntaxError: Cannot use import statement outside a module
    at internalCompileFunction (node:internal/vm:73:18)
    at wrapSafe (node:internal/modules/cjs/loader:1178:20)
    at Module._compile (node:internal/modules/cjs/loader:1220:27)
    at Module._extensions..js (node:internal/modules/cjs/loader:1310:10)
    at Module.load (node:internal/modules/cjs/loader:1119:32)
    at Module._load (node:internal/modules/cjs/loader:960:12)
    at Module.require (node:internal/modules/cjs/loader:1143:19)
    at mod.require (/path/to/repo/node_modules/.pnpm/next@14.0.2_@babel+core@7.23.3_react-dom@18.2.0_react@18.2.0_sass@1.69.5/node_modules/next/dist/server/require-hook.js:64:28)
    at require (node:internal/modules/cjs/helpers:121:18)
    at 70476 (/path/to/repo/apps/client/.next/server/pages/cart.js:1:22652)

> Build error occurred
Error: Failed to collect page data for /cart
    at /path/to/repo/node_modules/.pnpm/next@14.0.2_@babel+core@7.23.3_react-dom@18.2.0_react@18.2.0_sass@1.69.5/node_modules/next/dist/build/utils.js:1217:15
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5) {
  type: 'Error'
}
Error: Command "next build" exited with 1
 ELIFECYCLE  Command failed with exit code 1.
ERROR: command finished with error: command (/path/to/repo/apps/client) pnpm run build exited (1)

I get the above error on 4.0.1 but do not on 4.0.0

Victor1890 commented 9 months ago

try it @jakeleventhal:

/** @type {import('next').NextConfig} */
const nextConfig = {
    transpilePackages: [
        'mui-tel-input'
    ]
}

module.exports = nextConfig
jakeleventhal commented 9 months ago

Yeah, this works. But the distributed package ought to be pre-transpiled. It should not be on the end-consumer to transpile it.

Victor1890 commented 9 months ago

Ought!

jakeleventhal commented 9 months ago

this issue is not resolved

viclafouch commented 9 months ago

Sorry we are going to keep ESM first.

Has the solution https://github.com/viclafouch/mui-tel-input/issues/108#issuecomment-1812978811 solved the issue ?

jakeleventhal commented 9 months ago

Yes, that solves the issue, but its standard to ship a dist folder with pre-transpiled JS