Encountering ReferenceError while running production build with Webpack

After upgrading to webpack 3.10.0 and Babel 6.26, I managed to fix my dev build but encountered issues with the prod build that I can't seem to resolve.

This is the error message I am seeing:

ERROR in ./src/index.js
Module build failed: ReferenceError: [BABEL] J:\project\src\index.js: Using removed Babel 5 option: foreign.modules - Use the corresponding module transform plugin in the `plugins` option. Check out http://babeljs.io/docs/plugins/#modules    at Logger.error (J:\project\node_modules\babel-core\lib\transformation\file\logger.js:41:11)
at OptionManager.mergeOptions (J:\project\node_modules\babel-core\lib\transformation\file\options\option-manager.js:220:20)
at J:\project\node_modules\babel-core\lib\transformation\file\options\option-manager.js:265:14
...

I visited http://babeljs.io/docs/plugins/#modules as suggested by the error, but it seems like my configurations are correct.

Can someone provide insight into what might be missing in my webpack.config.js file?

//Sample webpack configuration file for analysis
...
javascriptnpmwebpackbabeljs

Answer №1

Waking up well-rested this morning, I stumbled upon a solution. I came across a fix for Webpack 2.0 on this website, which helped me tweak it for Webpack 3.0.

All I had to do was make the following adjustment:

presets: [
  ['env',
    {
      "modules": false
    }],
  'react',
  'stage-2']
})

After implementing this change, npm successfully built my project without any issues.

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

Encountering errors while attempting to set up a Vuetify project using npm installation

These were the steps I followed during the installation of a Vuetify project: -npm install -g vue-cli -vue init vuetifyjs/webpack my-project One of the errors that stood out among all others was: -npm ERR! Unexpected end of JSON ...

npmvuejs2npm-installvuetify.jsnpm-request

I'm experiencing some difficulties utilizing the return value from a function in Typescript

I am looking for a way to iterate through an array to check if a node has child nodes and whether it is compatible with the user's role. My initial idea was to use "for (let entry of someArray)" to access each node value in the array. However, the "s ...

javascriptarraystypescript

Steps for deactivating tab stops on the primary webpage in the presence of a snackbar

On my web page, there are multiple drop-down menus, input fields, and buttons that can be interacted with using both the tab key and mouse. After entering certain data, I trigger a snackbar (source: https://www.w3schools.com/howto/howto_js_snackbar.asp) t ...

htmljavascript

How to make a GET request to a Node server using Angular

I am currently running a node server on port 8000 app.get('/historical/:days' ,(req,res,next){..}) My question is how to send a request from an Angular app (running on port 4200) in the browser to this node server. Below is my attempt: makeReq ...

javascriptangularjsnode.jsangular

Issue with MaterialUI value prop not updating after dynamic rendering of components when value state changes

As I dynamically generate Material UI form components, I encounter an issue with updating their values. The value prop is assigned to a useState values object, and when I update this object and the state, the value in the object changes correctly but the M ...

javascriptreactjsmaterial-uireact-propsreact-state

Guide for using two Async Pipe functions in Angular 7

Two different functions are in place to check a specific condition, and the requirement is for both of them to be true simultaneously. How can *ngIf be utilized to achieve this? Currently, setting just one of them works, but the aim is to have both. HTML ...

javascripthtmlangularpipe

Adding navigation buttons to a Material-UI Select component: A step-by-step guide

Currently, I have integrated a Select component from MUI and it is functioning well. When an item is selected from the list, the router automatically navigates to that location: This is the snippet of code being used: export default function SelectLocatio ...

javascriptreactjsmaterial-uihtml-select

Steps for utilizing response data as parameters for useInfiniteQueryHere is how you can make

On the specific page where I am implementing useInfiniteQuery const { data, error, fetchNextPage, hasNextPage, isFetching, isFetchingNextPage, status } = useInfiniteQuery( ['posts', searchState], ({ pageParam = 1 }) => post.search({ . ...

javascriptreactjstypescriptreact-query

Clicking an element to uncover more information

Currently, I am working on solving the second question within this series of problems. The task involves creating a functionality where clicking on a legislator's name displays additional information about them. You can view my progress so far by visi ...

javascriptjqueryapiget

Removing all text inside an input field with Vue

I am trying to create a password input field using type 'text' instead of 'password.' <input type="text" v-model="form.password" @input="test" /> <input type="hidden" v-model="form.hiddenPassword" /> As part of my approach ...

javascriptvue.js

Having trouble with a lengthy formula in your Google Sheets Apps Script function? You may encounter an error like `SyntaxError: missing ) after argument list line: 14 file: new line.gs`. Let

The Apps Script function being discussed: function insertNewRow() { var ss = SpreadsheetApp.openById("redactedforprivacy"); var sheet = ss.getSheetByName("Main"); sheet.insertRowBefore(2); var date = new Date(); var month = date.getMonth() + 1 ...

javascriptgoogle-apps-scriptgoogle-sheets

Unable to execute the Vite project

I ran into an issue with my Vite project yesterday. I closed it and now that I have reopened it, the 'npm run dev' command is throwing an error. My project is built using Vite with React and TypeScript. Attached is a screenshot of the error mess ...

node.jsreactjstypescriptnpmvite

Error: The variable <something> has not been defined

Within my GitHub project, an error stating Uncaught ReferenceError: breakpoints is not defined is appearing in the Chrome console. This issue should be resolved by including breakpoints.min.js, but it seems that webpack is somehow causing interference. I ...

javascriptnode.jsnpmwebpack

Encountering difficulties while attempting to delete with a router.delete command - receiving a 404 not

Within my application, I am passing the request parameter 'id' in the router.delete method and communicating it with the Vuex service. However, when triggering the action, an API call is made but it results in a 404 error indicating "not found" a ...

javascriptexpressvue.jsvuex

Switch back and forth between adding and removing a table row using jQuery

Currently, I am developing a drop-down feature for a table that populates its data using MySQL. The functionality involves creating a new table row below the current one when a user clicks a button. However, instead of generating multiple new rows each tim ...

javascriptjqueryhtmlhtml-table

Utilize unshift() method in JavaScript to insert form input into an array

I'm having trouble with adding elements to an array using a form and the unshift() method. The code snippet provided below isn't functioning as expected, and I need help understanding why. <form> <input id="input"></input> < ...

javascriptarrays

Is it possible to clone a git repository and then upgrade all packages to their most recent versions?

I am currently working on a script to duplicate a project that is configured to utilize Vite with all eslint and prettier config files already in place. Despite my efforts searching on the NPM website and using Google, I have not been able to find a suitab ...

batch-filenpmversion-control

Setting up the most recent version of Node.js

Recently, I encountered some difficulties while trying to update my npm. After updating my node version from v6 to v10, I was unsure about the version of npm that comes with it. Surprisingly, it still showed the old version of npm (3.3.12) and refused to u ...

node.jsnpm

JavaScript encounters an unexpected identifier: Syntax Error

I encountered a syntax error while executing the code below: var userAnswer = prompt("Do you want to race Bieber on stage?") if userAnswer = ("yes") { console.log("You and Bieber start racing. It's neck and neck! You win by a shoelace!") } else { ...

javascript

Finding differences between two 24-hour format times using moment.js

Is there a way to compare two times in 24-hour format using the code below? $("#dd_start_timing, #dd_end_timing").on('keyup change keydown', function() { var DutyDayStartTime = $("#dd_start_timing").val().trim();// 13:05 var ...

javascriptjquerymomentjs