Posts

Showing posts with the label Webpack

Can I Run Two Ongoing Npm Commands In 1 Terminal

Answer : You could run one process in the background with & (one ampersand, not two) but that would require you to manage it manually, which would be rather tedious. For details see What does ampersand mean at the end of a shell script line?. For that use-case someone built concurrently , which makes it simple to run processes in parallel and keep track of their output. npm install --save-dev concurrently And your start script becomes: "start": "concurrently 'npm run webpack' 'npm run server'" If you want to make the output a little prettier you can give the processes names with -n and colours with -c , for example: "start": "concurrently -n 'webpack,server' -c 'bgBlue.bold,bgGreen.bold' 'npm run webpack' 'npm run server'"

Cannot Resolve Module 'react-dom'

Answer : Issue is react-dom is not installed, when you hit npm -v react-dom , it gives you the version of npm not react-dom version, you can check that by using npm -v or npm -v react-dom both will give you the same result. You are checking the package version incorrectly. How to install react and react-dom properly? Use this to install react and react-dom: npm install react react-dom --save After that, you can check your package.json file, if react and react-dom has been installed correctly, you will find an entry for that. How to check install package version? To check all the locally installed packages version: npm list For globally installed packages, use -g also: npm list -g To check the version of any specific package, specify the package name also: npm list PackageName For Example => npm list react npm list react-router After installation your package.json will look like this: { "name": "***", ...

Cannot Import .tsx File From .ts File (and Vice Versa)

Answer : When you write import WriteEditor from './write_editor'; Webpack will automatically look for ./write_editor ./write_editor.js ./write_editor.json (And a few others) Since you're using .ts and .tsx , you need to tell it to look for those too in your Webpack config using resolve.extensions : { resolve: { extensions: [".js", ".json", ".ts", ".tsx"], }, } In my case, I got same error when using typescript-eslint . It is an app created by create-react-app . The way is by adding this code in .eslintrc.js . module.exports = { // ... settings: { 'import/resolver': { 'node': { 'extensions': ['.js','.jsx','.ts','.tsx'] } } } };

Babel 7 - ReferenceError: RegeneratorRuntime Is Not Defined

Answer : Updated Answer: If you are using Babel 7.4.0 or newer, then @babel/polyfill has been deprecated. Instead, you will want to use the following at the top of your main js file (likely index.js or similar): import "core-js/stable"; import "regenerator-runtime/runtime"; Install these packages either with npm: npm install --save core-js npm install --save regenerator-runtime or with yarn: yarn add core-js yarn add regenerator-runtime Original Answer: I just encountered this problem and came across the following solution: In package.json I had @babel/polyfill as a dependency. However, in my index.js (My main js file) I had neglected to place the following line at the the top: import '@babel/polyfill' Once I imported it, everything worked fine. I did not need to install babel-runtime as other answers are suggesting. There is already a very good answer here (originally posted on the Babel6 question) which I will just translate to Yarn. ...