erikras / erikras/react-redux-universal-hot-example
Unable to adapt code for publishing to NPM
- 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
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