Next.js Discord

Discord Forum

Next.js not working

Answered
Ocicat posted this in #help-forum
Open in Discord
OcicatOP
Next js ran into the following issue.
 Ready in 1212ms
 â—‹ Compiling / ...
 ⨯ ./app/layout.jsx:1:0
https://nextjs.org/docs/messages/module-not-found
 ⨯ ./app/layout.jsx:1:0
Module not found: Can't resolve '@styles/globals.css'
> 1 | import '@styles/globals.css';
  2 |
  3 | import Nav from "@components/Nav";
  4 | import Provider from '@components/Provider';
https://nextjs.org/docs/messages/module-not-found
 âš  Fast Refresh had to perform a full reload due to a runtime error.
 ⨯ ./app/layout.jsx:1:0
Module not found: Can't resolve '@/styles/globals.css'
> 1 | import '@/styles/globals.css';
  2 |
  3 | import Nav from "@/components/Nav";
  4 | import Provider from '@/components/Provider';

https://nextjs.org/docs/messages/module-not-found
Answered by Masai Lion
const path = require('path');

/** @type {import('next').NextConfig} */
const nextConfig = {
  experimental: {
    serverComponentsExternalPackages: ["mongoose"],
  },
  images: {
    domains: ['lh3.googleusercontent.com'],
  },
  webpack(config) {
    config.resolve.alias['@'] = path.join(__dirname, 'src');
    return config;
  },
};

module.exports = nextConfig;


Adjust 'src' to your actual source directory
View full answer

17 Replies

OcicatOP
@Masai Lion
Masai Lion
Alr
Where is your globals.css located?
OcicatOP
projectname/styles/globals.css
Spectacled bear
look the tsconfig and change bundler to module and try again; or check your node version (>=18)
OcicatOP
im using jsconfig
@Ocicat im using jsconfig
Masai Lion
Doesn’t matter, check your config
Spectacled bear
ok, jsconfig jeje
OcicatOP
jsconfig.json
{
  "compilerOptions": {
    "paths": {
      "@*": ["./*"]
    }
  }
}
next.config.js
/** @type {import('next').NextConfig} */
const nextConfig = {
    experimental: {
      serverComponentsExternalPackages: ["mongoose"],
    },
    images: {
      domains: ['lh3.googleusercontent.com'],
    },
    webpack(config) {
      config.experiments = {
        ...config.experiments,
        topLevelAwait: true,
      }
      return config
    }
  }
  
  module.exports = nextConfig
I've made changes to next.config
thats when errors started
Masai Lion
const path = require('path');

/** @type {import('next').NextConfig} */
const nextConfig = {
  experimental: {
    serverComponentsExternalPackages: ["mongoose"],
  },
  images: {
    domains: ['lh3.googleusercontent.com'],
  },
  webpack(config) {
    config.resolve.alias['@'] = path.join(__dirname, 'src');
    return config;
  },
};

module.exports = nextConfig;


Adjust 'src' to your actual source directory
Answer
OcicatOP
Seems to progress.
Working enough to work on the tutorial.
@Ocicat Seems to progress. Working enough to work on the tutorial.
Masai Lion
How old is that tutorial ? :meow_stare:
OcicatOP
9 months ago
seems to be the only the few working.
or good enough to explain Next.js