0

I setup truffle unbox react-auth and add few libraries as shown in my package.json below.

I have no problem running npm run start but failed to compile npm run build with the following error:

SyntaxError: Unexpected token: name (length) [./~/idna-uts46-hx/~/punycode/punycode.js:55,0]

 {
  "name": "react-auth-box",
  "version": "0.1.0",
  "private": true,
  "devDependencies": {
    "autoprefixer": "6.5.1",
    "babel-core": "6.17.0",
    "babel-eslint": "7.1.1",
    "babel-jest": "17.0.2",
    "babel-loader": "6.2.7",
    "babel-polyfill": "^6.26.0",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react-app": "^2.0.1",
    "babel-preset-stage-2": "^6.24.1",
    "babel-register": "^6.26.0",
    "case-sensitive-paths-webpack-plugin": "1.1.4",
    "chalk": "1.1.3",
    "connect-history-api-fallback": "1.3.0",
    "cross-spawn": "4.0.2",
    "css-loader": "0.26.0",
    "detect-port": "1.0.1",
    "dotenv": "2.0.0",
    "eslint": "3.8.1",
    "eslint-config-react-app": "^0.5.0",
    "eslint-loader": "1.6.0",
    "eslint-plugin-flowtype": "2.21.0",
    "eslint-plugin-import": "2.0.1",
    "eslint-plugin-jsx-a11y": "2.2.3",
    "eslint-plugin-react": "6.4.1",
    "extract-text-webpack-plugin": "1.0.1",
    "file-loader": "0.9.0",
    "filesize": "3.3.0",
    "fs-extra": "0.30.0",
    "gzip-size": "3.0.0",
    "html-webpack-plugin": "2.24.0",
    "http-proxy-middleware": "0.17.2",
    "jest": "18.1.0",
    "json-loader": "0.5.4",
    "object-assign": "4.1.0",
    "path-exists": "2.1.0",
    "postcss-loader": "1.0.0",
    "promise": "7.1.1",
    "react-dev-utils": "^0.4.2",
    "recursive-readdir": "2.1.0",
    "strip-ansi": "3.0.1",
    "style-loader": "0.13.1",
    "truffle-contract": "^1.1.8",
    "url-loader": "0.5.7",
    "webpack": "1.14.0",
    "webpack-dev-server": "1.16.2",
    "webpack-manifest-plugin": "1.1.0",
    "whatwg-fetch": "1.0.0"
  },
  "dependencies": {
    "@fortawesome/fontawesome-svg-core": "^1.2.6",
    "@fortawesome/free-solid-svg-icons": "^5.4.1",
    "@fortawesome/react-fontawesome": "^0.1.3",
    "babel-preset-env": "^1.7.0",
    "bootstrap": "^4.1.3",
    "history": "^4.7.2",
    "immutable": "^4.0.0-rc.12",
    "ipfs-mini": "^1.1.2",
    "moment": "^2.23.0",
    "openzeppelin-solidity": "2.1.1",
    "papaparse": "^4.6.1",
    "prop-types": "^15.6.2",
    "react": "^16.4.2",
    "react-dom": "^16.4.2",
    "react-redux": "^5.0.2",
    "react-router": "^4.3.1",
    "react-router-dom": "^4.3.1",
    "react-router-redux": "^4.0.7",
    "react-toasts": "^2.0.14",
    "reactstrap": "^6.5.0",
    "redux": "^3.6.0",
    "redux-auth-wrapper": "^1.0.0",
    "redux-logger": "^3.0.6",
    "redux-thunk": "^2.2.0",
    "web3": "^1.0.0-beta.37"
  },
  "scripts": {
    "start": "node scripts/start.js",
    "build": "node scripts/build.js",
    "test": "node scripts/test.js --env=jsdom"
  },
  "jest": {
    "collectCoverageFrom": [
      "src/**/*.{js,jsx}"
    ],
    "setupFiles": [
      "<rootDir>/config/polyfills.js"
    ],
    "testMatch": [
      "<rootDir>/src/**/__tests__/**/*.js?(x)",
      "<rootDir>/src/**/?(*.)(spec|test).js?(x)"
    ],
    "testEnvironment": "node",
    "testURL": "http://localhost",
    "transform": {
      "^.+\\.(js|jsx)$": "<rootDir>/node_modules/babel-jest",
      "^.+\\.css$": "<rootDir>/config/jest/cssTransform.js",
      "^(?!.*\\.(js|jsx|css|json)$)": "<rootDir>/config/jest/fileTransform.js"
    },
    "transformIgnorePatterns": [
      "[/\\\\]node_modules[/\\\\].+\\.(js|jsx)$"
    ],
    "moduleNameMapper": {
      "^react-native$": "react-native-web"
    },
    "moduleFileExtensions": [
      "web.js",
      "js",
      "json",
      "web.jsx",
      "jsx"
    ]
  },
  "babel": {
    "presets": [
      "react-app",
      "es2015",
      "stage-2",
      "stage-3"
    ]
  },
  "eslintConfig": {
    "extends": "react-app"
  }
}
0

