Build error occurred due to the presence of the following error: Module parse failed with an unexpected character ''' (1:0)

I am facing an issue regarding an unexpected character in a node module file.

Below is the content of my next.config.js file:


    /**
     * @type {import('next').NextConfig}
     */
    
    const UglifyJsPlugin = require("uglifyjs-webpack-plugin");
    const path = require('path');
    
    const nextConfig = {
      /* config options here */
      webpack: (config, { isServer }) => {
        if (!isServer) {
          config.resolve.fallback.fs = false;
          config.resolve.fallback.tls = false;
          config.resolve.fallback.net = false;
          config.resolve.fallback.dns = false;
        }
        return config;
      }
    }
    
    module.exports = {
      nextConfig,
      optimization: {
        minimizer: [new UglifyJsPlugin()],
      },
      externals: {
        saslprep: require("saslprep"),
      },
      experimental: {
        forceSwcTransforms: true,
      },
      publicRuntimeConfig: {
        // for multimedia files
        staticFolder: "https://basic.am/static",
      },
      loaders: [{
        test: /.node?$/,
        loader: 'babel-loader',
      }]
    };

  

Upon running the command npm run build, I encountered the following error:


    warn - Invalid next.config.js options detected:
      - The root value contains unexpected properties like nextConfig, optimization, externals, and loaders, which are not in the list of allowed properties.
    
    See more info here: https://nextjs.org/docs/messages/invalid-next-config

    warn - You have enabled the experimental feature (forceSwcTransforms) in next.config.js.
    warn - Experimental features may lead to unexpected or broken application behavior. Use at your own risk.

    info - Linting and type validity checking in progress  
    info - Generating an optimized production build  
    Failed to compile.
    
    ./node_modules/@mongodb-js/zstd-darwin-x64/zstd.darwin-x64.node
    Module parse failed: Unexpected character '`' (1:0)
    You may need to configure appropriate loaders to handle this file type. See https://webpack.js.org/concepts#loaders
    
    Import trace for requested module:
    ... 

    ./node_modules/@napi-rs/snappy-darwin-x64/snappy.darwin-x64.node
    Module parse failed: Unexpected character '`' (1:0)
    This file requires suitable loaders for processing. Refer to https://webpack.js.org/concepts#loaders for more details.
    
    Import trace for requested module:
    ...

    Build failed due to webpack errors
  

I attempted to add loaders, but it did not resolve the issue.

Answer №1

If you encounter a similar error, consider including { test: /.txt$/, use: 'raw-loader' } in your next.config.js configurations. I faced this issue in one of my projects and implementing this solution resolved it for me.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Unable to cancel the RTK query request

It's quite a dilemma. I need to handle the request differently when there is no user present. I've attempted different approaches like this and that const { data: carts = [] as ICart[], isFetching } = api.useGetCartProductsQuery(user.id, { skip: ...

Struggling with retrieving the $id variable from the view in both the controller and the database through Ajax

While checking my view, I noticed that the variable $id is visible. However, when I send it through Ajax, it ends up as NULL in the database. The way I'm sending the variable $id from the view using Ajax is like this: $.ajax({ url:'{ ...

Error in Express.js application: form fields lose their values

I am currently developing a blogging application using Express, EJS and MongoDB. One of the main features is an "Add New Post" form with an addPost() method in the controller; exports.addPost = (req, res, next) => { const errors = validationResult ...

How to dynamically reset an ng-form in Angular

After reviewing the following resources: Reset Form in AngularJS and Angular clear subform data and reset validation, I am attempting to develop a flexible form reset/clear function that would resemble the code snippet below: $scope.clearSection = functio ...

On Linux systems, Node.js in JavaScript interprets strings as objects only

I'm encountering an issue with my Discord.io bot. I am attempting to run it on a Linux server, but the Linux version of Node.js keeps treating the contents of a string as a separate object, leading to the following TypeError: TypeError: Object IT&apo ...

Angular.js - organizing a list of items and preserving the outcome

Here is a compilation of randomly arranged items: <ul class="one" drag-drop="page.items"> <li ng-repeat='item in page.items|orderBy:page.random as result'> <img ng-src="http://placecage.com/{{item.id*100}}/{{item.id*100}}"& ...

Adjusting image dynamically based on conditions

I need to dynamically display images on my HTML based on specific conditions using TypeScript. In my TypeScript file: styleArray = ["Solitary", "Visual","Auditory","Logical","Physical","Social","Verbal",]; constructor(){ for (var i = 0; this.sty ...

Unlock the power of Angular pipes in window.open with URL parameters!

<div class="member-img" onclick="window.open(childEpisode.File_URL | fullPath)"> </div> The fullPath function concatenates the domain part to the relative URL stored in file_URL. However, there seems to be an issue as it i ...

Issue with alert dismissal button not visible

I am dynamically updating the alert message: <div id="alert" hidden="hidden"> <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button> </div> $('#alert').addClass("alert alert-dan ...

Guide to setting up a back button to return to the previous page in an iframe application on Facebook

I've developed a Facebook application that is contained within an IFRAME. Upon opening the application, users are presented with the main site, and by clicking on the gallery, they can view a variety of products. The gallery includes subpages that lo ...

Sophisticated jQuery templates

Working with jQuery templates can be straightforward for basic data structures. <script type="jquery/x-jquery-tmpl" id="myTemplate"> <li> ${Element} </li> </script> var elements = [ { Element: "Hydrogen" }, { Element: "Oxy ...

How can an Angular Component be created in the browser using the standard method?

Attempting to develop a basic Angular example using JS/ESM. It has been some time since working within the angular environment, and there appear to be two primary choices: Utilizing the UMD lib (preferably to be avoided) Using the ESM2015 folder and loadi ...

Obtain GPS coordinates (latitude/longitude) from a Google map by dropping a marker on the

Is there a straightforward script that can load a Google Map and, when clicked, display a marker that saves the latitude and longitude values to a variable? Does anyone know if there is an existing PHP solution for this functionality? Appreciate any help ...

I'm having trouble getting Socket.io to function properly with my Node/Express application

Using openshift with express, I have been experiencing difficulties configuring socket.io. No matter what adjustments I make, it seems to disrupt my application. What could be the issue? Interestingly, when I disable the sections related to socket.io, the ...

Regular expression: Validate in PHP (on the server-side) or JavaScript (on the client-side)

I am working on a form that validates user input using PHP, JavaScript, and AJAX. I plan to use regex to validate each field, but I'm unsure about which method is best for checking it... In your experience, do you recommend using JavaScript or PHP fo ...

Implementing dynamic content updating in WordPress by passing variables and utilizing AJAX

Currently, I am working on a shopping page that displays a list of all the stores. To streamline the user experience, I have created a sidebar containing various categories and implemented pagination within the store listings. These lists are generated thr ...

What is the best way to integrate GeoJSON data into my next.js application using Leaflet?

I am encountering an issue in my Next.js app while trying to display multiple locations on a leaflet map using a GeoJSON data file. Everything works fine when I have just one location displayed on the map, but as soon as I import additional data and attemp ...

Display with organized information, Arrange with unprocessed data in DataTables.net

Below is a snippet of the datatables configuration I am working with: { "dom" : "rltip", "processing" : true, "serverSide" : false, "order" : [ [ 1 , "desc" ] ], "searching" : false, data: [ { "column-a" : "Samp ...

Incorporating JSTree Into Your Website's Heading: A Step-By-Step

I'm in search of a way to integrate the following code snippet as a JSTree into the heading section of a webpage, depicted below: <div id="jstree"> <ul> <li>Core 1 <ul> & ...

Bootstrap Collapse function might not function properly immediately following the execution of Collapse Methods

Here is the reference link: http://jsfiddle.net/72nfxgjs/ The code snippet I used is from w3schools: http://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_ref_js_collapse&stacked=h <script type="text/javascript"> $("#collapse1").col ...