NextJS build fails starting from 3.0.6

[nicelittlethings]

I bumped some packages today, including this one, and build started failing. Resolved it by downgrading to 3.0.5 which works fine.

• next: 13.5.6
• react: 18.2.0
• react-gradient-color-picker: 3.0.6 and 3.0.7

Error:

SyntaxError: Unexpected token '.'
    at internalCompileFunction (node:internal/vm:73:18)
    at wrapSafe (node:internal/modules/cjs/loader:1274:20)
    at Module._compile (node:internal/modules/cjs/loader:1320:27)
    at Module._extensions..js (node:internal/modules/cjs/loader:1414:10)
    at Module.load (node:internal/modules/cjs/loader:1197:32)
    at Module._load (node:internal/modules/cjs/loader:1013:12)
    at Module.require (node:internal/modules/cjs/loader:1225:19)
    at mod.require (/Users/alwinroosen/Projects/nicelittlethings/frontend/node_modules/next/dist/server/require-hook.js:64:28)
    at require (node:internal/modules/helpers:177:18)
    at Object.<anonymous> (/Users/alwinroosen/Projects/nicelittlethings/frontend/node_modules/react-best-gradient-color-picker/dist/cjs/components/index.js:35:43)

[yashodhan271]

The error you're encountering, SyntaxError: Unexpected token '.', suggests there's a problem with parsing JavaScript code, likely due to the use of modern JavaScript syntax or features not recognized by your current setup. This can happen after upgrading dependencies if the new versions of these dependencies use syntax or language features that your environment does not support or is not configured to handle.

Given the packages and versions you mentioned (next: 13.5.6, react: 18.2.0, react-gradient-color-picker: 3.0.6 and 3.0.7), here are a few steps you can take to troubleshoot and potentially fix the issue:

1. Check Node.js Version

Ensure you're using a version of Node.js that supports optional chaining (?.) and nullish coalescing (??) operators, as these are relatively recent additions to the language. These features were introduced in Node.js v14.0.0. If you're using an older version of Node.js, upgrading to a newer version might resolve the issue.

2. Babel Configuration

If your project is set up to transpile code using Babel (which is common in Next.js projects), ensure that your Babel configuration is up to date and includes the necessary plugins or presets to handle modern JavaScript syntax. For Next.js projects, custom Babel configuration can be provided through a .babelrc file or by adding a babel config in next.config.js.

A typical Babel configuration that ensures broad compatibility includes presets like @babel/preset-env:

{
  "presets": ["next/babel", "@babel/preset-env"]
}

Ensure that your Babel setup is correctly configured to include these or similar presets that cover the latest JavaScript features.

3. Next.js and Webpack Configuration

Next.js abstracts away most of the Webpack configuration, but there might be cases where customizing the Webpack config could help. For instance, ensuring that all your JavaScript code, including node_modules, is correctly transpiled can be crucial. You can customize Webpack's behavior in next.config.js using the webpack configuration option:

// next.config.js
module.exports = {
  webpack: (config, { buildId, dev, isServer, defaultLoaders, webpack }) => {
    // Important: return the modified config
    return config;
  },
};

However, be cautious with transpiling all node_modules, as it can significantly impact build time. It's better to target specific packages that require transpilation.

4. Dependency Conflict Resolution

Since downgrading react-gradient-color-picker to 3.0.5 resolves the issue, there might be a specific change in 3.0.6 or 3.0.7 that's causing compatibility issues. Review the changelog or commit history for react-gradient-color-picker to identify any changes that could lead to this problem. It's also worth checking if there are open issues or updates regarding this error in the library's repository.

5. Community and Support Channels

If you're stuck, consider reaching out for help. You can ask for guidance:

• On the GitHub issues page of the react-gradient-color-picker repository.
• In community forums or chat platforms dedicated to Next.js or React.
• Through Stack Overflow, tagging your question appropriately with next.js, reactjs, and react-gradient-color-picker.

Remember to provide detailed information about your issue, including the error message, Node.js version, and any relevant configuration details, to help others understand and address your problem more effectively.

[hxf31891]

@nicelittlethings this should be fixed as of 3.0.10