Cannot access 'pts' before initialization | Next.js | Page 1

Yes, this error can occur when using the @atomic elm/font/local package with Next.js 13. This error is caused by a change in the TypeScript configuration in Next.js 13, which requires the allowSyntheticDefaultImports option to be enabled in order to import default exports from CommonJS modules.

To fix this error, you can update your TypeScript configuration to enable the allowSyntheticDefaultImports option. Here is an example of how you could do this:

Install the typescript npm package, if you don't already have it. This package provides the TypeScript compiler and runtime, which is required to enable and use the allowSyntheticDefaultImports option.

Create a tsconfig.json file in the root of your project, if you don't already have one. This file defines the TypeScript configuration for your project, including the compiler options and the files and paths that should be included or excluded.

Add the allowSyntheticDefaultImports option to the compilerOptions section of your tsconfig.json file, and set it to true. This option enables the TypeScript compiler to import default exports from CommonJS modules, which is required to fix the Cannot access 'pts' before initialization error.

Here is an example tsconfig.json file that enables the allowSyntheticDefaultImports option:

{
  "compilerOptions": {
    "allowSyntheticDefaultImports": true,
    // other compiler options...
  },
  // other options...
}```
Once you have updated your TypeScript configuration and enabled the allowSyntheticDefaultImports option, you should be able to use the @atomic elm/font/local package without encountering the Cannot access 'pts' before initialization error. This should allow you to import and use the local font files in your Next.js 13 app, and customize the fonts and styles for your app.

lmk if you have any other questions 🙂

#Cannot access 'pts' before initialization