0

I am following this tutorial to create a react.js application in visual studio

I am at the step where it says to open the command prompt and run:

webpack app.tsx --config webpack-config.js

(I am already in the node_modules.bin\ directory)

I get the error:

C:\Users\user.user\Documents\Visual Studio 2019\Projects\WeatherApp\WeatherApp\node_modules\webpack\bin\webpack.js:11 const runCommand = (command, args) => { ^ module.js:434 var compiledWrapper = runInThisContext(wrapper, filename, true); ^ SyntaxError: Unexpected token > at Module._compile (module.js:434:25) at Object..js (module.js:464:10) at Module.load (module.js:353:31) at Function._load (module.js:311:12) at Array.0 (module.js:484:10) at EventEmitter._tickCallback (node.js:190:38)

This is my package.json file:

{
  "name": "weather-app",
  "version": "0.0.0",
  "description": "WeatherApp",
  "main": "server.js",
  "author": {
    "name": ""
  },
  "dependencies": {
    "eslint": "^5.16.0",
    "express": "^4.16.4",
    "path": "^0.12.7",
    "prettier": "^1.17.0",
    "react": "^16.8.6",
    "react-dom": "^16.8.6",
    "ts-loader": "^5.4.4",
    "typescript": "^3.3.4000",
    "webpack": "^4.30.0",
    "webpack-cli": "^3.3.0"
  }
}

The versions are more recent than what is indicated in the tutorial, otherwise I have done everything as indicated. I have node.js 10.15.3 installed on my machine.

The contents of the tsconfig.json file:

{
    "compilerOptions": {
        "noImplicitAny": false,
        "module": "commonjs",
        "noEmitOnError": true,
        "removeComments": false,
        "sourceMap": true,
        "pretty": true,
        "allowJs": true,
        "checkJs": true,
        "target": "es5",
        "jsx": "react"
    },
    "exclude": [
        "node_modules"
    ],
    "files": [
        "app.tsx"
    ]
}

webpack-config.js:

module.exports = {
    devtool: 'source-map',
    entry: "./app.tsx",
    mode: "development",
    output: {
        filename: "./app-bundle.js"
    },
    resolve: {
        extensions: ['.Webpack.js', '.web.js', '.ts', '.js', '.jsx', '.tsx']
    },
    module: {
        rules: [
            {
                test: /\.tsx$/,
                exclude: /(node_modules|bower_components)/,
                use: {
                    loader: 'ts-loader'
                }
            }
        ]
    }
}

I am trying to figure out how to resolve and or troubleshoot this. Any ideas?

2
  • Do you by chance have a legacy version of node.js installed rather than a modern one? Commented Apr 26, 2019 at 21:05
  • @WiktorZychla I have Latest LTS Version: 10.15.3 installed. Commented Apr 26, 2019 at 21:09

1 Answer 1

1

Okay, I finally figured this out and don't really particularly care for this solution, but it works for now. I suppose it has to do with which directory you are running the bundle script from. However, now if I get updates it will likely overwrite this. Also, I have to run the bundle command from the project directory, not the .bin.

In the .bin folder I altered the scripts for webpack-cli.cmd and webpack.cmd

Webpack.cmd from:

@IF EXIST "c:\program files\nodejs\node.exe" (      

"%~dp0\node.exe"

 "%~dp0\..\webpack\bin\webpack.js" %*    
    ) ELSE (
      @SETLOCAL
      @SET PATHEXT=%PATHEXT:;.JS;=;%
      node  "%~dp0\..\webpack\bin\webpack.js" %*

    )

to:

@IF EXIST "c:\program files\nodejs\node.exe" (      

"c:\program files\nodejs\node.exe"

 "%~dp0\..\webpack\bin\webpack.js" %*    
    ) ELSE (
      @SETLOCAL
      @SET PATHEXT=%PATHEXT:;.JS;=;%
      node  "%~dp0\..\webpack\bin\webpack.js" %*          
    )

webpack-cli.cmd from:

@IF EXIST "c:\program files\nodejs\node.exe" (      

"%~dp0\node.exe"

  "%~dp0\..\webpack-cli\bin\cli.js" %*
    ) ELSE (
      @SETLOCAL
      @SET PATHEXT=%PATHEXT:;.JS;=;%
      node  "%~dp0\..\webpack-cli\bin\cli.js" %*

to:

@IF EXIST "c:\program files\nodejs\node.exe" (      

"c:\program files\nodejs\node.exe"

  "%~dp0\..\webpack-cli\bin\cli.js" %*
    ) ELSE (
      @SETLOCAL
      @SET PATHEXT=%PATHEXT:;.JS;=;%
      node  "%~dp0\..\webpack-cli\bin\cli.js" %*
Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.