React Typescript ERROR when running npm run build with webpack

Question

I'm using typescript with react. And I want to run npm run build. a dist folder with a bundle.js file should be created (I will share my webpack configurations below). Instead i'm getting this error even though I've done some research to try to solve it. Here's the error:

npm run build

> [email protected] build C:\Users\21650\-----------------------
> webpack
Hash: ------------
Version: webpack 4.41.2
Time: 2954ms
Built at: 2019-11-25 22:18:06
1 asset
Entrypoint main = bundle.js
[1] ./src/index.tsx 253 bytes {0} [built]
    + 6 hidden modules

ERROR in ./node_modules/react-dom/cjs/react-dom.production.min.js
Module not found: Error: Can't resolve 'object-assign' in 'C:\Users\21650\Desktop\-------------\node_modules\react-dom\cjs'      
  @ ./node_modules/react-dom/cjs/react-dom.production.min.js 13:39-63
  @ ./node_modules/react-dom/index.js
  @ ./src/index.tsx

ERROR in ./node_modules/react/cjs/react.production.min.js
Module not found: Error: Can't resolve 'object-assign' in 'C:\Users\21650\-----------\node_modules\react\cjs'
  @ ./node_modules/react/cjs/react.production.min.js 10:19-43
  @ ./node_modules/react/index.js
  @ ./src/index.tsx

npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! [email protected] build: `webpack`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the [email protected] build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\21650\AppData\Roaming\npm-cache\_logs\2019-11-25T21_18_06_349Z-debug.log

Here's my webpack configuration file:

const path = require('path');

module.exports = {
 entry: './src/index.tsx',
 output: {
   filename: 'bundle.js',
   path: path.resolve(__dirname, 'dist')
 },
 module: {
   rules: [
     {
       test: /\.tsx?$/, 
       use: 'ts-loader',
       exclude: /node_modules/
     }
   ]
 },
 resolve: {
   extensions: ['.ts', '.tsx']
 }
};

I'm sorry if I made the description too long, but it really frustrates me. For this code I tried to follow Chris Hawkes's Tutorial on Youtube : Total React Tutorial - For Beginners - Using TypeScript.

Update : Issue resolved Thanks to @Brian Thompson comment, the problem no longer exists. Here's the update on my webpack.config.js file:

resolve: {
    extensions: ['.ts', '.tsx', '.js', '.jsx']
  }

I would also try deleting the node_modules folder completely and doing an npm install. Its been a long time, but I've seen this exact error before and think it might have to do with a package version mismatch. — Brian Thompson
– Brian Thompson, Commented Nov 25, 2019 at 21:59
Thank you so much for the useful link, the problem was with my webpack configuration file — Karim Hamdi
– Karim Hamdi, Commented Nov 26, 2019 at 13:46

Karim Hamdi · Accepted Answer · 2019-11-26 16:19:26Z

0

Update : Issue resolved Thanks to @Brian Thompson comment, the problem no longer exists. Here's the update on my webpack.config.js file:

resolve: {
    extensions: ['.ts', '.tsx', '.js', '.jsx']
  }

answered Nov 26, 2019 at 16:19

Karim Hamdi

1802 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

React Typescript ERROR when running npm run build with webpack

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related