I'm trying to add styled-components to some react boilerplate code. When I load the homepage I get the following error in console:
Uncaught TypeError: __webpack_require__.i(...) is not a function
at Object.eval (styled-components.browser.esm.js?60a8:1670)
at eval (313:2534)
at Object.<anonymous> (bundle.js:3837)
at __webpack_require__ (bundle.js:20)
at eval (index.js?b50c:62)
at Object.<anonymous> (bundle.js:1620)
at __webpack_require__ (bundle.js:20)
at eval (index.js?c3ed:7)
at Object.<anonymous> (bundle.js:1908)
at __webpack_require__ (bundle.js:20)
The App component looks like this:
import React from 'react';
import styled from 'styled-components';
const AppWrapper = styled.div`
max-width: 100px;
`;
const App = ({ user }) => (
<AppWrapper>
Test app
</AppWrapper>
);
export default App;
If I remove the line import styled from 'styled-components'; as well as replace AppWrapper with a div it works as expected.
I've installed styled-components using npm.
My webpack config looks like this:
var path = require('path');
var LiveReloadPlugin = require('webpack-livereload-plugin');
module.exports = {
entry: './client/src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'client/src/public/dist')
},
context: __dirname,
devtool: 'source-map',
resolve: {
extensions: ['.js', '.jsx', '.json', '*']
},
module: {
rules: [{
test: /\.jsx?$/,
exclude: /(node_modules|bower_components)/,
loader: 'babel-loader',
options: {
presets: ['react', 'es2015', 'stage-1'],
sourceMap: true
}
},
{
test: /\.scss$/,
use: [
'style-loader',
'css-loader',
'sass-loader'
]
}
]
},
plugins: [
new LiveReloadPlugin({appendScriptTag: true})
]
};
Here is my package.json
{
"name": "biolerplate",
"version": "1.0.0",
"description": "a boilerplate for react, redux, & express",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack",
"build-watch": "npm run build -- -w -d",
"start": "node server/index.js",
"start-watch": "nodemon server/index.js --watch server --watch db",
"dev": "cross-env NODE_ENV=development concurrently --kill-others --prefix \"[{name}]\" --names \"BUILD,SERVE\" -c \"bgBlack.bold.green,bgBlack.bold.red\" \"npm run build-watch\" \"npm run start-watch\""
},
"author": "",
"license": "ISC",
"dependencies": {
"#material-ui/core": "^3.9.2",
"axios": "^0.16.2",
"bcryptjs": "^2.4.3",
"body-parser": "^1.17.1",
"connect-session-sequelize": "^4.1.0",
"express": "^4.15.2",
"express-session": "^1.15.3",
"immutable": "^4.0.0-rc.12",
"nodemon": "^1.11.0",
"passport": "^0.3.2",
"passport-google-oauth2": "^0.1.6",
"pg": "^6.2.4",
"pg-hstore": "^2.3.2",
"react": "^15.5.4",
"react-dom": "^15.5.4",
"react-helmet": "^5.2.0",
"react-redux": "^5.0.4",
"react-router": "^4.1.1",
"react-router-dom": "^4.1.1",
"react-select": "^2.3.0",
"redux": "^3.6.0",
"redux-logger": "^3.0.1",
"redux-thunk": "^2.2.0",
"reselect": "^4.0.0",
"sequelize": "^4.4.0",
"styled-components": "^4.1.3",
"volleyball": "^1.4.1",
"webpack-livereload-plugin": "^0.11.0"
},
"devDependencies": {
"babel-core": "^6.24.1",
"babel-loader": "^7.0.0",
"babel-plugin-styled-components": "^1.10.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"babel-preset-stage-1": "^6.24.1",
"concurrently": "^3.4.0",
"cross-env": "^5.0.1",
"css-loader": "^0.28.0",
"eslint": "^5.13.0",
"eslint-config-airbnb": "^17.1.0",
"eslint-config-airbnb-base": "^13.1.0",
"eslint-config-prettier": "^4.0.0",
"eslint-import-resolver-webpack": "^0.11.0",
"eslint-plugin-import": "^2.16.0",
"eslint-plugin-jsx-a11y": "^6.2.1",
"eslint-plugin-prettier": "^3.0.1",
"eslint-plugin-react": "^7.12.4",
"node-sass": "^4.5.2",
"redux-devtools-extension": "^2.13.0",
"sass-loader": "^6.0.3",
"style-loader": "^0.16.1",
"webpack": "^2.4.1"
}
}
Any idea what's going on?
styled-components 4.1.3 is not gonna work with react 15.5.4 I think.
Try upping your dependencies and run npm install.
Related
I started working on a 5-years old python+react project. I had many problems regarding old packages or incompatibility. I managed to fix most of the problems that I faced except for this one:
ERROR in ./app/index.js
Module parse failed: /home/kaiz3n/Desktop/iris/iris-agent/app/index.js Unexpected token (37:6)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected token (37:6)
at Parser.pp$4.raise (/home/kaiz3n/Desktop/iris/iris-agent/node_modules/webpack/node_modules/acorn/dist/acorn.js:2221:15)
at Parser.pp.unexpected (/home/kaiz3n/Desktop/iris/iris-agent/node_modules/webpack/node_modules/acorn/dist/acorn.js:603:10)
at Parser.pp$3.parseExprAtom (/home/kaiz3n/Desktop/iris/iris-agent/node_modules/webpack/node_modules/acorn/dist/acorn.js:1822:12)
at Parser.pp$3.parseExprSubscripts (/home/kaiz3n/Desktop/iris/iris-agent/node_modules/webpack/node_modules/acorn/dist/acorn.js:1715:21)
at Parser.pp$3.parseMaybeUnary (/home/kaiz3n/Desktop/iris/iris-agent/node_modules/webpack/node_modules/acorn/dist/acorn.js:1692:19)
at Parser.pp$3.parseExprOps (/home/kaiz3n/Desktop/iris/iris-agent/node_modules/webpack/node_modules/acorn/dist/acorn.js:1637:21)
at Parser.pp$3.parseMaybeConditional (/home/kaiz3n/Desktop/iris/iris-agent/node_modules/webpack/node_modules/acorn/dist/acorn.js:1620:21)
at Parser.pp$3.parseMaybeAssign (/home/kaiz3n/Desktop/iris/iris-agent/node_modules/webpack/node_modules/acorn/dist/acorn.js:1597:21)
at Parser.pp$3.parseExprList (/home/kaiz3n/Desktop/iris/iris-agent/node_modules/webpack/node_modules/acorn/dist/acorn.js:2165:22)
at Parser.pp$3.parseSubscripts (/home/kaiz3n/Desktop/iris/iris-agent/node_modules/webpack/node_modules/acorn/dist/acorn.js:1741:35)
at Parser.pp$3.parseExprSubscripts (/home/kaiz3n/Desktop/iris/iris-agent/node_modules/webpack/node_modules/acorn/dist/acorn.js:1718:17)
at Parser.pp$3.parseMaybeUnary (/home/kaiz3n/Desktop/iris/iris-agent/node_modules/webpack/node_modules/acorn/dist/acorn.js:1692:19)
at Parser.pp$3.parseExprOps (/home/kaiz3n/Desktop/iris/iris-agent/node_modules/webpack/node_modules/acorn/dist/acorn.js:1637:21)
at Parser.pp$3.parseMaybeConditional (/home/kaiz3n/Desktop/iris/iris-agent/node_modules/webpack/node_modules/acorn/dist/acorn.js:1620:21)
at Parser.pp$3.parseMaybeAssign (/home/kaiz3n/Desktop/iris/iris-agent/node_modules/webpack/node_modules/acorn/dist/acorn.js:1597:21)
at Parser.pp$3.parseExpression (/home/kaiz3n/Desktop/iris/iris-agent/node_modules/webpack/node_modules/acorn/dist/acorn.js:1573:21)
at Parser.pp$1.parseStatement (/home/kaiz3n/Desktop/iris/iris-agent/node_modules/webpack/node_modules/acorn/dist/acorn.js:727:47)
at Parser.pp$1.parseTopLevel (/home/kaiz3n/Desktop/iris/iris-agent/node_modules/webpack/node_modules/acorn/dist/acorn.js:638:25)
at Parser.parse (/home/kaiz3n/Desktop/iris/iris-agent/node_modules/webpack/node_modules/acorn/dist/acorn.js:516:17)
at Object.parse (/home/kaiz3n/Desktop/iris/iris-agent/node_modules/webpack/node_modules/acorn/dist/acorn.js:3098:39)
at Parser.parse (/home/kaiz3n/Desktop/iris/iris-agent/node_modules/webpack/lib/Parser.js:902:15)
at NormalModule.<anonymous> (/home/kaiz3n/Desktop/iris/iris-agent/node_modules/webpack/lib/NormalModule.js:104:16)
at NormalModule.onModuleBuild (/home/kaiz3n/Desktop/iris/iris-agent/node_modules/webpack-core/lib/NormalModuleMixin.js:310:10)
at nextLoader (/home/kaiz3n/Desktop/iris/iris-agent/node_modules/webpack-core/lib/NormalModuleMixin.js:275:25)
at /home/kaiz3n/Desktop/iris/iris-agent/node_modules/webpack-core/lib/NormalModuleMixin.js:259:5
at Storage.finished (/home/kaiz3n/Desktop/iris/iris-agent/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:38:16)
at /home/kaiz3n/Desktop/iris/iris-agent/node_modules/graceful-fs/graceful-fs.js:123:16
at FSReqCallback.readFileAfterClose [as oncomplete] (node:internal/fs/read_file_context:75:3)
package.json
{
"name": "iris-electron",
"version": "1.0.0",
"description": "",
"main": "main.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"babel": "babel",
"webpack": "webpack",
"start": "electron ."
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"file-loader": "^0.9.0",
"isomorphic-fetch": "^2.2.1",
"lodash": "^4.17.2",
"react": "^15.0.2",
"react-ace": "^5.0.1",
"react-data-grid": "^2.0.33",
"react-dom": "^15.0.2",
"react-hot-loader": "^3.0.0-beta.2",
"react-redux": "^4.4.5",
"react-router": "^2.4.0",
"react-router-redux": "^4.0.4",
"react-split-pane": "^0.1.63",
"react-syntax-highlighter": "^5.1.3",
"react-vega-lite": "^1.0.1",
"redux": "^3.5.2",
"vega": "^3.0.0-rc6",
"vega-lite": "^2.0.0-beta.11",
"webpack": "^1.14.0"
},
"devDependencies": {
"autoprefixer": "^6.3.6",
"babel-core": "^6.8.0",
"babel-eslint": "^6.0.4",
"babel-loader": "^6.2.4",
"babel-polyfill": "^6.8.0",
"babel-preset-es2015": "^6.6.0",
"babel-preset-react": "^6.5.0",
"babel-preset-stage-0": "^6.5.0",
"css-loader": "^0.23.1",
"electron": "^1.6.5",
"electron-packager": "^8.6.0",
"eslint": "^2.9.0",
"eslint-loader": "^1.5.0",
"eslint-plugin-react": "^5.0.1",
"extract-text-webpack-plugin": "^1.0.1",
"html-webpack-plugin": "^2.16.1",
"json-loader": "^0.5.4",
"node-sass": "^4.0.1",
"postcss-loader": "^0.9.1",
"react-addons-test-utils": "^15.0.2",
"redux-devtools": "^3.2.0",
"redux-devtools-dock-monitor": "^1.1.1",
"redux-devtools-log-monitor": "^1.0.11",
"rimraf": "^2.5.2",
"sass-loader": "^3.2.0",
"stats-webpack-plugin": "^0.3.1",
"style-loader": "^0.13.1",
"url-loader": "^0.5.7",
"webpack-dev-server": "^1.14.1"
}
}
webpack.config.js
'use strict';
var path = require('path');
var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
devtool: 'eval-source-map',
entry: [
'webpack-dev-server/client?http://localhost:3000',
'webpack/hot/only-dev-server',
'react-hot-loader/patch',
path.join(__dirname, 'app/index.js')
],
output: {
path: path.join(__dirname, 'dist/'),
filename: 'bundle.js',
publicPath: ''
},
plugins: [
new HtmlWebpackPlugin({
template: 'app/index.tpl.html',
inject: 'body',
filename: 'index.html'
}),
new webpack.optimize.OccurenceOrderPlugin(),
new webpack.HotModuleReplacementPlugin(),
new webpack.NoErrorsPlugin(),
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify('development')
})
],
//eslint: {
// configFile: '.eslintrc',
// failOnWarning: false,
//failOnError: false
//},
module: {
rules: [
{
test: /\.js?$/,
exclude: /node_modules/,
loader: 'babel'
},
{
test: /\.json?$/,
loader: 'json'
},
{
test: /\.scss$/,
loader: 'style!css!sass?modules&localIdentName=[name]---[local]---[hash:base64:5]'
},
{ test: /\.woff(2)?(\?[a-z0-9#=&.]+)?$/, loader: 'url?limit=10000&mimetype=application/font-woff' },
{ test: /\.(ttf|eot|svg)(\?[a-z0-9#=&.]+)?$/, loader: 'file' }
]
}
};
When I try to integrate web2-react/walletconnect-connector with web3-react using web3-react/core. Other wallets like portis, metamask, fortmatic and few other are working properly but when I use wallet-connector or walletlink it is giving the error.
I used this code web3-react github repo.
Getting runtime error.
Provider
import {
Web3ReactProvider,
} from '#web3-react/core';
import { Web3Provider } from '#ethersproject/providers';
function getLibrary(provider: any) {
const library = new Web3Provider(provider);
library.pollingInterval = 12000;
return library;
}
ReactDOM.render(
<Web3ReactProvider getLibrary={getLibrary} >
<Start />
</Web3ReactProvider>,
document.getElementById('root') as HTMLElement
);
Connector code
import { WalletConnectConnector } from '#web3-react/walletconnect-connector';
export const walletconnect = new WalletConnectConnector({
rpc: { 1: 'https://mainnet.infura.io/v3/84842078b09946638c03157f83405213' },
qrcode: true,
});
Here is the Error
./node_modules/eth-json-rpc-filters/node_modules/pify/index.js
Module parse failed: Unexpected token (44:2)
You may need an appropriate loader to handle this file type.
| errorFirst: true,
| promiseModule: Promise,
| ...options
| };
Package Json
{
"name": "my-app",
"version": "0.1.0",
"private": true,
"dependencies": {
"#ant-design/icons": "^2.1.1",
"#ethersproject/keccak256": "^5.4.0",
"#ethersproject/providers": "^5.4.5",
"#ethersproject/units": "^5.4.0",
"#metamask/detect-provider": "^1.2.0",
"#web3-react/abstract-connector": "^6.0.7",
"#web3-react/authereum-connector": "^6.2.0",
"#web3-react/core": "^6.1.9",
"#web3-react/fortmatic-connector": "^6.1.6",
"#web3-react/frame-connector": "^6.0.9",
"#web3-react/injected-connector": "^6.0.7",
"#web3-react/lattice-connector": "^6.1.9",
"#web3-react/ledger-connector": "^6.1.9",
"#web3-react/network-connector": "^6.1.9",
"#web3-react/portis-connector": "^6.1.9",
"#web3-react/squarelink-connector": "^6.1.9",
"#web3-react/torus-connector": "^6.1.9",
"#web3-react/trezor-connector": "^6.1.9",
"#web3-react/walletconnect-connector": "^6.2.4",
"#web3-react/walletlink-connector": "^6.2.5",
"antd": "^3.4.1",
"async-redis": "^2.0.0",
"bootstrap": "^5.1.0",
"bscscan-api": "^1.0.1",
"chessboardjs": "^0.0.1",
"dotenv": "^4.0.0",
"ethers": "^5.4.6",
"express": "^4.16.3",
"husky": "^7.0.2",
"immutable": "^3.8.2",
"lint-staged": "^11.1.2",
"node-cron": "^3.0.0",
"node-schedule": "^1.3.0",
"nodemon": "^2.0.13",
"normalize.css": "^8.0.0",
"prettier": "^2.3.2",
"react": "^16.3.1",
"react-copy-to-clipboard": "^5.0.4",
"react-countdown-circle-timer": "^2.5.4",
"react-dom": "^16.3.1",
"react-router": "^5.2.1",
"react-router-dom": "^5.3.0",
"react-scripts-ts": "^2.15.1",
"react-spring": "^9.2.5",
"react-toastify": "^8.0.3",
"redis": "^2.8.0",
"shortid": "^2.2.8",
"socket.io": "^2.1.0",
"socket.io-client": "^2.1.0",
"toasted-notes": "^3.2.0",
"web3": "^1.6.0"
},
"scripts": {
"start": "react-scripts-ts start",
"server": "server/index.js",
"nodemon": "nodemon server/index.js",
"build": "react-scripts-ts build",
"test": "react-scripts-ts test --env=jsdom",
"eject": "react-scripts-ts eject",
"create:component": "./node_modules/hygen/lib/bin.js component create",
"create:store:item": "./node_modules/hygen/lib/bin.js store create",
"heroku-postbuild": "yarn run build"
},
"jest": {
"moduleNameMapper": {
"^react-native$": "react-native-web",
"#App/(.*)": "<rootDir>/src/$1"
}
},
"devDependencies": {
"#types/history": "^4.6.2",
"#types/jest": "^22.2.2",
"#types/node": "^9.6.2",
"#types/react-dom": "^16.0.4",
"typescript": "^2.9.2"
}
}
I'm tried for about 3 days but still no luck . Please help me with this.
It was able to work again after downgrading one below version for them.
i'm in vue project, and build/webpack.base.conf.js add
{
test: /\.js$/,
loader: 'babel-loader',
include: [
resolve('src'),
resolve('test'),
resolve('node_modules/webpack-dev-server/client'),
resolve('node_modules/web3-eth-accounts/lib'),
resolve('node_modules/web3-core-helpers/lib'),
resolve('node_modules/web3-eth-contract/lib'),
resolve('node_modules/web3-core-method/lib')
]
},
the error reason is web3.js syntax not support {...options, ...otherOptions}, it is
Object.assing(options, {
a: 'xxx',
b: 'xxx
})
I have a VueJS app scaffolded with VueCLI 3 that I would like to deploy. The development version run with npm run serve works fine and everything works perfectly. But when running with npm run build and then serve -s dist I'm getting a plethora of errors. Some of those errors are:
Error: "Unable to find required dependency e"
TypeError: "this.userDataStorage is undefined"
TypeError: "this.user is undefined
Unhandled promise rejection TypeError: "t.auth is undefined"
It's like the dist package generated might be missing something, and I have no clue on what's wrong or what I might be missing. Any help to unblock this issue will be much appreciated. Maybe it could be one dependency (like vue-inject, which I use as IoC framework) could be the culprit?
Here are my packages.json and vue.config.js respectively:
{
"name": "myapp",
"description": "",
"keywords": [],
"version": "0.1.0",
"dependencies": {
"bootstrap": "3.3.2",
"d3": "^5.7.0",
"d3-gantt-chart": "^0.2.8",
"d3-layout-timeline": "^1.0.3",
"d3-transition": "^1.1.1",
"d3plus-text": "^0.9.32",
"foundation-sites": "^6.5.0-rc.3",
"jquery": "^3.3.1",
"jquery-ui": "^1.12.1",
"jwt-decode": "^2.2.0",
"lodash": "^4.17.11",
"tinycolor": "latest",
"underscore": "^1.9.1",
"vue": "^2.5.17",
"vue-formio": "^3.0.1",
"vue-inject": "^2.1.1",
"vue-router": "^3.0.1",
"vue-slider-component": "^2.8.0",
"vuejs-datepicker": "^1.5.3",
"vuex": "^3.1.0",
"what-input": "^5.1.2"
},
"devDependencies": {
"#vue/cli-plugin-babel": "^3.3.0",
"#vue/cli-plugin-e2e-nightwatch": "^3.3.0",
"#vue/cli-plugin-eslint": "^3.3.0",
"#vue/cli-plugin-unit-jest": "^3.3.0",
"#vue/cli-service": "^3.3.1",
"#vue/eslint-config-prettier": "^4.0.1",
"#vue/test-utils": "^1.0.0-beta.28",
"ajv": "^6.5.3",
"axios": "^0.18.0",
"babel-core": "^7.0.0-bridge.0",
"babel-eslint": "^10.0.1",
"babel-jest": "^23.6.0",
"babel-runtime": "^6.26.0",
"bootstrap-sass": "^3.3.7",
"css-loader": "^1.0.1",
"eslint": "^5.12.1",
"eslint-config-prettier": "^3.6.0",
"eslint-config-standard": "^12.0.0",
"eslint-friendly-formatter": "^4.0.1",
"eslint-loader": "^2.1.1",
"eslint-plugin-html": "^5.0.0",
"eslint-plugin-import": "^2.15.0",
"eslint-plugin-node": "^8.0.1",
"eslint-plugin-prettier": "^3.0.1",
"eslint-plugin-promise": "^4.0.1",
"eslint-plugin-standard": "^4.0.0",
"eslint-plugin-vue": "^5.1.0",
"husky": "^1.3.1",
"lint-staged": "^8.1.0",
"node-sass": "^4.11.0",
"sass-loader": "^7.1.0",
"script-loader": "^0.7.2",
"stylelint": "^9.10.1",
"stylelint-config-sass-guidelines": "^5.3.0",
"stylelint-config-standard": "^18.2.0",
"vue-drag-drop": "^1.1.4",
"vue-hot-reload-api": "^2.3.0",
"vue-template-compiler": "^2.5.17",
"vue2-dropzone": "^3.5.2"
},
"author": "devops#myapp.io",
"contributors": [],
"license": "Unlicense",
"readmeFilename": "Readme.md",
"repository": {
"type": "git",
"url": ""
},
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint",
"test:e2e": "vue-cli-service test:e2e",
"test:unit": "vue-cli-service test:unit"
},
"husky": {
"hooks": {
"pre-commit": "lint-staged"
}
},
"lint-staged": {
"*.js": [
"vue-cli-service lint",
"git add"
],
"*.vue": [
"vue-cli-service lint",
"git add"
],
"*.css": [
"stylelint --fix",
"git add"
],
"*.scss": [
"stylelint --syntax=scss",
"git add"
]
}
}
var webpack = require("webpack");
var path = require("path");
module.exports = {
configureWebpack: {
plugins: [
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery",
jquery: "jquery"
})
],
resolve: {
extensions: [".js", ".vue", ".json"],
alias: {
jquery: "jquery/src/jquery.js",
"jquery-ui": "jquery-ui",
d3: "d3",
modules: path.join(__dirname, "node_modules")
}
}
}
};
So I have a React app that I'm working on, I'm building the app with Visual Studio (ASP.NET Web API 2.0 for the backend). I had to make some pretty major changes to the app so I created a separate branch for it. I added a few JSX files to the project in the new branch and when I try to require them in a file like so:
const Reports = require("./Reports/Reports.jsx");
I get an error: "Uncaught Error: Cannot find Module ./Reports/Reports.jsx" in the web browser
It seems like webpack isn't detecting any of the newly added files on the branch, what could be the cause of this?
Here's my webpack config:
function getWebpackConfig(moreProps) {
var config = {
debug: true,
devtool: 'source-map',
entry: {
main: './src/start.jsx'
},
output: {
path: path.join(__dirname, './dist'),
filename: 'app.bundle.js'
},
module: {
loaders: [{
test: /\.jsx$|\.js$/,
loader: 'babel-loader',
exclude: /node_modules/,
query: {
presets: ['es2015', 'react']
}
},
{
test: /\.less$/,
loader: "style-loader!css-loader!less-loader"
}]
},
resolve: {
alias: {
"~": path.resolve("./src")
},
extensions: ['', '.js', '.jsx']
}
};
config = Object.assign({}, config, moreProps);
return config;
}
Here's my package.json containing the node_modules installed in the directory of my project:
{
"name": "internal auditing site",
"version": "1.0.0",
"description": "Web Client for internal auditing site",
"repository": "~company name excluded for StackOverflow~",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"dependencies": {
"babel-polyfill": "^6.16.0",
"lodash": "^4.11.1",
"moment": "^2.12.0",
"node-uuid": "^1.4.7",
"path": "^0.12.7",
"react": "^15.0.1",
"react-dom": "^15.0.1",
"react-redux": "^4.4.4",
"redux": "^3.4.0",
"redux-thunk": "^2.0.1",
"webpack": "^1.13.3",
"whatwg-fetch": "^0.11.0"
},
"devDependencies": {
"babel": "^6.5.2",
"babel-core": "^6.7.6",
"babel-loader": "^6.2.4",
"babel-preset-es2015": "^6.6.0",
"babel-preset-react": "^6.5.0",
"babel-runtime": "^6.6.1",
"css-loader": "^0.23.1",
"del": "^2.2.0",
"extract-text-webpack-plugin": "^1.0.1",
"gulp": "^3.9.1",
"gulp-replace": "^0.5.4",
"gulp-util": "^3.0.7",
"history": "^2.0.1",
"less": "^2.7.1",
"less-loader": "^2.2.3",
"object-assign": "^4.0.1",
"style-loader": "^0.13.1",
"webpack": "^1.13.3"
}
}
I'm also not entirely sure if this is an issue with Webpack or Team Foundation Server.
I've tried looking up in the internet, but I can't find the solution for this error.
Essentially, when I run my app in my localhost via npm start, it runs without a problem.
However, when I switch to git branch gh-pages to host in the gh-pages, I see the following error in my console.log
Uncaught Invariant Violation: Minified React error #37
_registerComponent(...): Target container is not a DOM element is what error #37 means.
Link to Git App Repository gh-pages branch
Here's my current setup:
webpack.config.js
var path = require('path');
var webpack = require('webpack');
var ghpages = require('gh-pages');
var WriteFilePlugin = require('write-file-webpack-plugin');
module.exports = {
devtool: 'source-map',
entry: [
'./src/index.js'
],
output: {
publicPath: '/',
filename: 'bundle.js',
sourceMapFilename: "./bundle.js.map",
path: path.join(__dirname, './static')
},
module: {
loaders: [{
exclude: /node_modules/,
loader: 'babel',
query: {
presets: ['react', 'es2015', 'stage-1']
}
},{
test: /\.s?css$/,
loaders: ['style','css','sass'],
include: path.join(__dirname, 'src')
}]
},
resolve: {
extensions: ['', '.js', '.jsx'],
alias: {
'jquery': path.join(__dirname, 'node_modules/jquery/dist/jquery'),
}
},
devServer: {
historyApiFallback: true,
contentBase: './',
outputPath: path.join(__dirname, './dist')
}
};
package.json
{
"name": "recipe-box",
"version": "1.0.0",
"description": "Portfolio",
"main": "index.js",
"repository": "",
"scripts": {
"start": "node ./node_modules/webpack-dev-server/bin/webpack-dev-server.js",
"test": "mocha --compilers js:babel-core/register --require ./test/test_helper.js --recursive ./test",
"test:watch": "npm run test -- --watch",
"postinstall": "webpack -p"
},
"author": "",
"license": "ISC",
"devDependencies": {
"babel-core": "^6.2.1",
"babel-loader": "^6.2.0",
"babel-preset-es2015": "^6.1.18",
"babel-preset-react": "^6.1.18",
"chai": "^3.5.0",
"chai-jquery": "^2.0.0",
"file-loader": "^0.9.0",
"gh-pages": "^0.11.0",
"image-webpack-loader": "^2.0.0",
"jquery": "^3.1.0",
"jsdom": "^9.5.0",
"mocha": "^3.0.2",
"node-sass": "^3.8.0",
"react-addons-test-utils": "^15.3.1",
"webpack": "^1.13.2",
"webpack-dev-server": "^1.14.0",
"write-file-webpack-plugin": "^3.3.0"
},
"dependencies": {
"babel-preset-stage-1": "^6.1.18",
"css-loader": "^0.25.0",
"express": "^4.14.0",
"jquery": "^2.2.4",
"lodash": "^4.16.1",
"materialize-css": "^0.97.7",
"node-sass": "^3.8.0",
"react": "^15.3.1",
"react-bootstrap": "^0.30.3",
"react-dom": "^15.3.1 ",
"react-materialize": "^0.16.4",
"react-redux": "^4.0.0",
"react-router": "^2.0.1",
"react-tap-event-plugin": "^1.0.0",
"redux": "^3.0.4",
"redux-logger": "^2.6.1",
"sass-loader": "^4.0.0",
"shortid": "^2.2.6",
"style-loader": "^0.13.1"
}
}
Answered my own question
It looked like I had to move bundle.js out from dist folder to the same directory where my index.html was.