Using the npm package in JavaScript results in a return value of 1

Recently, I have been working on turning this into an npm package:

Test.tsx:

import React from "react";

export default class Test extends React.Component {
    public render() {
        return (
            <h1>
                Hallo
            </h1>
        )
    }

    public blub() {
        return 12;
    }
}

index.tsx:

import Test from './Test';
module.exports = { Test }

This project was created using create-react-app eject feature. the compiled file (/dist/static/js/main.chunk.js) contains these lines:

module.exports = {
    Test: _Test__WEBPACK_IMPORTED_MODULE_1__[/* default */ "a"]
};

The package.json file is structured like this:

{
  "name": "npmreacttestcrm",
  "version": "0.1.12",
  "private": false,
  "main": "dist/static/js/main.chunk.js",
  "dependencies": {
    ...
  },
  "scripts": {
    "start": "node scripts/start.js",
    "build": "node scripts/build.js",
    "test": "node scripts/test.js",
    "publish:npm": "npm run build && npm publish && python updater.py"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "devDependencies": {
    ...
  },
  "jest": {
    ...
  },
  "babel": {
    "presets": [
      "react-app",
      "@babel/preset-typescript"
    ]
  }
}

However, when trying to import the package into a different project, only the number 1 is returned.

import Test1 from 'npmreacttestcrm';
console.log('test1', Test1);
const Test = require("npmreacttestcrm");
console.log('test', Test);

Output in console: test1 1 test 1

Can you provide guidance on how to correctly import my package?

Answer №1

Apologies for the confusion earlier, I mistakenly had my files split up but now have consolidated them into a single bundle.js file that I can easily import.

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

Encountered SyntaxError: An unexpected token has been found while integrating leaflet with flask

Despite adding all necessary scripts and configuring my API_KEY in config.js, I keep getting an error message saying "Uncaught SyntaxError: Unexpected token." I have double-checked my API key multiple times, and it seems to be correct. Here is a snippet f ...

Discover the method to retrieve every element from a Listbox with the click of a Button and utilizing an ajax call

How can I retrieve all the elements from a Listbox when a Button Click event triggers an ajax call? I have created a function that successfully returns all the elements from the Listbox. However, when I try to bind it with the ajax call, it doesn't w ...

Implementing JavaScript to Retrieve and Insert Full HTML Tags into a Textarea

I am currently trying to extract an HTML source code value and insert it into a specific textarea or div upon clicking a button. However, I am encountering issues where I am not receiving the entire HTML tags - it seems to begin with a Meta tag and is remo ...

All components load successfully except for the worker in Webpack

I've been working on configuring webpack to bundle my react project. I successfully set up the webpack_public_path variable and all modules are loading correctly, except for the worker. const path = require('path'); const MonacoWebpackPlugi ...

The syntax for importing JSON in JavaScript ES6 is incredibly straightforward and

Whenever I attempt to write my code following the ES6 standard and try to import a .json file, it ends up failing on me. import JsonT from "../../Data/t.json" //not functioning as expected var JsonT = require('../../Data/t.json'); //works fine ...

Leveraging jQuery to detect an AJAX load that does not involve the use of jQuery's AJAX method

Hi all, I have a challenging issue that I'm struggling with in terms of jQuery/JavaScript. I am fetching data through standard AJAX without using any frameworks like jQuery. Now, the dilemma is that once the page has loaded, I need to implement a jQu ...

JavaScript loop to target a specific item

My goal is to animate the correct div under each navigation item, rather than all of them with the "navItemUnder" class. You can see exactly what I mean by hovering over a navigation item in this codePen. I am looking for a solution to target only one lin ...

Verify the values in the dropdown menu and then cross-reference them with the user's input

Is there a way to verify if the textfield, newTeamName, is already included in a list of teamnames that are stored within a select box? I seem to be encountering issues with my code - can you point out what might be the problem? Just to note, there are no ...

Typescript conversion: Changing a relational array into a tree object

My database is structured as an array of objects with the following format; array = [ {"name": "a", "id": "1", "parentId": NULL}, {"name": "b", "id": "2", "parentId": "1"}, {"name": "c", "id": "3", "parentId": "1"}, {"name": "d", "id": "4", "parentId" ...

Create a toggle effect similar to jQuery using JavaScript

Looking for pure JavaScript code to implement show/hide functionality similar to jQuery. Currently, I am using the following code: y=document.getElementById('regform').style.display; if (y == 'block'){ document.getElementById(&apo ...

Storing JSON information within a variable

I'm currently working on an autocomplete form that automatically populates the location field based on the user's zipcode. Below is the code snippet I've written to retrieve a JSON object containing location information using the provided zi ...

Is it better to use Rollup for exporting individual components instead of lumping them all into one index.js

Currently, I am working on developing a custom component library using React and Rollup for bundling. The current setup bundles all components into two large files: dist ├ cjs │ └ index.js (1.7mb) └ esm └ index.js (1.7mb) I would like to ...

AngularJS $location Redirect Error: Property 'path' Undefined

I'm struggling with an issue in my AngularJS code where I am trying to change the URL without reloading the page when a submit button is clicked. However, I keep getting a TypeError: Cannot read property 'path' of undefined in the console. ...

Guide on setting an attribute value with JavaScriptExecutor in Selenium WebDriver

I am attempting to set an attribute value for all instances of the same type of <img> tag on My website, for example: <img src="images/temp/advertisement.png"> and I want to set style="display: none" so that I can hide them. I have tried the ...

Having the `overflow:auto` property conceals additional content

I've been experimenting with a demo on my website that incorporates snap.js and chart.js. Check out the demo on JSFIDDLE here After adding some JavaScript to show chart.js content while scrolling, I encountered a problem with the CSS style on line 1 ...

Learn the process of dynamically populating an HTML table with data using JavaScript and JSON

I have developed a code snippet to dynamically add an HTML table without using jQuery. The code serves as an application from the server to the client, where the client receives a JSON object to parse into a string. Here is how you can add an HTML table ...

Error: NgFor can only be used to bind to data structures that are iterable, such as Arrays. JSON arrays are

Encountering ERROR Error: Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables like Arrays. *ngFor="let spec of vehicleSpecs" Tried various solutions and searched extensi ...

The feature to disable swiping with SwipeEnabled set to false seems to be

I am encountering an issue with react-navigation 5 in my react-native project. I am trying to disable drawer swipes while still allowing the user to close the drawer by clicking outside of it. I have researched this property in the react-navigation documen ...

Error: webpack is failing to load the style and CSS loaders

I'm currently experimenting with the FullCalendar plugin from fullcalendar.io. They recommended using Webpack as a build system, which is new to me. I managed to set up the calendar functionality after some research, but I'm facing issues with th ...

A guide to adjusting the font size and placement of text in a precise manner

Is there a way to adjust the font size and position in a particular text? How can this be achieved? doc.text( 40, 30, "jspdf" ); https://i.stack.imgur.com/Io7RE.png ...