React - How to use npm-linked module

Question

How can I use a module imported via

npm link

into webpack for a React application?

MyModule_Folder
---------------------------------
    |--package.json
    |--src
        |--myModule
            |--MyComponent.jsx
            |--MyStyle.css
            ...
    |--public
        |--index.html

App
---------------------------------
    |--package.json
    |--src
        ...

MyModule/package.json is like this

{
    "name": "@mymodule/external",
    "version": "1.0.0",
    "main": "src/index.jsx",
    "babel": {
        ...
    },
    "devDependencies": {
        ...
    },
    "dependencies": {
        ...
    },
    "scripts": {
        ...
    }
}

I typed

cd <path_to_MyModule_Folder>
npm link
cd <path_to_MyReactApp>
npm link @mymodule/external

If I import my module in this way

import { MyModuleClass } from "@mymodule/external";

I got an error

The error is: `Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. Check the render method of n` [this is the error url](https://reactjs.org/docs/error-decoder.html?invariant=130&args[]=undefined&args[]=%20Check%20the%20render%20method%20of%20%60n%60) — Vito Lipari, Apr 24 '18 at 18:28
Well then you have wrong MyModule please show full source index.ja of myModule — Milos Mosovsky, Apr 24 '18 at 18:29
In MyModule there is this class `import { Component } from "react"; class Esterno extends Component { constructor(props) { super(props); console.log('ElementoEsterno.constructor'); this.val = 15; } render() { return (
Elemento ESTERNO
); } } export default Esterno ` and an index.js file with this content: `export * from './esterno.jsx';` — Vito Lipari, Apr 24 '18 at 18:32

score 1 · Answer 1 · answered Apr 24 '18 at 18:40

1

You have wrong importing exporting the MyModule

MyModule.js

import React from 'react'

export function helloWorld() {}

Class Esterno extends React.Component {
  render() { ..... }
}

export default Esterno

index.js

export * from './MyModule.js'

now imagine it's usage

import Esterno from 'mymodule'

console.log(Esterno)

you are now importing all contents of module (*) so the otuput will be

object = {
 helloWorld: function() {}
 default: class Esterno {}
}

now let's change the export in index.js

export default from './MyModule.js`

now the console log will output

object = class Esterno {}

so you are missing difference between export/import * and default default is default module and * is object of all exports from within module.

answered Apr 24 '18 at 18:40

Milos Mosovsky

2,913
1
16
18

unfortunately I still have the same [error](https://reactjs.org/docs/error-decoder.html?invariant=130&args[]=undefined&args[]=%20Check%20the%20render%20method%20of%20%60n%60) `Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. Check the render method of n`. [this is app repo](https://github.com/vitolipari/react-import_external_module) and [this is external module repo](https://github.com/vitolipari/react-external_module/) – Vito Lipari Apr 24 '18 at 20:58
Well you have in external module in package.json specified `src/index.js` this file doesn't exists, you have it in root, and you still have export * instead of export default as I wrote ... – Milos Mosovsky Apr 24 '18 at 21:01
I fixed!!! that are the repos [app](https://github.com/vitolipari/react-import_external_module) and [external module](https://github.com/vitolipari/react-external_module/) – Vito Lipari Apr 24 '18 at 21:52
where? https://github.com/vitolipari/react-external_module/blob/master/index.js#L2 I still see `export *` – Milos Mosovsky Apr 24 '18 at 21:54

React - How to use npm-linked module

1 Answers1