Cannot resolve stream dependency of styled componentsClient on node: Uncaught ReferenceError: require is not definedWebpack with babel-loader for react corrupts image filesInstall babel-plugin-styled-components in create-react-appeslint-plugin-react return syntax error with RenderWebpack cannot identify my JSX syntax inside my js fileWebpack css issue, missing bundle.cssCode splitting increases entry bundle size when using create-react-appParchment Invalid definition in react vendor.js in IE10Jest encountered an unexpected token SyntaxError: Unexpected token {airbnb-prop-types - SyntaxError: Unexpected identifier on `forbidExtraProps`
With Ubuntu 18.04, how can I have a hot corner that locks the computer?
Has there been a multiethnic Star Trek character?
Why does logistic function use e rather than 2?
Is an entry level DSLR going to shoot nice portrait pictures?
Second (easy access) account in case my bank screws up
Active low-pass filters --- good to what frequencies?
Longest bridge/tunnel that can be cycled over/through?
Extreme flexible working hours: how to get to know people and activities?
Determining fair price for profitable mobile app business
Ability To Change Root User Password (Vulnerability?)
Is it possible to fly backward if you have a 'really strong' headwind?
How to communicate to my GM that not being allowed to use stealth isn't fun for me?
What aircraft was used as Air Force One for the flight between Southampton and Shannon?
Does the 2019 UA Artificer's Many-Handed Pouch infusion enable unlimited infinite-range cross-planar communication?
Is it possible to have a wealthy country without a middle class?
Is it legal for a bar bouncer to confiscate a fake ID
How can I get an unreasonable manager to approve time off?
Entire circuit dead after GFCI outlet
Moving points closer to polyline using ModelBuilder?
Why are trash cans referred to as "zafacón" in Puerto Rico?
Is it safe to change the harddrive power feature so that it never turns off?
Does the new finding on "reversing a quantum jump mid-flight" rule out any interpretations of QM?
How is the excise border managed in Ireland?
What is the color of artificial intelligence?
Cannot resolve stream dependency of styled components
Client on node: Uncaught ReferenceError: require is not definedWebpack with babel-loader for react corrupts image filesInstall babel-plugin-styled-components in create-react-appeslint-plugin-react return syntax error with RenderWebpack cannot identify my JSX syntax inside my js fileWebpack css issue, missing bundle.cssCode splitting increases entry bundle size when using create-react-appParchment Invalid definition in react vendor.js in IE10Jest encountered an unexpected token SyntaxError: Unexpected token {airbnb-prop-types - SyntaxError: Unexpected identifier on `forbidExtraProps`
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty height:90px;width:728px;box-sizing:border-box;
I'm stuck with adding styled-components library into my reactjs project. I'm getting an error when trying to run my app in browser, not at the building stage. It's quite common:
Here is my webpack config:
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports =
context: path.join(__dirname, 'src'),
entry:
server: '../server/index.js',
app: './app.jsx',
,
resolve:
extensions: ['.jsx', '.js'],
,
module:
rules: [
test: /.(jsx,
],
,
target: 'node',
plugins: [
new HtmlWebpackPlugin(
template: './index.html',
filename: './index.html',
excludeChunks: ['server'],
),
],
;
Here is my babelrc:
"presets": ["@babel/preset-env", "@babel/preset-react"],
"plugins": [
"@babel/plugin-transform-runtime",
"babel-plugin-styled-components"
]
Here is my styled component:
import React from 'react';
import styled from 'styled-components';
export function SearchPage()
const Container = styled.div`
text-align: center;
`;
return <Container>test</Container>;
Here is my package.json:
"devDependencies":
"@babel/core": "^7.3.4",
"@babel/plugin-transform-runtime": "^7.4.0",
"@babel/preset-env": "^7.3.4",
"@babel/preset-react": "^7.0.0",
"babel-eslint": "^10.0.1",
"babel-loader": "^8.0.5",
"babel-plugin-styled-components": "^1.10.0",
"enzyme": "^3.9.0",
"enzyme-adapter-react-16": "^1.11.2",
"eslint": "^5.15.3",
"eslint-config-airbnb-base": "^13.1.0",
"eslint-config-prettier": "^4.1.0",
"eslint-plugin-import": "^2.16.0",
"eslint-plugin-prettier": "^3.0.1",
"eslint-plugin-react": "^7.12.4",
"eslint-plugin-react-hooks": "^1.6.0",
"husky": "^1.3.1",
"jest": "^24.5.0",
"live-server": "^1.2.1",
"nodemon": "^1.18.10",
"npm-run-all": "^4.1.5",
"prettier": "^1.16.4",
"react-redux": "^6.0.1",
"react-router": "^4.4.0",
"redux": "^4.0.1",
"rimraf": "^2.6.3",
"stream": "^0.0.2",
"uglifyjs-webpack-plugin": "^2.1.2",
"webpack": "^4.29.6",
"webpack-cli": "^3.2.3"
,
"version": "1.0.0",
"main": "dist/server.js",
"scripts":
"clean": "rimraf dist build",
"dev": "npm-run-all -p dev:watch server:run dev:server",
"dev:build": "webpack --config webpack.dev.js",
"dev:watch": "yarn run dev:build --watch",
"dev:server": "live-server dist",
"server:run": "nodemon",
"prod:build": "npm-run-all clean webpack --config webpack.prod.js",
"test": "jest"
,
"dependencies":
"express": "^4.16.4",
"html-webpack-plugin": "^3.2.0",
"webpack-merge": "^4.2.1",
"react": "^16.8.4",
"react-dom": "^16.8.4",
"styled-components": "^4.2.0"
I thought that Webpack should bundle all the dependencies. And I don't understand why stream import is not covered by webpack bundling.
I guess that the answer is pretty simple, but I cannot find it. So any advice will be helpful.
reactjs webpack babel styled-components
asked Mar 24 at 19:09
N.K.N.K.
764
add a comment |
I'm stuck with adding styled-components library into my reactjs project. I'm getting an error when trying to run my app in browser, not at the building stage. It's quite common:
Here is my webpack config:
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports =
context: path.join(__dirname, 'src'),
entry:
server: '../server/index.js',
app: './app.jsx',
,
resolve:
extensions: ['.jsx', '.js'],
,
module:
rules: [
test: /.(jsx,
],
,
target: 'node',
plugins: [
new HtmlWebpackPlugin(
template: './index.html',
filename: './index.html',
excludeChunks: ['server'],
),
],
;
Here is my babelrc:
"presets": ["@babel/preset-env", "@babel/preset-react"],
"plugins": [
"@babel/plugin-transform-runtime",
"babel-plugin-styled-components"
]
Here is my styled component:
import React from 'react';
import styled from 'styled-components';
export function SearchPage()
const Container = styled.div`
text-align: center;
`;
return <Container>test</Container>;
Here is my package.json:
"devDependencies":
"@babel/core": "^7.3.4",
"@babel/plugin-transform-runtime": "^7.4.0",
"@babel/preset-env": "^7.3.4",
"@babel/preset-react": "^7.0.0",
"babel-eslint": "^10.0.1",
"babel-loader": "^8.0.5",
"babel-plugin-styled-components": "^1.10.0",
"enzyme": "^3.9.0",
"enzyme-adapter-react-16": "^1.11.2",
"eslint": "^5.15.3",
"eslint-config-airbnb-base": "^13.1.0",
"eslint-config-prettier": "^4.1.0",
"eslint-plugin-import": "^2.16.0",
"eslint-plugin-prettier": "^3.0.1",
"eslint-plugin-react": "^7.12.4",
"eslint-plugin-react-hooks": "^1.6.0",
"husky": "^1.3.1",
"jest": "^24.5.0",
"live-server": "^1.2.1",
"nodemon": "^1.18.10",
"npm-run-all": "^4.1.5",
"prettier": "^1.16.4",
"react-redux": "^6.0.1",
"react-router": "^4.4.0",
"redux": "^4.0.1",
"rimraf": "^2.6.3",
"stream": "^0.0.2",
"uglifyjs-webpack-plugin": "^2.1.2",
"webpack": "^4.29.6",
"webpack-cli": "^3.2.3"
,
"version": "1.0.0",
"main": "dist/server.js",
"scripts":
"clean": "rimraf dist build",
"dev": "npm-run-all -p dev:watch server:run dev:server",
"dev:build": "webpack --config webpack.dev.js",
"dev:watch": "yarn run dev:build --watch",
"dev:server": "live-server dist",
"server:run": "nodemon",
"prod:build": "npm-run-all clean webpack --config webpack.prod.js",
"test": "jest"
,
"dependencies":
"express": "^4.16.4",
"html-webpack-plugin": "^3.2.0",
"webpack-merge": "^4.2.1",
"react": "^16.8.4",
"react-dom": "^16.8.4",
"styled-components": "^4.2.0"
I thought that Webpack should bundle all the dependencies. And I don't understand why stream import is not covered by webpack bundling.
I guess that the answer is pretty simple, but I cannot find it. So any advice will be helpful.
reactjs webpack babel styled-components
asked Mar 24 at 19:09
N.K.N.K.
764
what is in package.json ? you did npm install it ?
– Alexandr Zavalii
Mar 24 at 19:14
@AlexandrZavalii I added package.json code into the question description. I installed it with yarn
– N.K.
Mar 24 at 19:31
Possible duplicate of Client on node: Uncaught ReferenceError: require is not defined
– Dez
Mar 24 at 19:33
@Dez But webpack should bundle all the dependencies. And I don't understand why stream import is not covered by webpack bundling.
– N.K.
Mar 24 at 19:43
add a comment |
I'm stuck with adding styled-components library into my reactjs project. I'm getting an error when trying to run my app in browser, not at the building stage. It's quite common:
Here is my webpack config:
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports =
context: path.join(__dirname, 'src'),
entry:
server: '../server/index.js',
app: './app.jsx',
,
resolve:
extensions: ['.jsx', '.js'],
,
module:
rules: [
test: /.(jsx,
],
,
target: 'node',
plugins: [
new HtmlWebpackPlugin(
template: './index.html',
filename: './index.html',
excludeChunks: ['server'],
),
],
;
Here is my babelrc:
"presets": ["@babel/preset-env", "@babel/preset-react"],
"plugins": [
"@babel/plugin-transform-runtime",
"babel-plugin-styled-components"
]
Here is my styled component:
import React from 'react';
import styled from 'styled-components';
export function SearchPage()
const Container = styled.div`
text-align: center;
`;
return <Container>test</Container>;
Here is my package.json:
"devDependencies":
"@babel/core": "^7.3.4",
"@babel/plugin-transform-runtime": "^7.4.0",
"@babel/preset-env": "^7.3.4",
"@babel/preset-react": "^7.0.0",
"babel-eslint": "^10.0.1",
"babel-loader": "^8.0.5",
"babel-plugin-styled-components": "^1.10.0",
"enzyme": "^3.9.0",
"enzyme-adapter-react-16": "^1.11.2",
"eslint": "^5.15.3",
"eslint-config-airbnb-base": "^13.1.0",
"eslint-config-prettier": "^4.1.0",
"eslint-plugin-import": "^2.16.0",
"eslint-plugin-prettier": "^3.0.1",
"eslint-plugin-react": "^7.12.4",
"eslint-plugin-react-hooks": "^1.6.0",
"husky": "^1.3.1",
"jest": "^24.5.0",
"live-server": "^1.2.1",
"nodemon": "^1.18.10",
"npm-run-all": "^4.1.5",
"prettier": "^1.16.4",
"react-redux": "^6.0.1",
"react-router": "^4.4.0",
"redux": "^4.0.1",
"rimraf": "^2.6.3",
"stream": "^0.0.2",
"uglifyjs-webpack-plugin": "^2.1.2",
"webpack": "^4.29.6",
"webpack-cli": "^3.2.3"
,
"version": "1.0.0",
"main": "dist/server.js",
"scripts":
"clean": "rimraf dist build",
"dev": "npm-run-all -p dev:watch server:run dev:server",
"dev:build": "webpack --config webpack.dev.js",
"dev:watch": "yarn run dev:build --watch",
"dev:server": "live-server dist",
"server:run": "nodemon",
"prod:build": "npm-run-all clean webpack --config webpack.prod.js",
"test": "jest"
,
"dependencies":
"express": "^4.16.4",
"html-webpack-plugin": "^3.2.0",
"webpack-merge": "^4.2.1",
"react": "^16.8.4",
"react-dom": "^16.8.4",
"styled-components": "^4.2.0"
I thought that Webpack should bundle all the dependencies. And I don't understand why stream import is not covered by webpack bundling.
I guess that the answer is pretty simple, but I cannot find it. So any advice will be helpful.
reactjs webpack babel styled-components
asked Mar 24 at 19:09
N.K.N.K.
764
I'm stuck with adding styled-components library into my reactjs project. I'm getting an error when trying to run my app in browser, not at the building stage. It's quite common:
Here is my webpack config:
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports =
context: path.join(__dirname, 'src'),
entry:
server: '../server/index.js',
app: './app.jsx',
,
resolve:
extensions: ['.jsx', '.js'],
,
module:
rules: [
test: /.(jsx,
],
,
target: 'node',
plugins: [
new HtmlWebpackPlugin(
template: './index.html',
filename: './index.html',
excludeChunks: ['server'],
),
],
;
Here is my babelrc:
"presets": ["@babel/preset-env", "@babel/preset-react"],
"plugins": [
"@babel/plugin-transform-runtime",
"babel-plugin-styled-components"
]
Here is my styled component:
import React from 'react';
import styled from 'styled-components';
export function SearchPage()
const Container = styled.div`
text-align: center;
`;
return <Container>test</Container>;
Here is my package.json:
"devDependencies":
"@babel/core": "^7.3.4",
"@babel/plugin-transform-runtime": "^7.4.0",
"@babel/preset-env": "^7.3.4",
"@babel/preset-react": "^7.0.0",
"babel-eslint": "^10.0.1",
"babel-loader": "^8.0.5",
"babel-plugin-styled-components": "^1.10.0",
"enzyme": "^3.9.0",
"enzyme-adapter-react-16": "^1.11.2",
"eslint": "^5.15.3",
"eslint-config-airbnb-base": "^13.1.0",
"eslint-config-prettier": "^4.1.0",
"eslint-plugin-import": "^2.16.0",
"eslint-plugin-prettier": "^3.0.1",
"eslint-plugin-react": "^7.12.4",
"eslint-plugin-react-hooks": "^1.6.0",
"husky": "^1.3.1",
"jest": "^24.5.0",
"live-server": "^1.2.1",
"nodemon": "^1.18.10",
"npm-run-all": "^4.1.5",
"prettier": "^1.16.4",
"react-redux": "^6.0.1",
"react-router": "^4.4.0",
"redux": "^4.0.1",
"rimraf": "^2.6.3",
"stream": "^0.0.2",
"uglifyjs-webpack-plugin": "^2.1.2",
"webpack": "^4.29.6",
"webpack-cli": "^3.2.3"
,
"version": "1.0.0",
"main": "dist/server.js",
"scripts":
"clean": "rimraf dist build",
"dev": "npm-run-all -p dev:watch server:run dev:server",
"dev:build": "webpack --config webpack.dev.js",
"dev:watch": "yarn run dev:build --watch",
"dev:server": "live-server dist",
"server:run": "nodemon",
"prod:build": "npm-run-all clean webpack --config webpack.prod.js",
"test": "jest"
,
"dependencies":
"express": "^4.16.4",
"html-webpack-plugin": "^3.2.0",
"webpack-merge": "^4.2.1",
"react": "^16.8.4",
"react-dom": "^16.8.4",
"styled-components": "^4.2.0"
I thought that Webpack should bundle all the dependencies. And I don't understand why stream import is not covered by webpack bundling.
I guess that the answer is pretty simple, but I cannot find it. So any advice will be helpful.
reactjs webpack babel styled-components
reactjs webpack babel styled-components
asked Mar 24 at 19:09
N.K.N.K.
764
asked Mar 24 at 19:09
N.K.N.K.
764
edited Mar 27 at 7:28
N.K.
asked Mar 24 at 19:09
N.K.N.K.
764
asked Mar 24 at 19:09
N.K.N.K.
764
asked Mar 24 at 19:09
N.K.N.K.
764
764
what is in package.json ? you did npm install it ?
– Alexandr Zavalii
Mar 24 at 19:14
@AlexandrZavalii I added package.json code into the question description. I installed it with yarn
– N.K.
Mar 24 at 19:31
Possible duplicate of Client on node: Uncaught ReferenceError: require is not defined
– Dez
Mar 24 at 19:33
@Dez But webpack should bundle all the dependencies. And I don't understand why stream import is not covered by webpack bundling.
– N.K.
Mar 24 at 19:43
add a comment |
what is in package.json ? you did npm install it ?
– Alexandr Zavalii
Mar 24 at 19:14
@AlexandrZavalii I added package.json code into the question description. I installed it with yarn
– N.K.
Mar 24 at 19:31
Possible duplicate of Client on node: Uncaught ReferenceError: require is not defined
– Dez
Mar 24 at 19:33
@Dez But webpack should bundle all the dependencies. And I don't understand why stream import is not covered by webpack bundling.
– N.K.
Mar 24 at 19:43
what is in package.json ? you did npm install it ?
– Alexandr Zavalii
Mar 24 at 19:14
what is in package.json ? you did npm install it ?
– Alexandr Zavalii
Mar 24 at 19:14
@AlexandrZavalii I added package.json code into the question description. I installed it with yarn
– N.K.
Mar 24 at 19:31
@AlexandrZavalii I added package.json code into the question description. I installed it with yarn
– N.K.
Mar 24 at 19:31
Possible duplicate of Client on node: Uncaught ReferenceError: require is not defined
– Dez
Mar 24 at 19:33
Possible duplicate of Client on node: Uncaught ReferenceError: require is not defined
– Dez
Mar 24 at 19:33
@Dez But webpack should bundle all the dependencies. And I don't understand why stream import is not covered by webpack bundling.
– N.K.
Mar 24 at 19:43
@Dez But webpack should bundle all the dependencies. And I don't understand why stream import is not covered by webpack bundling.
– N.K.
Mar 24 at 19:43
add a comment |
1 Answer
1
active
oldest
votes
The thing is in target: 'node' into my package.json. It's supposed to use only for server-side build not for client.
answered Mar 27 at 7:28
N.K.N.K.
764
add a comment |
Your Answer
StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55327484%2fcannot-resolve-stream-dependency-of-styled-components%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
The thing is in target: 'node' into my package.json. It's supposed to use only for server-side build not for client.
answered Mar 27 at 7:28
N.K.N.K.
764
add a comment |
The thing is in target: 'node' into my package.json. It's supposed to use only for server-side build not for client.
answered Mar 27 at 7:28
N.K.N.K.
764
add a comment |
The thing is in target: 'node' into my package.json. It's supposed to use only for server-side build not for client.
answered Mar 27 at 7:28
N.K.N.K.
764
The thing is in target: 'node' into my package.json. It's supposed to use only for server-side build not for client.
answered Mar 27 at 7:28
N.K.N.K.
764
answered Mar 27 at 7:28
N.K.N.K.
764
answered Mar 27 at 7:28
N.K.N.K.
764
answered Mar 27 at 7:28
N.K.N.K.
764
764
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55327484%2fcannot-resolve-stream-dependency-of-styled-components%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
what is in package.json ? you did npm install it ?
– Alexandr Zavalii
Mar 24 at 19:14
@AlexandrZavalii I added package.json code into the question description. I installed it with yarn
– N.K.
Mar 24 at 19:31
Possible duplicate of Client on node: Uncaught ReferenceError: require is not defined
– Dez
Mar 24 at 19:33
@Dez But webpack should bundle all the dependencies. And I don't understand why stream import is not covered by webpack bundling.
– N.K.
Mar 24 at 19:43