React-to-print: v.2.1.0 Uncaught Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.

[karpovich-philip]

I can't render my component which contains ReactToPrint. I got an error which I mentioned in title. It tells me "Check your code at {MyComponent}.jsx:{rowNumber}. Row Number it's exactly ReactToPrint component.

But it works fine with previous version 2.0.0-alpha.7

Dependencies:
"react": "^16.5.2",
"react-redux": "^5.0.6",
"react-router": "^4.3.1",
"react-router-dom": "^4.3.1",
"react-dom": "^16.5.2",

[duyhau206]

i use:
"prop-types": "^15.5.10"
"react": "^16.8.3",
"react-dom": "^16.2.0",
"react-to-print": "^2.0.0-alpha.7

And I have same warning

[MatthewHerbst]

Hi @karpovich-philip, @duyhau206. Can you please show how you import the component?

@sergeyshmakov is there anything from the TypeScript PR that might be causing this?

[karpovich-philip]

@MatthewHerbst
import ReactToPrint from 'react-to-print';

[duyhau206]

I import component as below
import ReactToPrint from 'react-to-print';

[mikdatdogru]

i have same error too. 2.0.0-alpha-6 version is working

codesandbox is still working because package.json updated, but still 2.0.0-alpha-1 version included

[dsuhic]

I'm guessing something's wrong with the exports. Managed to get it working by using the component as <ReactToGrid.default>. Strangely, simply changing the import statement to import { default as ReactToPrint } from 'react-to-print' doesn't work.

[MatthewHerbst]

I'm able to run the example app in this lib by installing react-to-print locally and importing that in the example instead of importing the source file directly.

Clearly an export issue. Does anyone see an issue with the code?

[duyhau206]

Sometime body print page was bank when i trying print with version 2.0.0-alpha-4.
About version 2.1.1 I have not imported it yet so I haven't checked it yet

[alihameedaukla]

i got the same error on windows only it works on macOS did someone find a solution

[aristech]

Any fix for this yet?

[MatthewHerbst]

@aristech there is a proposed solution in #116. I'm trying to make sure that won't cause other problems before merging it

[HomeSchoolDev]

I pulled in the PR and confirmed that I did get all the changes, but I still can't seem to import the module:

Doing this:
import ReactToPrint from 'react-to-print';

But getting this:
Module not found: Can't resolve 'react-to-print' in

[MatthewHerbst]

@HomeSchoolDev can you be more specific please? How would import ReactToPrint from 'react-to-print' be pointing to your local version?

[HomeSchoolDev]

Sure thing, sorry about that.

I’m installing the package by putting this in my package.json file:

“react-to-print": "gregnb/react-to-print#0ffb52ca86f5325390fac246f10cbc02181eb55d"

Ran yarn install and confirmed that the new changes were in my local react-to-print folder in node_modules.

I didn’t change my import code in my tsx file at all after changing my install from the current prod version to this PR. My current import looks like this:

Import ReactToPrint from ‘react-to-print’.

The module was being found before, but I was obviously getting the error that this thread is about.

[MatthewHerbst]

@HomeSchoolDev after running yarn, can you go into node_modules/react-to-print and manually run the build command, and then see if it works? I don't think the package is actually being built for distribution when you just install it directly from the repo (recall that what is published to npm is not the same as the repo).

[HomeSchoolDev]

@MatthewHerbst Hmm, I ran build in the directory, but I'm getting some errors

`react-to-print derek$ npm run build

webpack --env.production --progress

Hash: bc063caf6e6f3ce370f1
Version: webpack 4.29.6
Time: 89ms
Built at: 04/10/2019 11:40:45 PM
1 asset
Entrypoint main = index.js
[0] ./src/index.tsx 270 bytes {0} [built] [failed] [1 error]

ERROR in ./src/index.tsx 4:7
Module parse failed: Unexpected token (4:7)
You may need an appropriate loader to handle this file type.
| import { findDOMNode } from "react-dom";
|

export interface ITriggerProps {
| onClick: () => void;
| ref: (v: T) => void;
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! [email protected] build: webpack --env.production --progress
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the [email protected] build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:

[anish01stha]

having the same issue. Was working fine in 2.0.0-alpha.7.

[anish01stha]

I'm guessing something's wrong with the exports. Managed to get it working by using the component as <ReactToGrid.default>. Strangely, simply changing the import statement to import { default as ReactToPrint } from 'react-to-print' doesn't work.

I have tried this and using

[MatthewHerbst]

@HomeSchoolDev you'll also need to run npm install --dev within the package so that you have all the build tools needed on your system.

[davalapar]

Also having this at 2.1.0.

            <div
              className={classes.tableUpperDiv}
              ref={(e) => {
                this.printDiv = e !== null ? e : this.printDiv;
              }}
            >
              // content
           </div>
            <div style={{ textAlign: 'right' }}>
              <ReactToPrint
                trigger={() => (
                  <Button variant="outlined" size="small">
                    Print
                  </Button>
                )}
                content={() => this.printDiv}
              />
            </div>

Any ideas?

[HomeSchoolDev]

@MatthewHerbst I'm not sure what's up, but I'm still having issues. Tried running "npm install --dev" in the root of node_modules/react-to-print, but I'm still getting this error:

[0] ./src/index.tsx 270 bytes {0} [built] [failed] [1 error]

ERROR in ./src/index.tsx 4:7
Module parse failed: Unexpected token (4:7)
You may need an appropriate loader to handle this file type.
| import { findDOMNode } from "react-dom";
|

export interface ITriggerProps {
| onClick: () => void;
| ref: (v: T) => void;
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! [email protected] build: webpack --env.production --progress
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the [email protected] build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! [email protected] prepare: npm run build
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the [email protected] prepare script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

[gregnb]

Can anyone still affected by this issue try upgrading to 2.1.1 and let us know if that works for them? If not, please respond with any error messages you are seeing. We'll try to wrap this up shortly

[HomeSchoolDev]

@gregnb Confirmed everything is working great. Thank you! :)

[duyhau206]

Can anyone still affected by this issue try upgrading to 2.1.1 and let us know if that works for them? If not, please respond with any error messages you are seeing. We'll try to wrap this up shortly

Everything is great. Thank you!

[spostad7]

Can anyone still affected by this issue try upgrading to 2.1.1 and let us know if that works for them? If not, please respond with any error messages you are seeing. We'll try to wrap this up shortly

still getting this error, even with upgrading to v2.3.2.

[MatthewHerbst]

Hi @spostad7 do you mind sharing the stack trace you're seeing please?

[spostad7]

hi @MatthewHerbst

Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: object.
Uncaught Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.

renderPrintButton = () => {
        return (
            <button
                type="button"
                className="btn ticket-box__button-print">
                <i className="md-print" />
                test print
            </button>
        );
    };

<ReactToPrint
     trigger={this.renderPrintButton}
     content={props.printContent}
     copyStyles={false}
/>

ReactToPrint v2.3.2

[MatthewHerbst]

@spostad7 can you provide a codesandbox of your code that reproduces the problem by chance please?

[spostad7]

@MatthewHerbst
I am sorry, accidentally I close the project and close the npm start and when I start npm again, the package worked perfectly. It just needed to restart npm to use the new package version.

Thanx a lot for support.