In my case, i was using the vue truffle box and Uglify was the issue as it was the uglify that came with webpack by default that was being used when the project was being prepared for production.

So i installed uglifyjs-webpack-plugin as a separate module

Then in my webpack.config for production i replaced the

new webpack.optimize.UglifyJsPlugin({
      ...
    }),

to

new UglifyJsPlugin({
      test: /\.js($|\?)/i,
      sourceMap: true,
      uglifyOptions: {
        mangle: {
          keep_fnames: true,
        },
        compress: {
          warnings: false,
        },
        output: {
          beautify: false,
        },
      },
    })

Now i ran npm run build and my build ran completely

NB: I had to upgrade webpack to 3.1.0 Then i upgraded every other package to make sure they were all compatible with each other.

Here is my devDependencies:

"devDependencies": {
    "autoprefixer": "^7.2.6",
    "babel-core": "^6.26.3",
    "babel-eslint": "^7.1.1",
    "babel-loader": "^7.1.5",
    "babel-plugin-istanbul": "^4.1.6",
    "babel-plugin-transform-object-rest-spread": "^6.26.0",
    "babel-plugin-transform-runtime": "^6.23.0",
    "babel-preset-env": "^1.7.0",
    "babel-preset-stage-2": "^6.22.0",
    "babel-register": "^6.22.0",
    "chai": "^3.5.0",
    "chalk": "^2.4.2",
    "chromedriver": "^2.46.0",
    "connect-history-api-fallback": "^1.6.0",
    "copy-webpack-plugin": "^4.6.0",
    "cross-env": "^5.2.0",
    "cross-spawn": "^5.0.1",
    "css-loader": "^0.28.11",
    "cssnano": "^3.10.0",
    "eslint": "^3.19.0",
    "eslint-config-standard": "^6.2.1",
    "eslint-friendly-formatter": "^3.0.0",
    "eslint-loader": "^2.1.2",
    "eslint-plugin-html": "^3.0.0",
    "eslint-plugin-promise": "^3.8.0",
    "eslint-plugin-standard": "^2.0.1",
    "eventsource-polyfill": "^0.9.6",
    "express": "^4.16.4",
    "extract-text-webpack-plugin": "^3.0.0",
    "file-loader": "^0.11.1",
    "friendly-errors-webpack-plugin": "^1.7.0",
    "html-webpack-plugin": "^3.2.0",
    "http-proxy-middleware": "^0.17.3",
    "inject-loader": "^4.0.1",
    "karma": "^1.4.1",
    "karma-coverage": "^1.1.2",
    "karma-mocha": "^1.3.0",
    "karma-phantomjs-launcher": "^1.0.2",
    "karma-phantomjs-shim": "^1.4.0",
    "karma-sinon-chai": "^1.3.4",
    "karma-sourcemap-loader": "^0.3.7",
    "karma-spec-reporter": "0.0.31",
    "karma-webpack": "^2.0.13",
    "mocha": "^3.2.0",
    "nightwatch": "^0.9.21",
    "node-sass": "^4.11.0",
    "opn": "^5.4.0",
    "optimize-css-assets-webpack-plugin": "^2.0.0",
    "ora": "^1.4.0",
    "phantomjs-prebuilt": "^2.1.16",
    "rimraf": "^2.6.3",
    "sass-loader": "^6.0.7",
    "selenium-server": "^3.141.59",
    "semver": "^5.6.0",
    "shelljs": "^0.7.6",
    "sinon": "^2.1.0",
    "sinon-chai": "^2.8.0",
    "url-loader": "^0.5.8",
    "vue-loader": "^13.7.3",
    "vue-style-loader": "^3.1.2",
    "vue-template-compiler": "^2.6.7",
    "webpack": "^3.1.0",
    "webpack-bundle-analyzer": "^2.13.1",
    "webpack-dev-middleware": "^2.0.3",
    "webpack-hot-middleware": "^2.24.3",
    "webpack-merge": "^4.2.1"
  }

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.