Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Stuff not working? #1

Open
b3llash opened this issue Jan 9, 2018 · 14 comments
Open

Stuff not working? #1

b3llash opened this issue Jan 9, 2018 · 14 comments

Comments

@b3llash
Copy link
Contributor

b3llash commented Jan 9, 2018

So, following https://stackoverflow.com/a/46512165/4522960:

I'm now a bit confused with what's the issue is.

Originally I though it was the fact that you're not able to consume the module from an external package, but not it seems like you're attempting to import it from the same package?

See fork that attempt to demonstrate a flow in which the package is independently built following an install.
This is only the general idea, ignoring module-system issues and package duplicates.
Is this what you were aiming for?

Also, see https://medium.com/@BrodaNoel/how-to-create-a-react-component-and-publish-it-in-npm-668ad7d363ce
@teobais
Copy link
Owner

teobais commented Jan 9, 2018

Exactly, so, right now, after having checked out your changes, I get the following in my browser's console:

warning.js?8a56:33 Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: object. You likely forgot to export your component from the file it's defined in. Check the render method of `App`.
    in App
printWarning @ warning.js?8a56:33
invariant.js?4599:49 Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. You likely forgot to export your component from the file it's defined in. Check the render method of `App`.
    at invariant (eval at <anonymous> (bundle.js:1117), <anonymous>:42:15)
    at instantiateReactComponent (eval at <anonymous> (bundle.js:1789), <anonymous>:72:55)
    at instantiateChild (eval at <anonymous> (bundle.js:1783), <anonymous>:42:28)
    at eval (eval at <anonymous> (bundle.js:1783), <anonymous>:69:16)
    at traverseAllChildrenImpl (eval at <anonymous> (bundle.js:1855), <anonymous>:75:5)
    at traverseAllChildrenImpl (eval at <anonymous> (bundle.js:1855), <anonymous>:91:23)
    at traverseAllChildren (eval at <anonymous> (bundle.js:1855), <anonymous>:170:10)
    at Object.instantiateChildren (eval at <anonymous> (bundle.js:1783), <anonymous>:68:7)
    at ReactDOMComponent._reconcilerInstantiateChildren (eval at <anonymous> (bundle.js:1765), <anonymous>:183:41)
    at ReactDOMComponent.mountChildren (eval at <anonymous> (bundle.js:1765), <anonymous>:222:27)
:5000/favicon.ico Failed to load resource: the server responded with a status of 404 (Not Found)

@b3llash
Copy link
Contributor Author

b3llash commented Jan 10, 2018

Sorry, it's still confusing to me, because there's no separation between the app and the reusable component.
It would be better to setup react-scroll2top-button as an independent package, then import it from another project and see if it works.

@teobais
Copy link
Owner

teobais commented Jan 10, 2018

This is what I'm talking about.
That's why I showed you this project the other day; it plays the role of a "3rd party package" that tries to use react-scroll2top-button as an individual component.

The error I fore-mentioned came after having tried using your version of react-scroll2top-button to test-react-scroll2top-button, using npm link.

However, while typing the above lines, I recalled that I never run npm start once on the cloned version of yours, but I directly linked it with npm link. After running npm start, I get this:

RROR in multi main
Module not found: Error: Cannot resolve module 'index' in /Users/toubou91/git/reacto-scroll2top-button-fork-so-question
 @ multi main

