erikras / erikras/react-redux-universal-hot-example

Unable to adapt code for publishing to NPM

Open
#873 0 comments 0 reactions 0 assignees View on GitHub
Dominant language
JavaScript
Stars
12.1k
Forks
2.5k
PR merge metrics
No merged PRs in 30d

Description

Hi, I have an app built using this boilerplate that I would like to have installable using `npm install react-app`.

I'm currently testing the changes needed to support this using the most recent master branch of this repo and local publishing using `npm install -g` from within the project folder.
#### Steps I have completed

I have added the bin script to the `package.json` file, like so:

``` json
"bin": {
"react-app": "bin/server.js"
}
```

I created a `.npmignore` file in the root of the project, based on the existing `.gitignore` file but with only the following lines:

```
.idea/
node_modules/
*.iml
npm-debug.log
```

This is so the built front-end resources are included in the NPM publish (I'll add a prepublish to make sure these files are correct). This was based on another issue I saw regarding deployment to heroku (#183).

I also removed the `postinstall` script from `package.json` so that the WebPack build isn't attempted after running `npm i -g`.

Finally the last set I have completed is changing this line in `server.babel.js`:

``` javascript
var babelrc = fs.readFileSync('./.babelrc');
```

To this:

``` javascript
var babelrc = fs.readFileSync(__dirname + '/.babelrc');
```

This was causing an error when trying to run `react-app` from a folder that didn't contain a `.babelrc` file.
#### Errors

After having completed these steps, I can run the command `react-app` but get varying errors based on where I run the command from.

Note that I am running the command with the NODE_ENV env variable to stop the `piping` code block in `bin/server.js`.

```
NODE_ENV=production react-app
```

If I run this command i get the following error:

```
/Users/rosscourt/.npm-packages/lib/node_modules/react-redux-universal-hot-example/src/server.js:1
(function (exports, require, module, __filename, __dirname) { import Express from 'express';
^^^^^^

SyntaxError: Unexpected token import
at exports.runInThisContext (vm.js:53:16)
at Module._compile (module.js:374:25)
at Module._extensions..js (module.js:405:10)
at require.extensions.(anonymous function) (/Users/rosscourt/.npm-packages/lib/node_modules/react-redux-universal-hot-example/node_modules/babel-core/lib/api/register/node.js:214:7)
at Object._module3.default._extensions.(anonymous function) [as .js] (/Users/rosscourt/.npm-packages/lib/node_modules/react-redux-universal-hot-example/node_modules/require-hacker/babel-transpiled-modules/require hacker.js:250:71)
at Module.load (module.js:344:32)
at Function.Module._load (module.js:301:12)
at Module.require (module.js:354:17)
at require (internal/module.js:12:17)
at /Users/rosscourt/.npm-packages/lib/node_modules/react-redux-universal-hot-example/bin/server.js:27:5
```

However, when I run this command from the folder that this is installed to, in my case:

```
~/.npm-packages/lib/node_modules/react-redux-universal-hot-example
```

I get past this error, facing two subsequent errors which are easily solved by using this command instead:

```
NODE_ENV=production NODE_PATH=./src PORT=8080 react-app
```

Using this command the server starts successfully.

I can deal with the need to add environment variables myself, the problem I can't get my head around is why it only runs when inside the installed `.npm-packages` folder.

Contributor guide

Open the contributing guide

Research direction

Start with package.json, bin/server.js, server.babel.js, and .babelrc, then reproduce the installed command from outside the package directory using the documented NODE_ENV setting. Compare that run with execution from the installed directory and inspect the reported import, path, and NODE_PATH errors. Done means the published react-app command starts from another directory without manually setting NODE_PATH or relying on the package directory as the working directory.

Written by the indexing model from the issue text.

Assessment

Tech stack
babel, express, javascript, node.js, react, redux, webpack
Domain
backend, build-system, cli, release
Issue type
Feature
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.