Unexpected token: name (App) [{{PKG_NAME}}.js:662,4]

[Anima-t3d]

There is an issue when running webpack -p: ERROR in {{PKG_NAME}}.js from UglifyJs Unexpected token: name (App) [{{PKG_NAME}}.js:662,4]

/*!********************!*\
  !*** ./src/App.js ***!
  \********************/
/***/ (function(module, __webpack_exports__, __webpack_require__) {

"use strict";
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_react__ = __webpack_require__(/*! react */ 28);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_react___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_0_react__);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1_styles_myStyles__ = __webpack_require__(/*! styles/myStyles */ 137);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1_styles_myStyles___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_1_styles_myStyles__);
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return App; });

let App = class App extends __WEBPACK_IMPORTED_MODULE_0_react___default.a.Component {
    render() {
        return __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement(
            'div',
            { className: 'info-box' },
            __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement(
                'h1',
                null,
                'Hello human'
            ),
            __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement('img', { src: 'https://pbs.twimg.com/profile_images/3601970358/74c1908ecf47e17a329a1c8e82236715_400x400.png', alt: 'Red airship', width: '200', height: '200' }),
            __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement(
                'p',
                null,
                'We will be boarding the airship soon...'
            )
        );
    }
};

Additional question: Do I just find and replace {{PKG_NAME}} or is there somewhere I can change it?

[jaredLunde]

So yes, as you've discovered this isn't ready to go out-of-the-box, which I should reflect in its README. It's just an example of how you could go about structuring this type of application.

I have a personal script which installs this package as a dev dependency and then copies over the necessary templates, finds/replaces directory names and files where {{PKG_NAME}} is mentioned. I've considered making it public, but most people just use create-react-app - I'm just not a fan of how it's structured.

If you'd like to use it in a similar manner you would have to (which can easily be packed into an executable):

1. PKG_NAME=your-pkg
2. mkdir $PKG_NAME
3. cd $PKG_NAME
4. npm install webpack2-react-sass-env-boilerplate
5. cp -r ./node_modules/webpack2-react-sass-env-boilerplate/. ./
6. mv package.json.tpl package.json
7. find . -type f \( -name "*.html" -o -name "*.js" -o -name "*.json" \) -and -not -path "*/node_modules/*" -exec sed -i -e "s/{{PKG_NAME}}/${PKG_NAME}/g" {} \;;
8. find . -type d -name "*{{PKG_NAME}}*" -and -not -path "*/node_modules/*" -exec rename "s/(.*)\{\{PKG_NAME\}\}/\$1${PKG_NAME}/" {} \;;
9. npm start

Edit: assuming you're doing this in bash

[jaredLunde]

I've updated the README to include this information

[Anima-t3d]

@jaredlunde Thanks for the updated readme. The {{PKG_NAME}} in [package name replaced]/assets/css/{{PKG_NAME}} is not replaced.

There is also a warning about the package.json: npm WARN enoent ENOENT: no such file or directory, open '/Users/xxx/Desktop/repos/my-pkg/package.json' However the package.json file seems to be fine?

What is the use for having the files with -e appended?

[jaredLunde]

Apologies, #8 above should be:

find . -type d -path "*/{{PKG_NAME}}/*" -and -not -path "*/node_modules/*" -exec rename "s/(.*)\{\{PKG_NAME\}\}/\$1${PKG_NAME}/" {} \;;

I've updated the README to reflect that. Which files have -e appended?

[jaredLunde]

Ack, nevermind. Still the same issue. One sec.

[jaredLunde]

The whole script:

#!/bin/bash
if [ -z "$1" ]; then
  echo "No package name was provided."
  exit 1
fi

PKG_NAME=$1
mkdir $PKG_NAME
cd $PKG_NAME
npm install webpack2-react-sass-env-boilerplate
cp -r ./node_modules/webpack2-react-sass-env-boilerplate/. ./
mv package.json.tpl package.json
find . -type f \( -name "*.html" -o -name "*.js" -o -name "*.json" \) -and -not -path "*/node_modules/*" -exec sed -i -e "s/{{PKG_NAME}}/${PKG_NAME}/g" {} \;;
find . -type d -path "*{{PKG_NAME}}*" -and -not -path "*/node_modules/*" -exec rename "s/(.*)\{\{PKG_NAME\}\}/\$1${PKG_NAME}/" {} \;;
npm start

The changed portion:

find . -type d -path "*{{PKG_NAME}}*" -and -not -path "*/node_modules/*" -exec rename "s/(.*)\{\{PKG_NAME\}\}/\$1${PKG_NAME}/" {} \;;

[Anima-t3d]

Thanks for the quick reply. I still have the same issue with the css folder?

Files with -e: index.html, package.json, server.js, both webpack config files and all the files in src

[jaredLunde]

Mind telling me what operating system you're using? Could be a bash version issue. Can you echo $BASH_VERSION too? The update works for me and I get a working app on :3000. This is the directory output:

assets/
  css/
    your-pkg/
      core.scss
      _layout.scss
      _mixins.scss
      _placeholders.scss
      _variables.scss
  images/
    README
index.html
LICENSE
node_modules/
  ...
package.json
README.md
server.js
src/
  App.js
  index.hot.js
  index.js
webpack.config.dev.js
webpack.config.js

[Anima-t3d]

I'm using bash 3.2.57(1)-release on a macOS Sierra (10.12.4)

[jaredLunde]

The issues were:

• -e was a result of sed automatically creating a backup
• rename only works in bash >= 4

Instead of messing around with a find/replace command that works on multiple bash versions, I just changed it to a mv command, since it's just one folder right now anyway.

This worked for me on macOS Sierra (10.12.2) and bash 3.2.57(1)-release:

#!/bin/bash
if [ -z "$1" ]; then
  echo "No package name was provided."
  exit 1
fi

PKG_NAME=$1
mkdir $PKG_NAME
cd $PKG_NAME
npm init -y
npm install webpack2-react-sass-env-boilerplate
cp -r ./node_modules/webpack2-react-sass-env-boilerplate/. ./
mv package.json.tpl package.json
find . -type f \( -name "*.html" -o -name "*.js" -o -name "*.json" \) -and -not -path "*/node_modules/*" -exec sed -i.bak -e "s/{{PKG_NAME}}/${PKG_NAME}/g" {} \;;
find . -type f -name "*.bak" -and -not -path "*/node_modules/*" -exec rm {} \;;
mv "./assets/css/{{PKG_NAME}}" "./assets/css/${PKG_NAME}"
npm start