First Ionic installation - reactjs

./src/index.tsx 1:44
Module parse failed: Unexpected token (1:44)
File was processed with these loaders:
./node_modules/#pmmmwh/react-refresh-webpack-plugin/loader/index.js
./node_modules/babel-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
$RefreshRuntime$ = require('C:/Users/My PC/Ionic_Project/node_modules/react-refresh/runtime.js');
| $RefreshSetup$(module.id);
|

try this command
npm cache clean -f

Related

Error on starting react app bootstrapped with create-react-app

I got this weird error on creating react app using create-react-app command
as stated in documentation I uninstalled globally uninstalled create-react-app as well but nothing seem to be working. There is work around by reducing the react-script version to 4.0.1 or older but I don't want this. Aren't there legit method to solve this problem. The error is:
./src/index.js 1:123
Module parse failed: Unterminated string constant (1:123)
File was processed with these loaders:
* ./node_modules/#pmmmwh/react-refresh-webpack-plugin/loader/index.js
* ./node_modules/babel-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
> $RefreshRuntime$ = require('E:/Study Material/myProjects'/Fullstack/e-commerce/client/node_modules/react-refresh/runtime.js');
| $RefreshSetup$(module.id);
|
It looks like there is an unfinished string in your command in the Line:
$RefreshRuntime$ = require('E:/Study Material/myProjects'/Fullstack/e-commerce/client/node_modules/react-refresh/runtime.js');
It should probably be:
$RefreshRuntime$ = require('E:/Study Material/myProjects/Fullstack/e-commerce/client/node_modules/react-refresh/runtime.js');
Remove the 'after the /myProjects
Let me know if it worked! :)

how to dynamically render images in nextjs/react

i am trying to map through an array of images and render in a nextjs app.
const style = {
backgroundImage: `url("${require(`/${post.images}`)}")`,
};
I get this error message:
./public/tech1.jpg 1:0
Module parse failed: Unexpected character '�' (1:0)
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
(Source code omitted for this binary file)
./public/tech2.jpg 1:0
Module parse failed: Unexpected character '�' (1:0)
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
(Source code omitted for this binary file)
./public/tech3.jpg 1:0
Module parse failed: Unexpected character '�' (1:0)
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
(Source code omitted for this binary file)
next.config.js
const withImages = require("next-images");
module.exports = withImages();
I can render an image but not dynamically, like this:
backgroundImage: `url("${require(`/tech2.jpg`)}")`,
Please how can I resolve this?

socket.io shows dependency warnings when installing using npm

I am trying to install socket.io using npm, however whenever I run
npm run build:dll
I get the warnings/errors:
Building the Webpack DLL...
Hash: e4aec7398e03ac59c7bf
Version: webpack 3.5.5
Time: 3456ms
Asset Size Chunks Chunk Names
reactBoilerplateDeps.dll.js 4.55 MB 0 [emitted] [big] reactBoilerplateDeps
chunk {0} reactBoilerplateDeps.dll.js (reactBoilerplateDeps) 3.84 MB [entry] [rendered]
WARNING in ./node_modules/socket.io/lib/index.js
108:11-32 Critical dependency: the request of a dependency is an expression
WARNING in ./node_modules/ws/lib/BufferUtil.js
Module not found: Error: Can't resolve 'bufferutil' in '/Users/***/node_modules/ws/lib'
# ./node_modules/ws/lib/BufferUtil.js 35:21-42
# ./node_modules/ws/lib/Sender.js
# ./node_modules/ws/index.js
# ./node_modules/engine.io/lib/server.js
# ./node_modules/engine.io/lib/engine.io.js
# ./node_modules/socket.io/lib/index.js
# dll reactBoilerplateDeps
WARNING in ./node_modules/ws/lib/Validation.js
Module not found: Error: Can't resolve 'utf-8-validate' in '/Users/***/node_modules/ws/lib'
# ./node_modules/ws/lib/Validation.js 10:22-47
# ./node_modules/ws/lib/Receiver.js
# ./node_modules/ws/index.js
# ./node_modules/engine.io/lib/server.js
# ./node_modules/engine.io/lib/engine.io.js
# ./node_modules/socket.io/lib/index.js
# dll reactBoilerplateDeps
WARNING in ./node_modules/uws/uws_darwin_46.node
Module parse failed: /Users/***/node_modules/uws/uws_darwin_46.node Unexpected character '�' (1:0)
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)
# ./node_modules/uws ^\.\/uws_.*$
# ./node_modules/uws/uws.js
# ./node_modules/engine.io/lib/server.js
# ./node_modules/engine.io/lib/engine.io.js
# ./node_modules/socket.io/lib/index.js
# dll reactBoilerplateDeps
WARNING in ./node_modules/uws/uws_darwin_47.node
Module parse failed: /Users/***/node_modules/uws/uws_darwin_47.node Unexpected character '�' (1:0)
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)
# ./node_modules/uws ^\.\/uws_.*$
# ./node_modules/uws/uws.js
# ./node_modules/engine.io/lib/server.js
# ./node_modules/engine.io/lib/engine.io.js
# ./node_modules/socket.io/lib/index.js
# dll reactBoilerplateDeps
WARNING in ./node_modules/uws/uws_darwin_48.node
Module parse failed: /Users/***/node_modules/uws/uws_darwin_48.node Unexpected character '�' (1:0)
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)
# ./node_modules/uws ^\.\/uws_.*$
# ./node_modules/uws/uws.js
# ./node_modules/engine.io/lib/server.js
# ./node_modules/engine.io/lib/engine.io.js
# ./node_modules/socket.io/lib/index.js
# dll reactBoilerplateDeps
WARNING in ./node_modules/uws/uws_darwin_51.node
Module parse failed: /Users/***/node_modules/uws/uws_darwin_51.node Unexpected character '�' (1:0)
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)
# ./node_modules/uws ^\.\/uws_.*$
# ./node_modules/uws/uws.js
# ./node_modules/engine.io/lib/server.js
# ./node_modules/engine.io/lib/engine.io.js
# ./node_modules/socket.io/lib/index.js
# dll reactBoilerplateDeps
WARNING in ./node_modules/uws/uws_darwin_57.node
Module parse failed: /Users/***/node_modules/uws/uws_darwin_57.node Unexpected character '�' (1:0)
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)
# ./node_modules/uws ^\.\/uws_.*$
# ./node_modules/uws/uws.js
# ./node_modules/engine.io/lib/server.js
# ./node_modules/engine.io/lib/engine.io.js
# ./node_modules/socket.io/lib/index.js
# dll reactBoilerplateDeps
WARNING in ./node_modules/uws/uws_linux_46.node
Module parse failed: /Users/***/node_modules/uws/uws_linux_46.node Unexpected character '' (1:0)
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)
# ./node_modules/uws ^\.\/uws_.*$
# ./node_modules/uws/uws.js
# ./node_modules/engine.io/lib/server.js
# ./node_modules/engine.io/lib/engine.io.js
# ./node_modules/socket.io/lib/index.js
# dll reactBoilerplateDeps
WARNING in ./node_modules/uws/uws_linux_47.node
Module parse failed: /Users/***/node_modules/uws/uws_linux_47.node Unexpected character '' (1:0)
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)
# ./node_modules/uws ^\.\/uws_.*$
# ./node_modules/uws/uws.js
# ./node_modules/engine.io/lib/server.js
# ./node_modules/engine.io/lib/engine.io.js
# ./node_modules/socket.io/lib/index.js
# dll reactBoilerplateDeps
WARNING in ./node_modules/uws/uws_linux_48.node
Module parse failed: /Users/***/node_modules/uws/uws_linux_48.node Unexpected character '' (1:0)
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)
# ./node_modules/uws ^\.\/uws_.*$
# ./node_modules/uws/uws.js
# ./node_modules/engine.io/lib/server.js
# ./node_modules/engine.io/lib/engine.io.js
# ./node_modules/socket.io/lib/index.js
# dll reactBoilerplateDeps
WARNING in ./node_modules/uws/uws_linux_51.node
Module parse failed: /Users/***/node_modules/uws/uws_linux_51.node Unexpected character '' (1:0)
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)
# ./node_modules/uws ^\.\/uws_.*$
# ./node_modules/uws/uws.js
# ./node_modules/engine.io/lib/server.js
# ./node_modules/engine.io/lib/engine.io.js
# ./node_modules/socket.io/lib/index.js
# dll reactBoilerplateDeps
WARNING in ./node_modules/uws/uws_win32_48.node
Module parse failed: /Users/***/node_modules/uws/uws_win32_48.node Unexpected character '�' (1:2)
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)
# ./node_modules/uws ^\.\/uws_.*$
# ./node_modules/uws/uws.js
# ./node_modules/engine.io/lib/server.js
# ./node_modules/engine.io/lib/engine.io.js
# ./node_modules/socket.io/lib/index.js
# dll reactBoilerplateDeps
WARNING in ./node_modules/uws/uws_win32_51.node
Module parse failed: /Users/***/node_modules/uws/uws_win32_51.node Unexpected character '�' (1:2)
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)
# ./node_modules/uws ^\.\/uws_.*$
# ./node_modules/uws/uws.js
# ./node_modules/engine.io/lib/server.js
# ./node_modules/engine.io/lib/engine.io.js
# ./node_modules/socket.io/lib/index.js
# dll reactBoilerplateDeps
ERROR in ./node_modules/socket.io/lib/index.js
Module not found: Error: Can't resolve 'fs' in '/Users/***/node_modules/socket.io/lib'
# ./node_modules/socket.io/lib/index.js 7:11-24 9:13-26
# dll reactBoilerplateDeps
I have tired adding node: { fs: 'empty' } to my webpack conf, and deleting and node_modules folder, however it doesnt fix it. This issue has now also appeared on one of my old projects which I have updated.
I have found people with similar issues, however none of the fixes have worked.
"socket.io": "^2.0.4",
"webpack": "3.5.5",
I tired installing socket.io-client and I get even more errors (edit: I seem to need both for a react app).
My webpack config is the same as the react boilerplates. Using a Mac and Webstorm if this helps.
I found that I had used:
node: {
fs: 'empty',
}
In the wrong place and needed to add:
noParse: /ws/,
externals: ['ws'],
to webpack.base.babel
This cleared up all of the errors
use Webpack node modules externals to ignore all modules from node_module dir and built-in modules
var nodeExternals = require('webpack-node-externals');
...
module.exports = {
...
target: 'node', // in order to ignore built-in modules like path, fs, etc.
externals: [nodeExternals()], // in order to ignore all modules in node_modules folder
...
};

