App does not run upon `Yarn Dev`

[Jay-Patel-257]

I'm running this template with Yarn V3 but upon yarn dev it results in the follwing error:

▲ Next.js 14.2.3
  - Local:        http://localhost:3001

 ✓ Starting...
 ✓ Ready in 2.9s
 ○ Compiling / ...
 ⨯ ./node_modules/@jupyterlite/pyodide-kernel/pypi/ipykernel-6.9.2-py3-none-any.whl
Module parse failed: Unexpected character '♥' (1:2)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
(Source code omitted for this binary file)

Import trace for requested module:
./node_modules/@jupyterlite/pyodide-kernel/pypi/ipykernel-6.9.2-py3-none-any.whl
./node_modules/@jupyterlite/pyodide-kernel/lib/_pypi.js
./node_modules/@jupyterlite/pyodide-kernel/lib/index.js
./node_modules/@jupyterlite/pyodide-kernel-extension/lib/index.js
./node_modules/@datalayer/jupyter-react/lib/jupyter/JupyterContext.js
./node_modules/@datalayer/jupyter-react/lib/index.js
./components/NotebookComponent.tsx
 ⨯ ./node_modules/@jupyterlite/pyodide-kernel/pypi/ipykernel-6.9.2-py3-none-any.whl
Module parse failed: Unexpected character '♥' (1:2)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
(Source code omitted for this binary file)

Import trace for requested module:
./node_modules/@jupyterlite/pyodide-kernel/pypi/ipykernel-6.9.2-py3-none-any.whl
./node_modules/@jupyterlite/pyodide-kernel/lib/_pypi.js
./node_modules/@jupyterlite/pyodide-kernel/lib/index.js
./node_modules/@jupyterlite/pyodide-kernel-extension/lib/index.js
./node_modules/@datalayer/jupyter-react/lib/jupyter/JupyterContext.js
./node_modules/@datalayer/jupyter-react/lib/index.js
./components/NotebookComponent.tsx
 ⨯ ./node_modules/@jupyterlite/pyodide-kernel/pypi/ipykernel-6.9.2-py3-none-any.whl
Module parse failed: Unexpected character '♥' (1:2)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
(Source code omitted for this binary file)

Import trace for requested module:
./node_modules/@jupyterlite/pyodide-kernel/pypi/ipykernel-6.9.2-py3-none-any.whl
./node_modules/@jupyterlite/pyodide-kernel/lib/_pypi.js
./node_modules/@jupyterlite/pyodide-kernel/lib/index.js
./node_modules/@jupyterlite/pyodide-kernel-extension/lib/index.js
./node_modules/@datalayer/jupyter-react/lib/jupyter/JupyterContext.js
./node_modules/@datalayer/jupyter-react/lib/index.js
./components/NotebookComponent.tsx
 GET / 500 in 73832ms

Actually I'm planning to use it in one of my nextjs app. It was giving me same error so i thought of trying this template first, but encountered the same issue. Can anyone help?

[echarles]

@Jay-Patel-257 Thx for trying and reporting 👍

I have tests on my env with yarn v3. It works fine (the below message should be considered as warnings) (*-.

Can you double check that your next.config.js looks like this

/*
 * Copyright (c) 2021-2023 Datalayer, Inc.
 *
 * MIT License
 */

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: false,
  webpack: (config, options) => {
    config.module.rules.push(
      { test: /\.js.map$/, type: 'asset/resource' },
      {
        // In .css files, svg is loaded as a data URI.
        test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
        issuer: /\.css$/,
        use: {
          loader: 'svg-url-loader',
          options: { encoding: 'none', limit: 10000 },
        },
      },
      {
        // In .ts and .tsx files (both of which compile to .js), svg files
        // must be loaded as a raw string instead of data URIs.
        test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
        issuer: /\.js$/,
        type: 'asset/source',
      },
      // Ship the JupyterLite service worker.
      {
        resourceQuery: /text/,
        type: 'asset/resource',
        generator: {
          filename: '[name][ext]',
        },
      },
      // Rule for pyodide kernel
      {
        test: /pypi\/.*/,
        type: 'asset/resource',
        generator: {
          filename: 'pypi/[name][ext][query]',
        },
      },
      {
        test: /pyodide-kernel-extension\/schema\/.*/,
        type: 'asset/resource',
        generator: {
          filename: 'schema/[name][ext][query]',
        },
      },
    )
    return config
  },
}

module.exports = nextConfig

(*)

(datalayer) (datalayer) echarles@eric-2:~/datalayer-osp/src/examples/jupyter-nextjs$ yarn dev
  ▲ Next.js 14.2.3
  - Local:        http://localhost:3000

 ✓ Starting...
 ✓ Ready in 2.2s
 ○ Compiling / ...
 ⚠ ../../node_modules/@jupyterlab/settingregistry/lib/settingregistry.js
Attempted import error: 'parse' is not exported from 'json5' (imported as 'json5').

Import trace for requested module:
../../node_modules/@jupyterlab/settingregistry/lib/settingregistry.js
../../node_modules/@jupyterlab/settingregistry/lib/index.js
../../node_modules/@jupyterlab/shortcuts-extension/lib/index.js
../../tech/jupyter/ui/packages/react/lib/components/jupyterlab/JupyterLabAppPlugins.js
../../tech/jupyter/ui/packages/react/lib/index.js
./components/NotebookComponent.tsx

../../node_modules/@jupyterlite/pyodide-kernel/lib/worker.js
Critical dependency: the request of a dependency is an expression

Import trace for requested module:
../../node_modules/@jupyterlite/pyodide-kernel/lib/worker.js
../../node_modules/@jupyterlite/pyodide-kernel/lib/index.js
../../node_modules/@jupyterlite/pyodide-kernel-extension/lib/index.js
../../tech/jupyter/ui/packages/react/lib/state/State.js
../../tech/jupyter/ui/packages/react/lib/state/index.js
../../tech/jupyter/ui/packages/react/lib/index.js
./components/NotebookComponent.tsx

../../node_modules/glslify-deps/index.js
Critical dependency: the request of a dependency is an expression

Import trace for requested module:

[Jay-Patel-257]

@echarles thanks for your quick reply! Yes, the config file is the same, but the message does not come as a warning but build error! Hence, I've not made any changes in the code from repo.

The next.js version is 14.2.3 and Yarn version is 3.8.2. Maybe if you could also give me some idea about your environment setup too.