Add webpack to your React Project
ERROR in ./src/index.tsx
Module build failed (from ./node_modules/babel-loader/lib/index.js):
Error: Plugin/Preset files are not allowed to export objects, only functions. In U:\Webpages\thecanadianhosting.co\react-app\node_modules\babel-preset-react\lib\index.js
at createDescriptor (U:\Webpages\thecanadianhosting.co\react-app\node_modules\@babel\core\lib\config\config-descriptors.js:178:11)
at items.map (U:\Webpages\thecanadianhosting.co\react-app\node_modules\@babel\core\lib\config\config-descriptors.js:109:50)
at Array.map (<anonymous>)
at createDescriptors (U:\Webpages\thecanadianhosting.co\react-app\node_modules\@babel\core\lib\config\config-descriptors.js:109:29)
at createPresetDescriptors (U:\Webpages\thecanadianhosting.co\react-app\node_modules\@babel\core\lib\config\config-descriptors.js:101:10)
at passPerPreset (U:\Webpages\thecanadianhosting.co\react-app\node_modules\@babel\core\lib\config\config-descriptors.js:58:104)
at cachedFunction (U:\Webpages\thecanadianhosting.co\react-app\node_modules\@babel\core\lib\config\caching.js:62:27)
at cachedFunction.next (<anonymous>)
at evaluateSync (U:\Webpages\thecanadianhosting.co\react-app\node_modules\gensync\index.js:244:28)
at sync (U:\Webpages\thecanadianhosting.co\react-app\node_modules\gensync\index.js:84:14)
i ｢wdm｣: Failed to compile.
Terminate batch job (Y/N)? y
Solution
If you have babel-core 6.X, you need babel-loader 7.X
If you have babel-core 7.X, you need babel-loader 8.X
For example if you want webpack 4.x | babel-loader 7.x | babel 6.x:
npm install -D babel-loader@7 babel-core babel-preset-env webpack
Error
Webpack shows a directory listing instead of your webpage
Solution
Error
ERROR in ./src/index.css 1:5
Module parse failed: Unexpected token (1:5)
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
> body {
| font: 14px "Century Gothic", Futura, sans-serif;
| margin: 20px;
@ ./src/index.tsx 13:0-22
i ｢wdm｣: Failed to compile.
Solution
i ?wdm?: Compiled successfully. URIError: Failed to decode param '/%PUBLIC_URL%/favicon.ico' at decodeURIComponent (<anonymous>) at decode_param (U:\Webpages\thecanadianhosting.co\react-app\node_modules\express\lib\router\layer.js:172:12) at Layer.match (U:\Webpages\thecanadianhosting.co\react-app\node_modules\express\lib\router\layer.js:123:27) at matchLayer (U:\Webpages\thecanadianhosting.co\react-app\node_modules\express\lib\router\index.js:574:18) at next (U:\Webpages\thecanadianhosting.co\react-app\node_modules\express\lib\router\index.js:220:15) at expressInit (U:\Webpages\thecanadianhosting.co\react-app\node_modules\express\lib\middleware\init.js:40:5) at Layer.handle [as handle_request] (U:\Webpages\thecanadianhosting.co\react-app\node_modules\express\lib\router\layer.js:95:5) at trim_prefix (U:\Webpages\thecanadianhosting.co\react-app\node_modules\express\lib\router\index.js:317:13) at U:\Webpages\thecanadianhosting.co\react-app\node_modules\express\lib\router\index.js:284:7 at Function.process_params (U:\Webpages\thecanadianhosting.co\react-app\node_modules\express\lib\router\index.js:335:12) URIError: Failed to decode param '/%PUBLIC_URL%/manifest.json' at decodeURIComponent (<anonymous>) at decode_param (U:\Webpages\thecanadianhosting.co\react-app\node_modules\express\lib\router\layer.js:172:12) at Layer.match (U:\Webpages\thecanadianhosting.co\react-app\node_modules\express\lib\router\layer.js:123:27) at matchLayer (U:\Webpages\thecanadianhosting.co\react-app\node_modules\express\lib\router\index.js:574:18) at next (U:\Webpages\thecanadianhosting.co\react-app\node_modules\express\lib\router\index.js:220:15) at expressInit (U:\Webpages\thecanadianhosting.co\react-app\node_modules\express\lib\middleware\init.js:40:5) at Layer.handle [as handle_request] (U:\Webpages\thecanadianhosting.co\react-app\node_modules\express\lib\router\layer.js:95:5) at trim_prefix (U:\Webpages\thecanadianhosting.co\react-app\node_modules\express\lib\router\index.js:317:13) at U:\Webpages\thecanadianhosting.co\react-app\node_modules\express\lib\router\index.js:284:7 at Function.process_params (U:\Webpages\thecanadianhosting.co\react-app\node_modules\express\lib\router\index.js:335:12)
Recent Comments