ERROR in ./Scroll2TopButton.jsx
Module parse failed: /Users/toubou91/git/reacto-scroll2top-button-fork-so-question/Scroll2TopButton.jsx Unexpected token (7:19)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected token (7:19)
    at Parser.pp$4.raise (/Users/toubou91/git/reacto-scroll2top-button-fork-so-question/node_modules/webpack/node_modules/acorn/dist/acorn.js:2221:15)
    at Parser.pp.unexpected (/Users/toubou91/git/reacto-scroll2top-button-fork-so-question/node_modules/webpack/node_modules/acorn/dist/acorn.js:603:10)
    at Parser.pp.expect (/Users/toubou91/git/reacto-scroll2top-button-fork-so-question/node_modules/webpack/node_modules/acorn/dist/acorn.js:597:28)
    at Parser.pp$3.parseMethod (/Users/toubou91/git/reacto-scroll2top-button-fork-so-question/node_modules/webpack/node_modules/acorn/dist/acorn.js:2071:10)
    at Parser.pp$1.parseClassMethod (/Users/toubou91/git/reacto-scroll2top-button-fork-so-question/node_modules/webpack/node_modules/acorn/dist/acorn.js:1137:25)
    at Parser.pp$1.parseClass (/Users/toubou91/git/reacto-scroll2top-button-fork-so-question/node_modules/webpack/node_modules/acorn/dist/acorn.js:1118:14)
    at Parser.pp$1.parseStatement (/Users/toubou91/git/reacto-scroll2top-button-fork-so-question/node_modules/webpack/node_modules/acorn/dist/acorn.js:697:19)
    at Parser.pp$1.parseTopLevel (/Users/toubou91/git/reacto-scroll2top-button-fork-so-question/node_modules/webpack/node_modules/acorn/dist/acorn.js:638:25)
    at Parser.parse (/Users/toubou91/git/reacto-scroll2top-button-fork-so-question/node_modules/webpack/node_modules/acorn/dist/acorn.js:516:17)
    at Object.parse (/Users/toubou91/git/reacto-scroll2top-button-fork-so-question/node_modules/webpack/node_modules/acorn/dist/acorn.js:3098:39)
 @ ./example/index.js 9:24-58
webpack: Failed to compile.
^C

@teobais
Copy link
Owner

teobais commented Jan 13, 2018

@b3llash any update?

@b3llash
Copy link
Contributor Author

b3llash commented Jan 14, 2018 •
edited
Loading

@toubou91 I made some updates, so it should work now.
The most important part, which I somehow missed, is the output > libraryTarget key in webpack.config.production.js. I kept the postinstall script, and a fork of the test app now uses local dependency (which could easily be a git URL).

@teobais
Copy link
Owner

teobais commented Jan 16, 2018 •
edited
Loading

From a fast check, it looks good.
I will probably merge your fork by the end of the week.
Many many thanks.

@teobais
Copy link
Owner

teobais commented Jan 17, 2018

In addition, after having pulled your fork, npm start gives the following error:

ERROR in multi main
Module not found: Error: Cannot resolve module 'index' in /Users/toubou91/git/reacto-scroll2top-button-fork-so-question
 @ multi main

ERROR in ./Scroll2TopButton.jsx
Module parse failed: /Users/toubou91/git/reacto-scroll2top-button-fork-so-question/Scroll2TopButton.jsx Unexpected token (7:19)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected token (7:19)
    at Parser.pp$4.raise (/Users/toubou91/git/reacto-scroll2top-button-fork-so-question/node_modules/webpack/node_modules/acorn/dist/acorn.js:2221:15)
    at Parser.pp.unexpected (/Users/toubou91/git/reacto-scroll2top-button-fork-so-question/node_modules/webpack/node_modules/acorn/dist/acorn.js:603:10)
    at Parser.pp.expect (/Users/toubou91/git/reacto-scroll2top-button-fork-so-question/node_modules/webpack/node_modules/acorn/dist/acorn.js:597:28)
    at Parser.pp$3.parseMethod (/Users/toubou91/git/reacto-scroll2top-button-fork-so-question/node_modules/webpack/node_modules/acorn/dist/acorn.js:2071:10)
    at Parser.pp$1.parseClassMethod (/Users/toubou91/git/reacto-scroll2top-button-fork-so-question/node_modules/webpack/node_modules/acorn/dist/acorn.js:1137:25)
    at Parser.pp$1.parseClass (/Users/toubou91/git/reacto-scroll2top-button-fork-so-question/node_modules/webpack/node_modules/acorn/dist/acorn.js:1118:14)
    at Parser.pp$1.parseStatement (/Users/toubou91/git/reacto-scroll2top-button-fork-so-question/node_modules/webpack/node_modules/acorn/dist/acorn.js:697:19)
    at Parser.pp$1.parseTopLevel (/Users/toubou91/git/reacto-scroll2top-button-fork-so-question/node_modules/webpack/node_modules/acorn/dist/acorn.js:638:25)
    at Parser.parse (/Users/toubou91/git/reacto-scroll2top-button-fork-so-question/node_modules/webpack/node_modules/acorn/dist/acorn.js:516:17)
    at Object.parse (/Users/toubou91/git/reacto-scroll2top-button-fork-so-question/node_modules/webpack/node_modules/acorn/dist/acorn.js:3098:39)
 @ ./example/index.js 9:24-58
