CODEWITHSUNDEEP
webpack
Hy K
Hy K

Reputation: 177

webpack syntax error is occuered in ReactDom.render()

error message is this

ERROR in ./client.jsx
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: C:\react_game_prac2\client.jsx: Unexpected token, expected "," (5:64)

  3 |
  4 | const WordRelay = require('./WordRelay');
> 5 | ReactDom.render(<WordRelay /> , document.querySelector(selectors:'#root'));

code is this

const React = require('react');
const ReactDom = require('react-dom');

const WordRelay = require('./WordRelay');
ReactDom.render(<WordRelay /> , document.querySelector(selectors:'#root'));

webpackcongig.js

const path = require('path');

module.exports = {
    name:'wordrelay-setting',
    mode:'development',
    devtool:'eval',
    resolve:{
        extensions:['.js','.jsx']
    },
    entry:{
        app:['./client']
    }, // 입력
    module: {
        rules: [
            {
                test: /\.jsx?/,
                loader: 'babel-loader',
                options: {
                    presets:['@babel/preset-env','@babel/preset-react'],
                    plugins:['@babel/plugin-proposal-class-properties'],
                },
            }
        ],
    },
    output: {
        path:path.join(__dirname,'dist'),
        filename:'app.js'
    },  // 출력
};

after npm run dev error is occuered But I can not find the cause of the error.

I tried to find it hard, but it is difficult to find it with my skills. Excuse me, but thank you if you take a look.

git hub url : https://github.com/hyunsokstar/react_game_prac2

and

I get an error if I change it like this

ReactDom.render(<WordRelay /> , document.querySelector({ selectors: '#root' });

ERROR in ./client.jsx
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: C:\react_game_prac2\client.jsx: Unexpected token, expected "," (5:78)

  3 |
  4 | const WordRelay = require('./WordRelay');
> 5 | ReactDom.render(<WordRelay /> , document.querySelector({ selectors: '#root' });

Upvotes: 0

Views: 107

Answers (1)

backtick
backtick

Reputation: 2775

This is not valid JavaScript: document.querySelector(selectors:'#root')

Functions can accept plain objects, which may be what you were going for here, e.g.

document.querySelector({ selectors: '#root' })

But in this case, querySelector accepts a single string ('#root' in your case).

Upvotes: 1

Related Questions