Unable to run Next App in Ubantu

[vignesh-gupta]

Summary

Hello All, I've install ubantu recently and I was trying to run one of my old project (which is working fine in my windows laptop). So I tried creating a new project with npx create-next-app@latest but it has the same issue

Error : Error [ValidationError]: Invalid configuration object. Webpack has been initialized using a configuration object that does not match the API schema.

I'm not much familiar with the new env so I'm not able to figure out is the issue. and below is the next info

Operating System:
      Platform: linux
      Arch: x64
      Version: #24-Ubuntu SMP PREEMPT_DYNAMIC Fri Jun 16 12:03:50 UTC 2023
    Binaries:
      Node: 18.16.1
      npm: 9.5.1
      Yarn: N/A
      pnpm: 8.6.5
    Relevant packages:
      next: 13.4.7
      eslint-config-next: 13.4.7
      react: 18.2.0
      react-dom: 18.2.0
      typescript: 5.1.6

Additional information

The Whole Error output: 
vignesh@Leo:~/Desktop/Code It!/projects/my-app$ npm run dev

> my-app@0.1.0 dev
> next dev

- ready started server on 0.0.0.0:3000, url: http://localhost:3000
Error [ValidationError]: Invalid configuration object. Webpack has been initialized using a configuration object that does not match the API schema.
 - configuration[0].cache.cacheDirectory: The provided value "/home/vignesh/Desktop/Code It!/projects/my-app/.next/cache/webpack" contains exclamation mark (!) which is not allowed because it's reserved for loader syntax.
   -> Base directory for the cache (defaults to node_modules/.cache/webpack).
 - configuration[0].context: The provided value "/home/vignesh/Desktop/Code It!/projects/my-app" contains exclamation mark (!) which is not allowed because it's reserved for loader syntax.
   -> The base directory (absolute path!) for resolving the `entry` option. If `output.pathinfo` is set, the included pathinfo is shortened to this directory.
 - configuration[0].module.rules[3].oneOf[17].issuer.and[0]: The provided value "/home/vignesh/Desktop/Code It!/projects/my-app" contains exclamation mark (!) which is not allowed because it's reserved for loader syntax.
 - configuration[0].output.path: The provided value "/home/vignesh/Desktop/Code It!/projects/my-app/.next" contains exclamation mark (!) which is not allowed because it's reserved for loader syntax.
   -> The output directory as **absolute path** (required).
 - configuration[1].cache.cacheDirectory: The provided value "/home/vignesh/Desktop/Code It!/projects/my-app/.next/cache/webpack" contains exclamation mark (!) which is not allowed because it's reserved for loader syntax.
   -> Base directory for the cache (defaults to node_modules/.cache/webpack).
 - configuration[1].context: The provided value "/home/vignesh/Desktop/Code It!/projects/my-app" contains exclamation mark (!) which is not allowed because it's reserved for loader syntax.
   -> The base directory (absolute path!) for resolving the `entry` option. If `output.pathinfo` is set, the included pathinfo is shortened to this directory.
 - configuration[1].module.rules[4].oneOf[15].issuer.and[0]: The provided value "/home/vignesh/Desktop/Code It!/projects/my-app" contains exclamation mark (!) which is not allowed because it's reserved for loader syntax.
 - configuration[1].output.path: The provided value "/home/vignesh/Desktop/Code It!/projects/my-app/.next/server" contains exclamation mark (!) which is not allowed because it's reserved for loader syntax.
   -> The output directory as **absolute path** (required).
 - configuration[2].cache.cacheDirectory: The provided value "/home/vignesh/Desktop/Code It!/projects/my-app/.next/cache/webpack" contains exclamation mark (!) which is not allowed because it's reserved for loader syntax.
   -> Base directory for the cache (defaults to node_modules/.cache/webpack).
 - configuration[2].context: The provided value "/home/vignesh/Desktop/Code It!/projects/my-app" contains exclamation mark (!) which is not allowed because it's reserved for loader syntax.
   -> The base directory (absolute path!) for resolving the `entry` option. If `output.pathinfo` is set, the included pathinfo is shortened to this directory.
 - configuration[2].module.rules[8].oneOf[15].issuer.and[0]: The provided value "/home/vignesh/Desktop/Code It!/projects/my-app" contains exclamation mark (!) which is not allowed because it's reserved for loader syntax.
 - configuration[2].output.path: The provided value "/home/vignesh/Desktop/Code It!/projects/my-app/.next/server" contains exclamation mark (!) which is not allowed because it's reserved for loader syntax.
   -> The output directory as **absolute path** (required).
    at validate (/home/vignesh/Desktop/Code It!/projects/my-app/node_modules/next/dist/compiled/schema-utils3/index.js:1:150822)
    at validateSchema (/home/vignesh/Desktop/Code It!/projects/my-app/node_modules/next/dist/compiled/webpack/bundle5.js:28:1412868)
    at create (/home/vignesh/Desktop/Code It!/projects/my-app/node_modules/next/dist/compiled/webpack/bundle5.js:28:1458302)
    at webpack (/home/vignesh/Desktop/Code It!/projects/my-app/node_modules/next/dist/compiled/webpack/bundle5.js:28:1458939)
    at f (/home/vignesh/Desktop/Code It!/projects/my-app/node_modules/next/dist/compiled/webpack/bundle5.js:28:888402)
    at HotReloader.start (/home/vignesh/Desktop/Code It!/projects/my-app/node_modules/next/dist/server/dev/hot-reloader.js:756:51)
    at async DevServer.prepareImpl (/home/vignesh/Desktop/Code It!/projects/my-app/node_modules/next/dist/server/dev/next-dev-server.js:672:9)
    at async NextServer.prepare (/home/vignesh/Desktop/Code It!/projects/my-app/node_modules/next/dist/server/next.js:165:13)
    at async Server.<anonymous> (/home/vignesh/Desktop/Code It!/projects/my-app/node_modules/next/dist/server/lib/render-server.js:124:17) {
  type: 'ValidationError',
  errors: [
    {
      keyword: 'anyOf',
      dataPath: '[0].cache',
      schemaPath: '#/anyOf',
      params: {},
      message: 'should match some schema in anyOf',
      schema: [Array],
      parentSchema: [Object],
      data: [Object],
      children: [Array]
    },
    {
      dataPath: '[0].context',
      schemaPath: '#/definitions/Context/absolutePath',
      keyword: 'absolutePath',
      params: [Object],
      message: `The provided value "/home/vignesh/Desktop/Code It!/projects/my-app" contains exclamation mark (!) which is not allowed because it's reserved for loader syntax.`,
      parentSchema: [Object],
      schema: true,
      data: '/home/vignesh/Desktop/Code It!/projects/my-app'
    },
    {
      keyword: 'oneOf',
      dataPath: '[0].module.rules',
      schemaPath: '#/properties/rules/oneOf',
      params: [Object],
      message: 'should match exactly one schema in oneOf',
      schema: [Array],
      parentSchema: [Object],
      data: [Array],
      children: [Array]
    },
    {
      dataPath: '[0].output.path',
      schemaPath: '#/definitions/Path/absolutePath',
      keyword: 'absolutePath',
      params: [Object],
      message: `The provided value "/home/vignesh/Desktop/Code It!/projects/my-app/.next" contains exclamation mark (!) which is not allowed because it's reserved for loader syntax.`,
      parentSchema: [Object],
      schema: true,
      data: '/home/vignesh/Desktop/Code It!/projects/my-app/.next'
    },
    {
      keyword: 'anyOf',
      dataPath: '[1].cache',
      schemaPath: '#/anyOf',
      params: {},
      message: 'should match some schema in anyOf',
      schema: [Array],
      parentSchema: [Object],
      data: [Object],
      children: [Array]
    },
    {
      dataPath: '[1].context',
      schemaPath: '#/definitions/Context/absolutePath',
      keyword: 'absolutePath',
      params: [Object],
      message: `The provided value "/home/vignesh/Desktop/Code It!/projects/my-app" contains exclamation mark (!) which is not allowed because it's reserved for loader syntax.`,
      parentSchema: [Object],
      schema: true,
      data: '/home/vignesh/Desktop/Code It!/projects/my-app'
    },
    {
      keyword: 'oneOf',
      dataPath: '[1].module.rules',
      schemaPath: '#/properties/rules/oneOf',
      params: [Object],
      message: 'should match exactly one schema in oneOf',
      schema: [Array],
      parentSchema: [Object],
      data: [Array],
      children: [Array]
    },
    {
      dataPath: '[1].output.path',
      schemaPath: '#/definitions/Path/absolutePath',
      keyword: 'absolutePath',
      params: [Object],
      message: `The provided value "/home/vignesh/Desktop/Code It!/projects/my-app/.next/server" contains exclamation mark (!) which is not allowed because it's reserved for loader syntax.`,
      parentSchema: [Object],
      schema: true,
      data: '/home/vignesh/Desktop/Code It!/projects/my-app/.next/server'
    },
    {
      keyword: 'anyOf',
      dataPath: '[2].cache',
      schemaPath: '#/anyOf',
      params: {},
      message: 'should match some schema in anyOf',
      schema: [Array],
      parentSchema: [Object],
      data: [Object],
      children: [Array]
    },
    {
      dataPath: '[2].context',
      schemaPath: '#/definitions/Context/absolutePath',
      keyword: 'absolutePath',
      params: [Object],
      message: `The provided value "/home/vignesh/Desktop/Code It!/projects/my-app" contains exclamation mark (!) which is not allowed because it's reserved for loader syntax.`,
      parentSchema: [Object],
      schema: true,
      data: '/home/vignesh/Desktop/Code It!/projects/my-app'
    },
    {
      keyword: 'oneOf',
      dataPath: '[2].module.rules',
      schemaPath: '#/properties/rules/oneOf',
      params: [Object],
      message: 'should match exactly one schema in oneOf',
      schema: [Array],
      parentSchema: [Object],
      data: [Array],
      children: [Array]
    },
    {
      dataPath: '[2].output.path',
      schemaPath: '#/definitions/Path/absolutePath',
      keyword: 'absolutePath',
      params: [Object],
      message: `The provided value "/home/vignesh/Desktop/Code It!/projects/my-app/.next/server" contains exclamation mark (!) which is not allowed because it's reserved for loader syntax.`,
      parentSchema: [Object],
      schema: true,
      data: '/home/vignesh/Desktop/Code It!/projects/my-app/.next/server'
    }
  ],
  schema: {
    definitions: {
      Amd: [Object],
      AmdContainer: [Object],
      AssetFilterItemTypes: [Object],
      AssetFilterTypes: [Object],
      AssetGeneratorDataUrl: [Object],
      AssetGeneratorDataUrlFunction: [Object],
      AssetGeneratorDataUrlOptions: [Object],
      AssetGeneratorOptions: [Object],
      AssetInlineGeneratorOptions: [Object],
      AssetModuleFilename: [Object],
      AssetModuleOutputPath: [Object],
      AssetParserDataUrlFunction: [Object],
      AssetParserDataUrlOptions: [Object],
      AssetParserOptions: [Object],
      AssetResourceGeneratorOptions: [Object],
      AuxiliaryComment: [Object],
      Bail: [Object],
      CacheOptions: [Object],
      CacheOptionsNormalized: [Object],
      Charset: [Object],
      ChunkFilename: [Object],
      ChunkFormat: [Object],
      ChunkLoadTimeout: [Object],
      ChunkLoading: [Object],
      ChunkLoadingGlobal: [Object],
      ChunkLoadingType: [Object],
      Clean: [Object],
      CleanOptions: [Object],
      CompareBeforeEmit: [Object],
      Context: [Object],
      CrossOriginLoading: [Object],
      CssChunkFilename: [Object],
      CssExperimentOptions: [Object],
      CssFilename: [Object],
      CssGeneratorOptions: [Object],
      CssParserOptions: [Object],
      Dependencies: [Object],
      DevServer: [Object],
      DevTool: [Object],
      DevtoolFallbackModuleFilenameTemplate: [Object],
      DevtoolModuleFilenameTemplate: [Object],
      DevtoolNamespace: [Object],
      EmptyGeneratorOptions: [Object],
      EmptyParserOptions: [Object],
      EnabledChunkLoadingTypes: [Object],
      EnabledLibraryTypes: [Object],
      EnabledWasmLoadingTypes: [Object],
      Entry: [Object],
      EntryDescription: [Object],
      EntryDescriptionNormalized: [Object],
      EntryDynamic: [Object],
      EntryDynamicNormalized: [Object],
      EntryFilename: [Object],
      EntryItem: [Object],
      EntryNormalized: [Object],
      EntryObject: [Object],
      EntryRuntime: [Object],
      EntryStatic: [Object],
      EntryStaticNormalized: [Object],
      EntryUnnamed: [Object],
      Environment: [Object],
      Experiments: [Object],
      ExperimentsCommon: [Object],
      ExperimentsNormalized: [Object],
      Extends: [Object],
      ExtendsItem: [Object],
      ExternalItem: [Object],
      ExternalItemFunctionData: [Object],
      ExternalItemValue: [Object],
      Externals: [Object],
      ExternalsPresets: [Object],
      ExternalsType: [Object],
      FileCacheOptions: [Object],
      Filename: [Object],
      FilenameTemplate: [Object],
      FilterItemTypes: [Object],
      FilterTypes: [Object],
      GeneratorOptionsByModuleType: [Object],
      GlobalObject: [Object],
      HashDigest: [Object],
      HashDigestLength: [Object],
      HashFunction: [Object],
      HashSalt: [Object],
      HotUpdateChunkFilename: [Object],
      HotUpdateGlobal: [Object],
      HotUpdateMainFilename: [Object],
      HttpUriAllowedUris: [Object],
      HttpUriOptions: [Object],
      HttpUriOptionsAllowedUris: [Object],
      IgnoreWarnings: [Object],
      IgnoreWarningsNormalized: [Object],
      Iife: [Object],
      ImportFunctionName: [Object],
      ImportMetaName: [Object],
      InfrastructureLogging: [Object],
      JavascriptParserOptions: [Object],
      Layer: [Object],
      LazyCompilationDefaultBackendOptions: [Object],
      LazyCompilationOptions: [Object],
      Library: [Object],
      LibraryCustomUmdCommentObject: [Object],
      LibraryCustomUmdObject: [Object],
      LibraryExport: [Object],
      LibraryName: [Object],
      LibraryOptions: [Object],
      LibraryType: [Object],
      Loader: [Object],
      MemoryCacheOptions: [Object],
      Mode: [Object],
      ModuleFilterItemTypes: [Object],
      ModuleFilterTypes: [Object],
      ModuleOptions: [Object],
      ModuleOptionsNormalized: [Object],
      Name: [Object],
      NoParse: [Object],
      Node: [Object],
      NodeOptions: [Object],
      Optimization: [Object],
      OptimizationRuntimeChunk: [Object],
      OptimizationRuntimeChunkNormalized: [Object],
      OptimizationSplitChunksCacheGroup: [Object],
      OptimizationSplitChunksGetCacheGroups: [Object],
      OptimizationSplitChunksOptions: [Object],
      OptimizationSplitChunksSizes: [Object],
      Output: [Object],
      OutputModule: [Object],
      OutputNormalized: [Object],
      Parallelism: [Object],
      ParserOptionsByModuleType: [Object],
      Path: [Object],
      Pathinfo: [Object],
      Performance: [Object],
      PerformanceOptions: [Object],
      Plugins: [Object],
      Profile: [Object],
      PublicPath: [Object],
      RawPublicPath: [Object],
      RecordsInputPath: [Object],
      RecordsOutputPath: [Object],
      RecordsPath: [Object],
      Resolve: [Object],
      ResolveAlias: [Object],
      ResolveLoader: [Object],
      ResolveOptions: [Object],
      ResolvePluginInstance: [Object],
      RuleSetCondition: [Object],
      RuleSetConditionAbsolute: [Object],
      RuleSetConditionOrConditions: [Object],
      RuleSetConditionOrConditionsAbsolute: [Object],
      RuleSetConditions: [Object],
      RuleSetConditionsAbsolute: [Object],
      RuleSetLoader: [Object],
      RuleSetLoaderOptions: [Object],
      RuleSetLogicalConditions: [Object],
      RuleSetLogicalConditionsAbsolute: [Object],
      RuleSetRule: [Object],
      RuleSetRules: [Object],
      RuleSetUse: [Object],
      RuleSetUseItem: [Object],
      ScriptType: [Object],
      SnapshotOptions: [Object],
      SourceMapFilename: [Object],
      SourcePrefix: [Object],
      StatsOptions: [Object],
      StatsValue: [Object],
      StrictModuleErrorHandling: [Object],
      StrictModuleExceptionHandling: [Object],
      Target: [Object],
      TrustedTypes: [Object],
      UmdNamedDefine: [Object],
      UniqueName: [Object],
      WarningFilterItemTypes: [Object],
      WarningFilterTypes: [Object],
      WasmLoading: [Object],
      WasmLoadingType: [Object],
      Watch: [Object],
      WatchOptions: [Object],
      WebassemblyModuleFilename: [Object],
      WebpackOptionsNormalized: [Object],
      WebpackPluginFunction: [Object],
      WebpackPluginInstance: [Object],
      WorkerPublicPath: [Object]
    },
    title: 'WebpackOptions',
    description: 'Options object as provided by the user.',
    type: 'object',
    additionalProperties: false,
    properties: {
      amd: [Object],
      bail: [Object],
      cache: [Object],
      context: [Object],
      dependencies: [Object],
      devServer: [Object],
      devtool: [Object],
      entry: [Object],
      experiments: [Object],
      extends: [Object],
      externals: [Object],
      externalsPresets: [Object],
      externalsType: [Object],
      ignoreWarnings: [Object],
      infrastructureLogging: [Object],
      loader: [Object],
      mode: [Object],
      module: [Object],
      name: [Object],
      node: [Object],
      optimization: [Object],
      output: [Object],
      parallelism: [Object],
      performance: [Object],
      plugins: [Object],
      profile: [Object],
      recordsInputPath: [Object],
      recordsOutputPath: [Object],
      recordsPath: [Object],
      resolve: [Object],
      resolveLoader: [Object],
      snapshot: [Object],
      stats: [Object],
      target: [Object],
      watch: [Object],
      watchOptions: [Object]
    }
  },
  headerName: 'Webpack',
  baseDataPath: 'configuration'
}

Example

No response

[icyJoseph]

If you run:

npm list -g --depth=0

Does it list webpack? I am afraid it is installed globally.

[vignesh-gupta]

No It doesn't -

/home/vignesh/.nvm/versions/node/v18.16.1/lib
├── corepack@0.17.0
├── npm@9.5.1
└── pnpm@8.6.5

[vignesh-gupta]

Hey @icyJoseph any other ideas to try?

[vignesh-gupta]

Any suggested helps?

[icyJoseph]

@vignesh-gupta isnt' the issue that your path has a ! and webpack can't tolerate that? /home/vignesh/Desktop/Code It!/ <-> This one bit with Code It!, remove the ! -

[icyJoseph]

webpack/webpack#5320 Yeah that's what it is 😅

[vignesh-gupta]

Silly me! Thanks it's working now.