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.
Related
./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
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?
Good morning to all, I'm new on BotFrameworkand React and I'm trying to embed my bot to my React website but it is not showing and I can see some errors on Node.js console.
I copied&pasted the sample on my code but now it needs the adaptiveCardsHostConfig and bot attribute, so I tried to add it and it fails.
Please, could you help me to know where I'm wrong?
First of all I executed npm install botframework-webchat command on console and then set the code above:
import { Chat } from 'botframework-webchat';
...
<Chat
adaptiveCardsHostConfig={{ fontFamily: '"Myriad Pro", sans-serif' }}
directLine={{ secret: 'asV4w25M-8I.cwA._-M.o-eAeWrQg0MMJcup3bU8klFEPiKoOhIPV8HZHytS0r0' }}
user={{ id: 'userid', name: 'username' }}
bot={{ id: 'botID', name: 'botName' }}
resize="detect"
/>
...
These are the warnings on node.js console:
WARNING in ./~/adaptivecards/lib/adaptivecards.js
(Emitted value instead of an instance of Error) Cannot find source file '../src/adaptivecards.ts': Error: Can't resolve '../src/adaptivecards.ts' in 'C:\Users\dsanchis\source\repos\Modern Atum\BackEnd\CP.ModernAtum.API\node_modules\adaptivecards\lib'
# ./~/botframework-webchat/built/Attachment.js 6:22-46
# ./~/botframework-webchat/built/BotChat.js
# ./app/src/components/Header/Header.tsx
# ./app/src/components/Layout/Layout.tsx
# ./app/src/components/Search/Search.tsx
# ./app/src/components/GroupsExplorer/GroupsExplorer.tsx
# ./app/src/index.tsx
# multi es6-promise whatwg-fetch ./app/src/index.tsx
WARNING in ./~/adaptivecards/lib/enums.js
(Emitted value instead of an instance of Error) Cannot find source file '../src/enums.ts': Error: Can't resolve '../src/enums.ts' in 'C:\Users\dsanchis\source\repos\Modern Atum\BackEnd\CP.ModernAtum.API\node_modules\adaptivecards\lib'
# ./~/adaptivecards/lib/adaptivecards.js 7:9-27
# ./~/botframework-webchat/built/Attachment.js
# ./~/botframework-webchat/built/BotChat.js
# ./app/src/components/Header/Header.tsx
# ./app/src/components/Layout/Layout.tsx
# ./app/src/components/Search/Search.tsx
# ./app/src/components/GroupsExplorer/GroupsExplorer.tsx
# ./app/src/index.tsx
# multi es6-promise whatwg-fetch ./app/src/index.tsx
WARNING in ./~/adaptivecards/lib/utils.js
(Emitted value instead of an instance of Error) Cannot find source file '../src/utils.ts': Error: Can't resolve '../src/utils.ts' in 'C:\Users\dsanchis\source\repos\Modern Atum\BackEnd\CP.ModernAtum.API\node_modules\adaptivecards\lib'
# ./~/adaptivecards/lib/adaptivecards.js 9:14-32
# ./~/botframework-webchat/built/Attachment.js
# ./~/botframework-webchat/built/BotChat.js
# ./app/src/components/Header/Header.tsx
# ./app/src/components/Layout/Layout.tsx
# ./app/src/components/Search/Search.tsx
# ./app/src/components/GroupsExplorer/GroupsExplorer.tsx
# ./app/src/index.tsx
# multi es6-promise whatwg-fetch ./app/src/index.tsx
WARNING in ./~/adaptivecards/lib/host-config.js
(Emitted value instead of an instance of Error) Cannot find source file '../src/host-config.ts': Error: Can't resolve '../src/host-config.ts' in 'C:\Users\dsanchis\source\repos\Modern Atum\BackEnd\CP.ModernAtum.API\node_modules\adaptivecards\lib'
# ./~/adaptivecards/lib/adaptivecards.js 8:9-33
# ./~/botframework-webchat/built/Attachment.js
# ./~/botframework-webchat/built/BotChat.js
# ./app/src/components/Header/Header.tsx
# ./app/src/components/Layout/Layout.tsx
# ./app/src/components/Search/Search.tsx
# ./app/src/components/GroupsExplorer/GroupsExplorer.tsx
# ./app/src/index.tsx
# multi es6-promise whatwg-fetch ./app/src/index.tsx
WARNING in ./~/adaptivecards/lib/text-formatters.js
(Emitted value instead of an instance of Error) Cannot find source file '../src/text-formatters.ts': Error: Can't resolve '../src/text-formatters.ts' in 'C:\Users\dsanchis\source\repos\Modern Atum\BackEnd\CP.ModernAtum.API\node_modules\adaptivecards\lib'
# ./~/adaptivecards/lib/card-elements.js 16:21-49
# ./~/adaptivecards/lib/adaptivecards.js
# ./~/botframework-webchat/built/Attachment.js
# ./~/botframework-webchat/built/BotChat.js
# ./app/src/components/Header/Header.tsx
# ./app/src/components/Layout/Layout.tsx
# ./app/src/components/Search/Search.tsx
# ./app/src/components/GroupsExplorer/GroupsExplorer.tsx
# ./app/src/index.tsx
# multi es6-promise whatwg-fetch ./app/src/index.tsx
WARNING in ./~/adaptivecards/lib/card-elements.js
(Emitted value instead of an instance of Error) Cannot find source file '../src/card-elements.ts': Error: Can't resolve '../src/card-elements.ts' in 'C:\Users\dsanchis\source\repos\Modern Atum\BackEnd\CP.ModernAtum.API\node_modules\adaptivecards\lib'
# ./~/adaptivecards/lib/adaptivecards.js 6:9-35
# ./~/botframework-webchat/built/Attachment.js
# ./~/botframework-webchat/built/BotChat.js
# ./app/src/components/Header/Header.tsx
# ./app/src/components/Layout/Layout.tsx
# ./app/src/components/Home/Home.tsx
# ./app/src/components/GroupsExplorer/GroupsExplorer.tsx
# ./app/src/index.tsx
# multi es6-promise whatwg-fetch ./app/src/index.tsx
And here the error on Chrome Console:
Uncaught TypeError: action$.ofType(...).map(...).filter(...).throttleTime is not a function
at sendTypingEpic (app.bundle.js:10062)
at app.bundle.js:78455
at Array.map (<anonymous>)
at app.bundle.js:78454
at MapSubscriber.project (app.bundle.js:78520)
at MapSubscriber._next (app.bundle.js:27998)
at MapSubscriber.Subscriber.next (app.bundle.js:3631)
at Subject.next (app.bundle.js:8134)
at app.bundle.js:78530
at app.bundle.js:78646
UPDATE(15/05/2018):
Now DirectLine component renders on page, but it has not proper style and I can't apply a style, just set with and height. It shows like below (with a transparent background, chooser file button and field...):
DirectLine bot showed without proper style
The warnings on Node.js console still appearing and now in Chrome console I can see a new error message:
Uncaught TypeError: Cannot read property 'offsetWidth' of null
at e.componentDidUpdate (botchat.js:34)
at t.notifyAll (botchat.js:34)
at r.close (botchat.js:34)
at r.closeAll (botchat.js:20)
at r.perform (botchat.js:20)
at o.perform (botchat.js:20)
at o.perform (botchat.js:20)
at Object.S [as flushBatchedUpdates] (botchat.js:20)
at r.closeAll (botchat.js:20)
at r.perform (botchat.js:20)
How can I solve the styles and add custom?
It's due to the .map files in the output (in the lib and dist folders). Remove them and you get rid of the webpack warnings.
Also see reported issue here: https://github.com/Microsoft/AdaptiveCards/issues/1492
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
...
};
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.