New react project: 'import' and 'export' may only appear at the top level

Question

I'm new to react, and I just started a project with the npx create-react-app command Also I'm using Docker to run the project I have only modified the App.js file in src folder:

   import './App.css';
    
    const  App = () => {
      return (
        <div className="App">
          <h1>Hello, R ! </h1>
        </div>
      );
    }
    
    export default App;

I have the error:

Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: /app/src/App.js: 'import' and 'export' may only appear at the top level. (25:0)

  23 | }
  24 |
> 25 | export default App;
     | ^
  26 |
    at instantiate (/app/node_modules/@babel/parser/lib/index.js:72:32)
    at constructor (/app/node_modules/@babel/parser/lib/index.js:367:12)
    at FlowParserMixin.raise (/app/node_modules/@babel/parser/lib/index.js:3678:19)
    at FlowParserMixin.parseStatementContent (/app/node_modules/@babel/parser/lib/index.js:14883:18)
    at FlowParserMixin.parseStatement (/app/node_modules/@babel/parser/lib/index.js:14782:17)
    at FlowParserMixin.parseStatement (/app/node_modules/@babel/parser/lib/index.js:5952:24)
    at FlowParserMixin.parseBlockOrModuleBlockBody (/app/node_modules/@babel/parser/lib/index.js:15441:25)
    at FlowParserMixin.parseBlockBody (/app/node_modules/@babel/parser/lib/index.js:15432:10)
    at FlowParserMixin.parseBlock (/app/node_modules/@babel/parser/lib/index.js:15416:10)
    at FlowParserMixin.parseFunctionBody (/app/node_modules/@babel/parser/lib/index.js:14090:24)

Maybe it's an indentation or missing braquet problem, but I can't find it

Answer 1

My bad, I was looking at the wrong place. I used the command docker-compose up insteed of docker-compose up --build -d :')

Apparently I need to recreate an image at every modification, I thought it was only needed when you modifying your Docker's files, i guess I still don't have completely understand Docker