"Production environment encounters issues with react helper imports, whereas development environment has no trouble with

I have a JavaScript file named "globalHelper.js" which looks like this:

exports.myMethod = (data) => {
  // method implementation here
}

exports.myOtherMethod = () => { ... }

and so forth...

When I want to use my Helper in other files, I import it as follows:

import helper from "../Helper/globalHelper";

However, I've encountered a problem: Previously, everything worked fine when running my build script with the following command:

"build": "GENERATE_SOURCEMAP=false react-scripts build"

But now, when I run "npm run build", I receive the error message:

Attempted import error: '../Helper/globalHelper' does not contain a default export (imported as 'helper')

Strangely, when I simply start my development server using npm start, everything functions correctly.

I have tried importing the helper using 

import { helper } from "../Helper/globalHelper";
, but that did not resolve the issue either. Does anyone have a solution for this problem?

javascriptreactjstypescriptnpm

Answer №1

Experiment with exporting using ES6 syntax like this

export const someOtherFunction = () => { ... }

Next, make sure to import it from '...your file'

import { someOtherFunction } from '...your file'

The method you are currently using exports.functionName is in CommonJS (CJS) format. To access the methods, you will need to use require.

CommonJS (CJS) format is utilized in Node.js and involves the use of require and module.exports for defining dependencies and modules. The entire npm ecosystem is constructed on this basis.

If you prefer utilizing the module method, consider this approach:

export { anotherMethod1, anotherMethod2 }

Then proceed with importing as shown below:

import * as Module from '....file name'

Answer №2

Without using export default, you will need to import the function using curly braces {} as shown below:

  import {helper} from "../Helper/globalHelper";

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

Is it possible to create tabs using Ajax without using jQuery?

Exploring the realm of tabs that dynamically load content into a div without redirecting to another page unveils numerous possibilities. Although the existing examples mostly rely on ajax with jQuery or similar libraries, I am inclined towards exploring a ...

javascripthtmlajax

What is the method for defining environment variables in package.json?

Is it possible to define environment variables within the package.json file for use with commands like npm start? My current setup in the package.json looks like this: { ... "scripts": { "help": "tagove help", "start": "tagove start" } .. ...

node.jsnpmpackage.jsonnpm-scripts

Leveraging node-orangesms for SMS delivery

My current NodeJS project involves integrating the Orange SMS API from . To facilitate this integration, I have installed the npm package called node-orangesms. However, I am facing challenges in making it functional. I have already acquired a set of cred ...

node.jsapinpmsms

What is the best way to troubleshoot substrings for accurately reading URLs from an object?

While a user inputs a URL, I am attempting to iterate through an object to avoid throwing an error message until a substring does not match the beginning of any of the URLs in my defined object. Object: export const urlStrings: { [key: string]: string } = ...

javascripttypescriptalgorithm

Creating a table in a ReactJS program using Material UI is proving to be quite challenging for me

I am trying to create a table using MaterialUI in my ReactJS application. To do so, I have imported the necessary modules with the following code snippet, as recommended on the official MaterialUI website: import { Table, TableBody, TableHeade ...

reactjsmaterial-ui

What is the purpose of using useRef in React?

As a beginner in React, I am struggling to understand the concept of "useRef." Despite finding some code examples, I still don't grasp its true meaning. Could someone provide an explanation for me? Question 1: Can someone clarify the difference betw ...

reactjsreact-hooks

Is it true that event.stopPropagation does not function for pseudoelements?

I am facing an issue with event handling in my ul element. The ul has three li children elements, and the ul itself has a useCapture event handler for click. In the click event handler, I successfully stop the event using event.stopPropagation(), and every ...

javascripthtmlcss

Dealing with Sequelize Errors

After reviewing the code provided, I am curious if it would be sufficient to simply chain one .catch() onto the outermost sequelize task rather than attaching it to each individual task, which can create a cluttered appearance. Additionally, I am wonderin ...

javascriptnode.jssequelize.js

Having trouble connecting 'chartData' to a 'div' in Angular 2 because it is not recognized as a valid property?

While working on my Angular project, I encountered the following error that I have been unable to resolve: EXCEPTION: Uncaught (in promise): Error: Template parse errors: Can't bind to 'chartData' since it isn't a known property of ...

angulartypescript

"Despite using the setHeader function in express.js to set a cookie, an empty cookie is still being

customer: <a href="http://localhost:3001/user/login">Login</a> server: const token = jwt.sign({ broadcasterId: user.twitchId }, process.env.JWT_SECRET); res.writeHead(301, { "Location": "http://localhost:3000" ...

node.jsreactjsexpresscookies

Toggle between list elements using the inner text of the elements with jQuery

My issue lies in figuring out why my filter function isn't properly working for toggling li elements. JavaScript: $("#searchbox1").on("keyup", function() { var value = $(this).val().toLowerCase(); $("#menulist li") ...

javascriptjqueryhtmlcsslist

Consistently scaling the Embla carousel slides for a seamless presentation experience

In my current project, I am utilizing Embla Carousels and aiming to incorporate a smooth slide scaling effect as users scroll through. The idea is for slides to enlarge the closer they get to the left edge of the carousel container, then decrease in size r ...

javascripthtmlreactjstypescriptembla-carousel

The directive attribute in AngularJS fails to connect to the directive scope

I have been attempting to pass an argument to a directive through element attributes as shown in the snippet below: directive app.directive('bgFluct', function(){ var _ = {}; _.scope = { data: "@ngData" } _.link = function(scope, el ...

javascriptangularjsangularjs-directiveangularjs-scope

Connecting a pre-existing Angular 2 application to a Node.js server: A step-by-step guide

I am currently working on an Angular 2 application with the following structure : View Structure of my Angular app Furthermore, on the server side : View Structure of server app I have noticed that there are two module dependencies folders, but I am un ...

javascriptnode.jsangular

Is it possible for me to trigger a custom event using an eventBus listener?

In the Vue component, I have the following setup: data: function() { return { quotes: [] }; }, created() { eventBus.$on("quoteWasAdded", message => { this.quotes.push(message); this.$emit("quotesWereUpdated", this.quot ...

javascriptvue.jsvue-component

JavaScript's multiple inheritance concept

In the realm of JavaScript, there exists a class that seeks to 'inherit' various objects and their methods. var A = function (a,c){}; var N = { properties1: function(){}; }; var M1 = { properties2: function(){}; }; var M2 = { ...

javascript

Having trouble with a react-native error during npm install? Here's what you might see:

Today, I am excited to set up this library. However, a hurdle came my way in the form of an error message. npm ERR! code ERESOLVE npm ERR! ERESOLVE unable to resolve dependency tree npm ERR! npm ERR! While resolving: [email protected] npm ERR! Foun ...

react-nativenpm

Change the value of a particular property in an array of objects by utilizing an inline function

I am working on updating the price field for a specific object. Below is my selectedCurrenciesArray: const [selectedSwapCurrencies, setSelectedSwapCurrencies] = useState([ { symbol: null, logo: null, price: 0 }, { ...

javascript

Electron-Builder neglects to replicate the node_modules directory in my application

I am encountering an issue with my electron app's file structure. - dist | - index.html | - node_modules | - nm (which is a duplicate of node_modules) - package.json | ... When I reference the node modules in my index.html as node_modules/module, th ...

npmelectronelectron-builder

When typing in the textarea, pressing the return key to create a line break does not function as expected

Whenever I hit the return key to create a new line in my post, it seems to automatically ignore it. For example, if I type 'a' press 'return' and then 'b', it displays 'ab' instead of 'a b'. How can I fi ...

javascriptphphtml