DEV Community

Discussion on: Elixir Phoenix with Typescript and React – December 2019 Edition

View post
Collapse
 
lucasprag profile image
lucasprag •

That's a great blog post, great job! However, It didn't work for me at the very end =/

I got this error:

Hash: 421850953aa4087426ac
Version: webpack 4.41.5
Time: 115ms
Built at: 04/02/2021 7:24:23 PM
                Asset       Size  Chunks             Chunk Names
       ../favicon.ico   1.23 KiB          [emitted]  
../images/phoenix.png   13.6 KiB          [emitted]  
        ../robots.txt  202 bytes          [emitted]  
               app.js   4.57 KiB     app  [emitted]  app
Entrypoint app = app.js
[0] multi ./js/app.js 28 bytes {app} [built]
[./js/app.js] 356 bytes {app} [built] [failed] [1 error]

ERROR in ./js/app.js 25:16
Module parse failed: Unexpected token (25:16)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| const greeting = document.getElementById("root");
| 
> ReactDOM.render(<Greeter name="Phoenix" />, greeting);
| 
| 
 @ multi ./js/app.js app[0]
Enter fullscreen mode Exit fullscreen mode

I believe it's because of the <Greeter which is React code in the app.js file.

I fixed it by moving the typescript/react code to a index.tsx file and then importing it inside the app.js file.

assets/js/index.tsx 

import React from "react";
import ReactDOM from "react-dom";
import Greeter from "./hello";

const greeting = document.getElementById("root");
ReactDOM.render(<Greeter name="Phoenix" />, greeting);
Enter fullscreen mode Exit fullscreen mode

assets/js/app.js 

const _css = require("../css/app.scss");
import "./index";
Enter fullscreen mode Exit fullscreen mode

This is how I fixed in case other people also face this error.

Collapse
 
lucasprag profile image
lucasprag •

I also got another error, but I fixed by commenting out the "module": "ESNext" line of my tsconfig.json 👍