CODEWITHSUNDEEP
javascriptreactjs
Zoey
Zoey

Reputation: 516

Where's this syntax error on my React index?

I'm trying to build a simple tray timer app with Electron and React but when I start web-dev-server this error happens:

ERROR in ./src/index.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: D:\Documents\Electron\udemy\third_app\src\index.js: Unexpected token (8:2)

PrintScreen

GitHub Project

index.js:

1 import ReactDOM from "react-dom";
2 import { HashRouter as Router, Route } from "react-router-dom";
3
4 import App from "./components/App";
5
6 ReactDOM.render(
7 <Router>
8    <Route
9    component={() => (
10        <App />
11    )}
12    />
13 </Router>,
14 document.getElementById("root")
15 );

I don't think that there's a real syntax error.

I did one change on webpack.config.js and I don't if affect it (changed loaders to rules because webpack version and commented query that needs a loader):

module.exports = {
    externals: nodeModules,
    entry: [
    './src/index.js'
    ],
    target: 'node',
    output: {
    path: __dirname,
    publicPath: '/',
    filename: 'bundle.js'
    },
    module: {
    rules: [
        {
        exclude: /node_modules/,
        use: 'babel-loader',
        /*query: {
            presets: ['react', 'es2015', 'stage-1']
        }*/
        },
    ]
    },
    resolve: {
    extensions: ['.js', '.jsx']
    },
    devServer: {
    historyApiFallback: true,
    contentBase: './',
    port: 4172
    }
};

EDIT

I've uninstalled @'s babel packages, but how can I solve query problem on webpack.config.js?

Error: options/query provided without loader (use loader + options)

EDIT 2

I've upgraded all babel- packages to new ^7.+ versions but babel turned "presets" to "plugins"

Upvotes: 0

Views: 1199

Answers (2)

Zoey
Zoey

Reputation: 516

Solved! Those were errors:

1 - babel packages were deprecated so I'd upgraded

2 - babel's output gave me a solution to my .babelrc file, here:

{
    "presets": [
    "@babel/preset-env",
    "@babel/preset-reacty"
    ],
    "plugins": [
    // Stage 1
    "@babel/plugin-proposal-export-default-from",
    "@babel/plugin-proposal-logical-assignment-operators",
    ["@babel/plugin-proposal-optional-chaining", { "loose": false }],
    ["@babel/plugin-proposal-pipeline-operator", { "proposal": "minimal" }],
    ["@babel/plugin-proposal-nullish-coalescing-operator", { "loose": false }],
    "@babel/plugin-proposal-do-expressions",

    // Stage 2
    ["@babel/plugin-proposal-decorators", { "legacy": true }],
    "@babel/plugin-proposal-function-sent",
    "@babel/plugin-proposal-export-namespace-from",
    "@babel/plugin-proposal-numeric-separator",
    "@babel/plugin-proposal-throw-expressions",

    // Stage 3
    "@babel/plugin-syntax-dynamic-import",
    "@babel/plugin-syntax-import-meta",
    ["@babel/plugin-proposal-class-properties", { "loose": false }],
    "@babel/plugin-proposal-json-strings"
    ]
}

Upvotes: 0

Ali Torki
Ali Torki

Reputation: 2038

Provide the babel-preset-react-app to your babelrc file in order to transform jsx(HTML like) codes to the javascript.

Upvotes: 0

Related Questions