webpack: Failed to compile.

@b3llash
Copy link
Contributor Author

b3llash commented Jan 18, 2018

@toubou91 I honestly tried not to mess around too much with your codebase and made the assumption that react-scroll2top-button should only be built and imported, not that it should run on its own. I now realize that you would also like to provide a working example as part of this package. With my latest commit, both of these should work.

Note that:

  • When configuring babel-loader, prefer exclude over include.
  • Packages are normally self-built (like we're doing with react-scroll2top-button). react-lorem doesn't do that, so any project that uses it will have to be responsible for transpiling it. That's the reason for this line exclude: /node_modules\/(?!react-lorem)/. Definitely not ideal.
    If you implement the technique used in react-scroll2top-button, you could simply specify exclude: /node_modules/.

I hope you get the idea here.

@teobais
Copy link
Owner

teobais commented Jan 28, 2018

Many thanks, it's more clear now!!! 👍

@teobais teobais closed this as completed Jan 28, 2018
@teobais
Copy link
Owner

teobais commented Jan 28, 2018

Hmm, after publishing the new version to npm, removing the local dependency and trying to install it as a normal npm dependency, I get the following error:

> react-scroll2top-button@1.0.6 postinstall /Users/toubou91/git/test-react-scroll2top-button/node_modules/react-scroll2top-button
> npm run build


> react-scroll2top-button@1.0.6 build /Users/toubou91/git/test-react-scroll2top-button/node_modules/react-scroll2top-button
> cross-env BABEL_ENV=production ./node_modules/.bin/webpack --config webpack.config.production.js

events.js:137
      throw er; // Unhandled 'error' event
      ^

Error: spawn ./node_modules/.bin/webpack ENOENT
    at _errnoException (util.js:1003:13)
    at Process.ChildProcess._handle.onexit (internal/child_process.js:201:19)
    at onErrorNT (internal/child_process.js:389:16)
    at process._tickCallback (internal/process/next_tick.js:152:19)
    at Function.Module.runMain (module.js:703:11)
    at startup (bootstrap_node.js:193:16)
    at bootstrap_node.js:617:3
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! react-scroll2top-button@1.0.6 build: `cross-env BABEL_ENV=production ./node_modules/.bin/webpack --config webpack.config.production.js`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the react-scroll2top-button@1.0.6 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm WARN Local package.json exists, but node_modules missing, did you mean to install?

npm ERR! A complete log of this run can be found in:
npm ERR!   [masked]/.npm/_logs/2018-01-28T11_19_57_442Z-debug.log
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! react-scroll2top-button@1.0.6 postinstall: `npm run build`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the react-scroll2top-button@1.0.6 postinstall 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:

I tried upgrading to the lastest version of npm and node, but the error still persists.
Any ideas @b3llash ?

@teobais teobais reopened this Jan 28, 2018
@teobais
Copy link
Owner

teobais commented Feb 1, 2018

@b3llash any update on this?

@b3llash
Copy link
Contributor Author

b3llash commented Feb 1, 2018

@toubou91 I'll try and have a look.

@teobais
Copy link
Owner

teobais commented Feb 2, 2018

@b3llash ok, cool, thanks.

@b3llash
Copy link
Contributor Author

b3llash commented Feb 2, 2018

@toubou91 This typically means something is running on the same port, but I don't see the relation to this case. For what it's worth: does killall node or rimraf node_modules && npm i make any difference?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@teobais @b3llash