How to Configure webpack in existed react project?

I created a react project using create-react-app command line.there is 3 container screens in the app.I rendered all and noticed that some css are overriding and got conflicts. I realized that i need to configure webpack and loader in my app. I tried for that,but got a lot of error when i run my app with webpack.
here is my webpack.conf.js
var path = require('path');
var webpack = require('webpack');
module.exports = {
devServer: {
inline: true,
contentBase: './public',
port: 3000
},
devtool: 'cheap-module-eval-source-map',
entry: './src/index.js',
module: {
loaders: [
{
test: /\.js$/,
loaders: ['babel-loader'],
exclude: /node_modules/
},
{
test: /\.scss/,
loader: 'style-loader!css-loader!sass-loader'
}
]
},
output: {
path: 'src',
filename: 'js/bundle.min.js'
},
plugins: [
new webpack.optimize.OccurrenceOrderPlugin()
]
};
and here my package.json
{
"name": "lp",
"version": "0.1.0",
"private": true,
"dependencies": {
"flux": "^3.1.2",
"react": "^15.6.1",
"react-dom": "^15.6.1",
"history": "^4.6.3",
"jquery": "^3.2.1",
"react-bootstrap": "^0.31.0",
"react-fb-like": "^0.4.5",
"react-router": "^3.0.5",
"react-toasts": "^1.0.6",
"react-scripts": "1.0.10",
"redux": "^3.7.2"
},
"scripts": {
"start": "webpack-dev-server --hot --inline",
"react-start": "set PORT=3005 && react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
},
"devDependencies": {
"babel-core": "^6.17.0",
"babel-loader": "^6.4.1",
"babel-plugin-add-module-exports": "^0.1.2",
"babel-plugin-react-html-attrs": "^2.0.0",
"babel-plugin-transform-class-properties": "^6.3.13",
"babel-plugin-transform-decorators-legacy": "^1.3.4",
"babel-preset-es2015": "^6.3.13",
"babel-preset-react": "^6.3.13",
"babel-preset-stage-0": "^6.3.13",
"file-loader": "^0.11.2",
"image-webpack-loader": "^3.3.1",
"react": "^0.14.6",
"react-dom": "^0.14.6",
"react-hot-loader": "^1.3.1",
"webpack": "^3.3.0",
"webpack-dev-server": "^1.16.5"
},
"description": "This project was bootstrapped with [Create React App](https://github.com/facebookincubator/create-react-app).",
"main": "index.js",
"author": "",
"license": "ISC"
}
this is the error i got
ERROR in ./src/components/landing_page/assets/img/logo.png
Module parse failed: D:\jasmel\react\lp\src\components\landing_page\assets\img\logo.png Unexpected character '�' (1:0)
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)
# ./src/containers/LandingPage.js 39:12-69
# ./src/index.js
# multi (webpack)-dev-server/client?http://localhost:3000 webpack/hot/dev-server ./src/index.js
ERROR in ./src/components/landing_page/assets/css/landing_style.css
Module parse failed: D:\jasmel\react\lp\src\components\landing_page\assets\css\landing_style.css Unexpected character '#' (12:0)
You may need an appropriate loader to handle this file type.
| Owl Carousel v2.2.1
| ********************/
| #import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500,700');
| .owl-carousel,
| .owl-carousel .owl-item {
# ./src/containers/LandingPage.js 43:21-87
# ./src/index.js
# multi (webpack)-dev-server/client?http://localhost:3000 webpack/hot/dev-server ./src/index.js
ERROR in ./src/components/landing_page/assets/css/style.css
Module parse failed: D:\jasmel\react\lp\src\components\landing_page\assets\css\style.css Unexpected character '#' (12:0)
You may need an appropriate loader to handle this file type.
| Owl Carousel v2.2.1
| ********************/
| #import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500,700');
| .owl-carousel,
| .owl-carousel .owl-item {
# ./src/containers/LandingPage.js 47:13-71
# ./src/index.js
# multi (webpack)-dev-server/client?http://localhost:3000 webpack/hot/dev-server ./src/index.js
ERROR in ./src/components/landing_page/assets/css/custom.css
Module parse failed: D:\jasmel\react\lp\src\components\landing_page\assets\css\custom.css Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
| .mainBody {
| font-family: 'sf_ui_displaylight';
| padding: 0px 0px;
# ./src/containers/LandingPage.js 51:14-73
# ./src/index.js
# multi (webpack)-dev-server/client?http://localhost:3000 webpack/hot/dev-server ./src/index.js
ERROR in ./src/common_assets/css/style.css
Module parse failed: D:\jasmel\react\lp\src\common_assets\css\style.css Unexpected token (39:0)
You may need an appropriate loader to handle this file type.
| sup,
| tt,
| var,
| b,
| u,
# ./src/containers/HomePage.js 23:13-54
# ./src/index.js
# multi (webpack)-dev-server/client?http://localhost:3000 webpack/hot/dev-server ./src/index.js
ERROR in ./src/common_assets/css/header.css
Module parse failed: D:\jasmel\react\lp\src\common_assets\css\header.css Unexpected token (1:20)
You may need an appropriate loader to handle this file type.
| header .header-main {
| display: block;
| width: 100%;
# ./src/containers/HomePage.js 27:14-56
# ./src/index.js
# multi (webpack)-dev-server/client?http://localhost:3000 webpack/hot/dev-server ./src/index.js
ERROR in ./src/common_assets/css/status.css
Module parse failed: D:\jasmel\react\lp\src\common_assets\css\status.css Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
| .status-main {
| margin-top: 38px;
| }
# ./src/containers/HomePage.js 31:14-56
# ./src/index.js
# multi (webpack)-dev-server/client?http://localhost:3000 webpack/hot/dev-server ./src/index.js
ERROR in ./src/common_assets/css/post.css
Module parse failed: D:\jasmel\react\lp\src\common_assets\css\post.css Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
| .post-main .post-list .col-md-6 {
| width: calc(50% - 10px);
| padding: 0;
# ./src/containers/HomePage.js 35:12-52
# ./src/index.js
# multi (webpack)-dev-server/client?http://localhost:3000 webpack/hot/dev-server ./src/index.js
ERROR in ./src/common_assets/css/comment.css
Module parse failed: D:\jasmel\react\lp\src\common_assets\css\comment.css Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
| .comment-box {
| padding: 20px;
| background-color: #f6f7f9;
# ./src/containers/HomePage.js 39:15-58
# ./src/index.js
# multi (webpack)-dev-server/client?http://localhost:3000 webpack/hot/dev-server ./src/index.js
ERROR in ./src/common_assets/css/error-pop.css
Module parse failed: D:\jasmel\react\lp\src\common_assets\css\error-pop.css Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
| .error-msg-container {
| position: relative;
| background-color: #ffffff;
# ./src/containers/HomePage.js 43:16-61
# ./src/index.js
# multi (webpack)-dev-server/client?http://localhost:3000 webpack/hot/dev-server ./src/index.js
ERROR in ./src/common_assets/css/share-post.css
Module parse failed: D:\jasmel\react\lp\src\common_assets\css\share-post.css Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
| .share-post-container {
| width: 800px;
| margin: 30px auto;
# ./src/containers/HomePage.js 47:17-63
# ./src/index.js
# multi (webpack)-dev-server/client?http://localhost:3000 webpack/hot/dev-server ./src/index.js
ERROR in ./src/common_assets/css/recomendation-pop.css
Module parse failed: D:\jasmel\react\lp\src\common_assets\css\recomendation-pop.css Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
| .recomendation-pop-main {
| width: 765px;
| margin: 30px auto;
# ./src/containers/HomePage.js 51:24-77
# ./src/index.js
# multi (webpack)-dev-server/client?http://localhost:3000 webpack/hot/dev-server ./src/index.js
ERROR in ./src/common_assets/css/owl.carousel.min.css
Module parse failed: D:\jasmel\react\lp\src\common_assets\css\owl.carousel.min.css Unexpected token (6:0)
You may need an appropriate loader to handle this file type.
| * Licensed under ()
| */
| .owl-carousel, .owl-carousel .owl-item {
| -webkit-tap-highlight-color: transparent;
| position: relative
# ./src/containers/HomePage.js 55:22-74
# ./src/index.js
# multi (webpack)-dev-server/client?http://localhost:3000 webpack/hot/dev-server ./src/index.js
ERROR in ./src/components/home_page/assets/css/custom.css
Module parse failed: D:\jasmel\react\lp\src\components\home_page\assets\css\custom.css Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
| .main_body {
| position: relative;
| background-color: #f2f4f8;
# ./src/containers/HomePage.js 59:14-70
# ./src/index.js
# multi (webpack)-dev-server/client?http://localhost:3000 webpack/hot/dev-server ./src/index.js
ERROR in ./src/components/signup_page/assets/img/logo.png
Module parse failed: D:\jasmel\react\lp\src\components\signup_page\assets\img\logo.png Unexpected character '�' (1:0)
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)
# ./src/containers/Signup.js 11:12-68
# ./src/index.js
# multi (webpack)-dev-server/client?http://localhost:3000 webpack/hot/dev-server ./src/index.js
ERROR in ./src/components/signup_page/assets/img/icons/signup-left-icon.png
Module parse failed: D:\jasmel\react\lp\src\components\signup_page\assets\img\icons\signup-left-icon.png Unexpected character '�' (1:0)
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)
# ./src/containers/Signup.js 15:22-96
# ./src/index.js
# multi (webpack)-dev-server/client?http://localhost:3000 webpack/hot/dev-server ./src/index.js
ERROR in ./src/components/signup_page/assets/css/signup.css
Module parse failed: D:\jasmel\react\lp\src\components\signup_page\assets\css\signup.css Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
| .signup-main .signup-left {
| height: 100vh;
| min-height: 650px;
# ./src/containers/Signup.js 21:0-58
# ./src/index.js
# multi (webpack)-dev-server/client?http://localhost:3000 webpack/hot/dev-server ./src/index.js
ERROR in ./src/components/signup_page/assets/css/custom.css
Module parse failed: D:\jasmel\react\lp\src\components\signup_page\assets\css\custom.css Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
| .sign-up-content img{
| width: auto !important;
| vertical-align: bottom;
# ./src/containers/Signup.js 23:0-58
# ./src/index.js
# multi (webpack)-dev-server/client?http://localhost:3000 webpack/hot/dev-server ./src/index.js
ERROR in ./src/components/landing_page/assets/img/play-video.png
Module parse failed: D:\jasmel\react\lp\src\components\landing_page\assets\img\play-video.png Unexpected character '�' (1:0)
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)
# ./src/components/landing_page/HomeSection_3.js 11:17-55
# ./src/containers/LandingPage.js
# ./src/index.js
# multi (webpack)-dev-server/client?http://localhost:3000 webpack/hot/dev-server ./src/index.js
ERROR in ./src/common_assets/img/logo.png
Module parse failed: D:\jasmel\react\lp\src\common_assets\img\logo.png Unexpected character '�' (1:0)
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)
# ./src/components/home_page/HeaderSection.js 15:12-55
# ./src/containers/HomePage.js
# ./src/index.js
# multi (webpack)-dev-server/client?http://localhost:3000 webpack/hot/dev-server ./src/index.js
ERROR in ./src/common_assets/img/post-img.png
Module parse failed: D:\jasmel\react\lp\src\common_assets\img\post-img.png Unexpected character '�' (1:0)
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)
# ./src/components/home_page/HeaderSection.js 19:15-62
# ./src/containers/HomePage.js
# ./src/index.js
# multi (webpack)-dev-server/client?http://localhost:3000 webpack/hot/dev-server ./src/index.js
ERROR in ./src/common_assets/img/header-img.png
Module parse failed: D:\jasmel\react\lp\src\common_assets\img\header-img.png Unexpected character '�' (1:0)
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)
# ./src/components/home_page/HeaderSection.js 23:17-66
# ./src/containers/HomePage.js
# ./src/index.js
# multi (webpack)-dev-server/client?http://localhost:3000 webpack/hot/dev-server ./src/index.js
ERROR in ./src/common_assets/img/amazon.png
Module parse failed: D:\jasmel\react\lp\src\common_assets\img\amazon.png Unexpected character '�' (1:0)
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)
# ./src/components/home_page/SinglePost.js 23:14-59
# ./src/components/home_page/RightPostSection.js
# ./src/containers/HomePage.js
# ./src/index.js
# multi (webpack)-dev-server/client?http://localhost:3000 webpack/hot/dev-server ./src/index.js
ERROR in ./src/common_assets/img/IMAGE.png
Module parse failed: D:\jasmel\react\lp\src\common_assets\img\IMAGE.png Unexpected character '�' (1:0)
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)
# ./src/components/home_page/SinglePost.js 19:13-57
# ./src/components/home_page/RightPostSection.js
# ./src/containers/HomePage.js
# ./src/index.js
# multi (webpack)-dev-server/client?http://localhost:3000 webpack/hot/dev-server ./src/index.js
ERROR in ./src/common_assets/img/advertisment.png
Module parse failed: D:\jasmel\react\lp\src\common_assets\img\advertisment.png Unexpected character '�' (1:0)
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)
# ./src/components/home_page/AdPost.js 15:20-71
# ./src/components/home_page/RightPostSection.js
# ./src/containers/HomePage.js
# ./src/index.js
# multi (webpack)-dev-server/client?http://localhost:3000 webpack/hot/dev-server ./src/index.js
ERROR in ./node_modules/react-toasts/animate.css
Module parse failed: D:\jasmel\react\lp\node_modules\react-toasts\animate.css Unexpected character '#' (1:0)
You may need an appropriate loader to handle this file type.
| #charset "UTF-8";
|
| .animated {
# ./node_modules/react-toasts/index.js 5:0-23
# ./src/components/landing_page/Header.js
# ./src/containers/LandingPage.js
# ./src/index.js
# multi (webpack)-dev-server/client?http://localhost:3000 webpack/hot/dev-server ./src/index.js
ERROR in ./node_modules/react-toasts/styles.css
Module parse failed: D:\jasmel\react\lp\node_modules\react-toasts\styles.css Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
| .react-toasts-container {
| position: absolute;
| z-index: 9999;
# ./node_modules/react-toasts/index.js 6:0-22
# ./src/components/landing_page/Header.js
# ./src/containers/LandingPage.js
# ./src/index.js
# multi (webpack)-dev-server/client?http://localhost:3000 webpack/hot/dev-server ./src/index.js
Anyone here to help me ? Iam new in react. thanks in advance .
I think, You are using webpack 3, but using the config for webpack 1.
Please, take a look here: https://webpack.js.org/guides/migrating/
For example, module -> loaders now is module -> rules, and so on.

Babel/browserify throws "Error while parsing JSON - Unexpected token o"

Weird error when attempting to use browserify and babel:
./node_modules/.bin/browserify app/index.js -o bundle.js -t [ babelify --presets [ es2015 react ] ]
gives:
SyntaxError: /.../package.json: Error while parsing JSON - Unexpected token o in JSON at position 1 while parsing file: /.../index.js
at Object.parse (native)
at ConfigChainBuilder.addConfig (/.../dash/node_modules/babelify/node_modules/babel-core/lib/transformation/file/options/build-config-chain.js:155:65)
at ConfigChainBuilder.findConfigs (/.../dash/node_modules/babelify/node_modules/babel-core/lib/transformation/file/options/build-config-chain.js:107:30)
at buildConfigChain (/.../dash/node_modules/babelify/node_modules/babel-core/lib/transformation/file/options/build-config-chain.js:66:13)
at OptionManager.init (/.../dash/node_modules/babelify/node_modules/babel-core/lib/transformation/file/options/option-manager.js:369:58)
at File.initOptions (/.../dash/node_modules/babelify/node_modules/babel-core/lib/transformation/file/index.js:223:65)
at new File
I have the proper presets installed for es2015 and react, but I have no idea why it's throwing up this error. The weird thing is, this command is working on my production server...
Any ideas?
This is the package.json parsing error, Check whether there is an package.json file at my user directory, if exist, delete it.

Resources