I have style-loader, css-loader, sass-loader and node-sass installed. And i think the webpack.config file is set up properly...although it seems I'm missing something. please help!
package.json
{
"name": "pluralsight-redux-starter",
"version": "1.0.0",
"description": "Starter kit for React and Redux Pluralsight course by Cory House",
"author": "Cory House",
"license": "MIT",
"//": "alternative for this include gulp and grunt",
"scripts": {
"//": "react specific library, you can use redux with other libraries as well, like angular etc...",
"prestart": "babel-node tools/startMessage.js",
"start": "npm-run-all --parallel open:src lint:watch test:watch",
"open:src": "babel-node tools/srcServer.js",
"lint": "node_modules/.bin/esw webpack.config.* src tools",
"lint:watch": "npm run lint -- --watch",
"test": "mocha --reporter spec tools/testSetup.js \"src/**/*.test.js\"",
"test:watch": "npm run test -- --watch",
"clean-dist": "npm run remove-dist && mkdir dist",
"prebuild": "npm-run-all clean-dist test link build:html",
"build": "babel-node tools/build.js",
"postbuild": "babel-node tools/distServer.js"
},
"dependencies": {
"babel-polyfill": "6.8.0",
"bootstrap": "3.3.6",
"css-loader": "^0.23.1",
"jquery": "2.2.3",
"node-sass": "^3.8.0",
"react": "15.1.0",
"react-dom": "15.0.2",
"react-redux": "4.4.5",
"react-router": "2.4.0",
"react-router-redux": "4.0.4",
"react-toolbox": "^1.0.1",
"redux": "3.5.2",
"redux-thunk": "2.0.1",
"sass-loader": "^0.5.0",
"style-loader": "^0.13.1",
"toastr": "2.1.2"
},
"devDependencies": {
"babel-cli": "6.8.0",
"babel-core": "6.8.0",
"babel-loader": "6.2.4",
"babel-plugin-react-display-name": "2.0.0",
"babel-preset-es2015": "6.6.0",
"babel-preset-react": "6.5.0",
"babel-preset-react-hmre": "1.1.1",
"babel-register": "6.8.0",
"colors": "1.1.2",
"compression": "1.6.1",
"cross-env": "1.0.7",
"css-loader": "0.23.1",
"enzyme": "2.2.0",
"eslint": "2.9.0",
"eslint-plugin-import": "1.6.1",
"eslint-plugin-react": "5.0.1",
"eslint-watch": "2.1.11",
"eventsource-polyfill": "0.9.6",
"expect": "1.19.0",
"express": "4.13.4",
"extract-text-webpack-plugin": "1.0.1",
"file-loader": "0.8.5",
"jsdom": "8.5.0",
"mocha": "2.4.5",
"nock": "8.0.0",
"npm-run-all": "1.8.0",
"normalize.css": "^4.0.0",
"react-addons-css-transition-group": "^15.0.0",
"open": "0.0.5",
"postcss-loader": "0.8.2",
"react": "^15.0.2",
"react-addons-test-utils": "15.0.2",
"redux-immutable-state-invariant": "1.2.3",
"redux-mock-store": "1.0.2",
"rimraf": "2.5.2",
"sass-loader": "0.5",
"style-loader": "0.13.1",
"url-loader": "0.5.7",
"webpack": "1.13.0",
"webpack-dev-middleware": "1.6.1",
"webpack-hot-middleware": "2.10.0"
},
"repository": {
"type": "git",
"url": "https://github.com/coryhouse/pluralsight-redux-starter"
}
}
webpack.config.dev.js
import webpack from 'webpack';
import path from 'path';
const ExtractTextPlugin = require('extract-text-webpack-plugin');
export default {
debug: true,
devtool: 'cheap-module-eval-source-map',
noInfo: false,
entry: [
'eventsource-polyfill', // necessary for hot reloading with IE
'webpack-hot-middleware/client?reload=true', //note that it reloads the page if hot module reloading fails.
'./src/index.js'
],
target: 'web',
output: {
path: __dirname + '/dist', // Note: Physical files are only output by the production build task `npm run build`.
publicPath: '/',
filename: 'bundle.js'
},
devServer: {
contentBase: './src'
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new webpack.NoErrorsPlugin()
],
resolve: {
extensions: ['', '.css', '.scss', '.js']
},
// Tells webpack the types of files that we want it to handle.
module: {
loaders: [
{test: /\.js$/, include: path.join(__dirname, 'src'), loaders: ['babel']},
{test: /\.s?css$/, loaders: ['style', 'css', 'sass']},
{test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: 'file'},
{test: /\.(woff|woff2)$/, loader: 'url?prefix=font/&limit=5000'},
{test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=application/octet-stream'},
{test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=image/svg+xml'}
]
}
};
error message in console:
SyntaxError: /Users/Macbook/projects/pluralsight-redux-starter/src/styles/test.scss: Unexpected token (1:5)
> 1 | form {
| ^
2 | h1 {
3 | color: red;
4 | }
at Parser.pp.raise (/Users/Macbook/projects/pluralsight-redux-starter/node_modules/babylon/lib/parser/location.js:22:13)
at Parser.pp.unexpected (/Users/Macbook/projects/pluralsight-redux-starter/node_modules/babylon/lib/parser/util.js:89:8)
at Parser.pp.semicolon (/Users/Macbook/projects/pluralsight-redux-starter/node_modules/babylon/lib/parser/util.js:76:38)
at Parser.pp.parseExpressionStatement (/Users/Macbook/projects/pluralsight-redux-starter/node_modules/babylon/lib/parser/statement.js:499:8)
at Parser.parseExpressionStatement (/Users/Macbook/projects/pluralsight-redux-starter/node_modules/babylon/lib/plugins/flow.js:52:20)
at Parser.pp.parseStatement (/Users/Macbook/projects/pluralsight-redux-starter/node_modules/babylon/lib/parser/statement.js:168:17)
at Parser.parseStatement (/Users/Macbook/projects/pluralsight-redux-starter/node_modules/babylon/lib/plugins/flow.js:30:22)
at Parser.pp.parseBlockBody (/Users/Macbook/projects/pluralsight-redux-starter/node_modules/babylon/lib/parser/statement.js:529:21)
at Parser.pp.parseTopLevel (/Users/Macbook/projects/pluralsight-redux-starter/node_modules/babylon/lib/parser/statement.js:36:8)
at Parser.parse (/Users/Macbook/projects/pluralsight-redux-starter/node_modules/babylon/lib/parser/index.js:129:19)
at parse (/Users/Macbook/projects/pluralsight-redux-starter/node_modules/babylon/lib/index.js:47:47)
at File.parse (/Users/Macbook/projects/pluralsight-redux-starter/node_modules/babel-core/lib/transformation/file/index.js:540:58)
at File.parseCode (/Users/Macbook/projects/pluralsight-redux-starter/node_modules/babel-core/lib/transformation/file/index.js:626:20)
at /Users/Macbook/projects/pluralsight-redux-starter/node_modules/babel-core/lib/transformation/pipeline.js:52:12
at File.wrap (/Users/Macbook/projects/pluralsight-redux-starter/node_modules/babel-core/lib/transformation/file/index.js:586:16)
at Pipeline.transform (/Users/Macbook/projects/pluralsight-redux-starter/node_modules/babel-core/lib/transformation/pipeline.js:50:17)
at Object.transformFileSync (/Users/Macbook/projects/pluralsight-redux-starter/node_modules/babel-core/lib/api/node.js:152:10)
at compile (/Users/Macbook/projects/pluralsight-redux-starter/node_modules/babel-register/lib/node.js:129:20)
at loader (/Users/Macbook/projects/pluralsight-redux-starter/node_modules/babel-register/lib/node.js:158:14)
at Object.require.extensions.(anonymous function) [as .js] (/Users/Macbook/projects/pluralsight-redux-starter/node_modules/babel-register/lib/node.js:168:7)
at Module.load (module.js:458:32)
at tryModuleLoad (module.js:417:12)
at Function.Module._load (module.js:409:3)
at Module.require (module.js:468:17)
at require (internal/module.js:20:19)
at Object.<anonymous> (CourseForm.js:4:1)
at Module._compile (module.js:541:32)
at loader (/Users/Macbook/projects/pluralsight-redux-starter/node_modules/babel-register/lib/node.js:158:5)
at Object.require.extensions.(anonymous function) [as .js] (/Users/Macbook/projects/pluralsight-redux-starter/node_modules/babel-register/lib/node.js:168:7)
at Module.load (module.js:458:32)
at tryModuleLoad (module.js:417:12)
at Function.Module._load (module.js:409:3)
at Module.require (module.js:468:17)
at require (internal/module.js:20:19)
at Object.<anonymous> (CourseForm.Enzyme.test.js:12:1)
at Module._compile (module.js:541:32)
at loader (/Users/Macbook/projects/pluralsight-redux-starter/node_modules/babel-register/lib/node.js:158:5)
at Object.require.extensions.(anonymous function) [as .js] (/Users/Macbook/projects/pluralsight-redux-starter/node_modules/babel-register/lib/node.js:168:7)
at Module.load (module.js:458:32)
at tryModuleLoad (module.js:417:12)
at Function.Module._load (module.js:409:3)
at Module.require (module.js:468:17)
at require (internal/module.js:20:19)
at /Users/Macbook/projects/pluralsight-redux-starter/node_modules/mocha/lib/mocha.js:219:27
at Array.forEach (native)
at Mocha.loadFiles (/Users/Macbook/projects/pluralsight-redux-starter/node_modules/mocha/lib/mocha.js:216:14)
at Mocha.run (/Users/Macbook/projects/pluralsight-redux-starter/node_modules/mocha/lib/mocha.js:468:10)
at loadAndRun (/Users/Macbook/projects/pluralsight-redux-starter/node_modules/mocha/bin/_mocha:359:22)
at Object.<anonymous> (/Users/Macbook/projects/pluralsight-redux-starter/node_modules/mocha/bin/_mocha:376:3)
at Module._compile (module.js:541:32)
at Object.Module._extensions..js (module.js:550:10)
at Module.load (module.js:458:32)
at tryModuleLoad (module.js:417:12)
at Function.Module._load (module.js:409:3)
at Function.Module.runMain (module.js:575:10)
at startup (node.js:160:18)
at node.js:449:3
test.scss
form {
h1 {
color: red;
}
}
webpack-validator output:
import webpack from webpack;
seems to be causing a problem for webpack-validator, not sure why this is. I'm not convinced it is related to my scss loading issue.
==> webpack-validator webpack.config.dev.js
Reading: webpack.config.dev.js
/Users/Macbook/projects/pluralsight-redux-starter/webpack.config.dev.js:1
(function (exports, require, module, __filename, __dirname) { import webpack from 'webpack';
^^^^^^
SyntaxError: Unexpected token import
at Object.exports.runInThisContext (vm.js:53:16)
at Module._compile (module.js:513:28)
at Object.Module._extensions..js (module.js:550:10)
at Module.load (module.js:458:32)
at tryModuleLoad (module.js:417:12)
at Function.Module._load (module.js:409:3)
at Module.require (module.js:468:17)
at require (internal/module.js:20:19)
at validateConfig (/usr/local/lib/node_modules/webpack-validator/dist/bin/validate-config.js:13:16)
at /usr/local/lib/node_modules/webpack-validator/dist/bin/webpack-validator.js:35:32
From the error it looks like you are just missing a brace somewhere in your .scss
SyntaxError: /Users/Macbook/projects/pluralsight-redux-starter/src/styles/test.scss: Unexpected token (1:5)
> 1 | form {
| ^
2 | h1 {
3 | color: red;
4 | }
Double check test.scss and make sure everything is fine.
Resolved the problem using the following package:
https://www.npmjs.com/package/ignore-styles
added:
mocha--require ignore-styles
to test script and problem solved.
Thanks #eblin
Can you try and extend your config to include the following:
export default {
resolve: {
extensions: ['', '.css', '.scss', '.js']
},
...
}
Problem solved.
Updated sass-loader from 0.5.0 to 3.2.0, and tweaked the webpack.config file. See below, the updated package.json and webpack.config. Allows me to use bootstrap and react-toolbox styles.
package.json
{
"name": "pluralsight-redux-starter",
"version": "1.0.0",
"description": "Starter kit for React and Redux Pluralsight course by Cory House",
"author": "Cory House",
"license": "MIT",
"//": "alternative for this include gulp and grunt",
"scripts": {
"//": "react specific library, you can use redux with other libraries as well, like angular etc...",
"prestart": "babel-node tools/startMessage.js",
"start": "npm-run-all --parallel open:src lint:watch test:watch",
"open:src": "babel-node tools/srcServer.js",
"lint": "node_modules/.bin/esw webpack.config.* src tools",
"lint:watch": "npm run lint -- --watch",
"test": "mocha --require ignore-styles --reporter spec tools/testSetup.js \"src/**/*.test.js\"",
"test:watch": "npm run test -- --watch",
"clean-dist": "npm run remove-dist && mkdir dist",
"prebuild": "npm-run-all clean-dist test link build:html",
"build": "babel-node tools/build.js",
"postbuild": "babel-node tools/distServer.js"
},
"dependencies": {
"babel-polyfill": "6.8.0",
"bootstrap": "3.3.6",
"css-loader": "^0.23.1",
"jquery": "2.2.3",
"minimatch": "^3.0.2",
"node-sass": "^3.8.0",
"react": "15.1.0",
"react-dom": "15.0.2",
"react-redux": "4.4.5",
"react-router": "2.4.0",
"react-router-redux": "4.0.4",
"react-toolbox": "^1.0.1",
"redux": "3.5.2",
"redux-thunk": "2.0.1",
"resolve-path-webpack-plugin": "^1.1.0",
"sass-loader": "^3.2.1",
"style-loader": "^0.13.1",
"toastr": "2.1.2",
"webpack-validator": "^2.2.0"
},
"devDependencies": {
"babel-cli": "6.8.0",
"babel-core": "6.8.0",
"babel-loader": "6.2.4",
"babel-plugin-react-display-name": "2.0.0",
"babel-preset-es2015": "6.6.0",
"babel-preset-react": "6.5.0",
"babel-preset-react-hmre": "1.1.1",
"babel-register": "6.8.0",
"colors": "1.1.2",
"compression": "1.6.1",
"cross-env": "1.0.7",
"css-loader": "0.23.1",
"enzyme": "2.2.0",
"eslint": "2.9.0",
"eslint-plugin-import": "1.6.1",
"eslint-plugin-react": "5.0.1",
"eslint-watch": "2.1.11",
"eventsource-polyfill": "0.9.6",
"expect": "1.19.0",
"express": "4.13.4",
"extract-text-webpack-plugin": "1.0.1",
"file-loader": "0.8.5",
"ignore-styles": "^4.0.0",
"jsdom": "8.5.0",
"mocha": "2.4.5",
"nock": "8.0.0",
"normalize.css": "^4.0.0",
"npm-run-all": "1.8.0",
"open": "0.0.5",
"postcss-loader": "0.8.2",
"react": "^15.0.2",
"react-addons-css-transition-group": "^15.0.0",
"react-addons-test-utils": "15.0.2",
"redux-immutable-state-invariant": "1.2.3",
"redux-mock-store": "1.0.2",
"rimraf": "2.5.2",
"sass-loader": "^3.2.0",
"style-loader": "0.13.1",
"toolbox-loader": "0.0.3",
"url-loader": "0.5.7",
"webpack": "1.13.0",
"webpack-dev-middleware": "1.6.1",
"webpack-hot-middleware": "2.10.0"
},
"repository": {
"type": "git",
"url": "https://github.com/coryhouse/pluralsight-redux-starter"
}
}
webpack.config.dev.js
import webpack from 'webpack';
import path from 'path';
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const modulesPath = path.join(__dirname, 'node_modules');
const autoprefixer = require('autoprefixer');
export default {
debug: true,
devtool: 'source-map',
noInfo: false,
entry: [
'eventsource-polyfill', // necessary for hot reloading with IE
'webpack-hot-middleware/client?reload=true', //note that it reloads the page if hot module reloading fails.
'./src/index.js'
],
target: 'web',
output: {
path: __dirname + '/dist', // Note: Physical files are only output by the production build task `npm run build`.
publicPath: '/',
filename: 'bundle.js'
},
devServer: {
contentBase: './src'
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new webpack.NoErrorsPlugin()
],
resolve: {
extensions: ['', '.css', '.scss', '.js', '.json'],
modulesDirectories: ['node_modules']
},
postcss: [autoprefixer],
toolbox: {
theme: path.join(__dirname, 'src/styles/variables.scss')
},
// Tells webpack the types of files that we want it to handle.
module: {
loaders: [
{test: /(\.js|\.jsx)$/,
include: path.join(__dirname, 'src'),
loaders: ['babel']
},
{
test: /\.s?css$/,
loaders: ['style', 'css', 'sass'],
exclude: /(node_modules)\/react-toolbox/
},
{
test : /(\.scss|\.css)$/,
include : /(node_modules)\/react-toolbox/,
loaders : [
require.resolve('style-loader'),
require.resolve('css-loader') + '?sourceMap&modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]',
require.resolve('sass-loader') + '?sourceMap', 'toolbox'
]
},
{test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: 'file'},
{test: /\.(woff|woff2)$/, loader: 'url?prefix=font/&limit=5000'},
{test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=application/octet-stream'},
{test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=image/svg+xml'}
]
}
};
Related
I've been trying to deploy this simple app to Heroku and my app works fine when running locally on AWS but when I try to deploy it I get error message:
bundle.js:73 Uncaught Error: Module build failed: Error: Cannot find module '#babel/plugin-proposal-class-properties' from '/app'
at Function.resolveSync [as sync] (/app/node_modules/resolve/lib/sync.js:111:15)
at resolveStandardizedName (/app/node_modules/#babel/core/lib/config/files/plugins.js:101:31)
at resolvePlugin (/app/node_modules/#babel/core/lib/config/files/plugins.js:54:10)
at loadPlugin (/app/node_modules/#babel/core/lib/config/files/plugins.js:62:20)
at createDescriptor (/app/node_modules/#babel/core/lib/config/config-descriptors.js:154:9)
at /app/node_modules/#babel/core/lib/config/config-descriptors.js:109:50
at Array.map (<anonymous>)
at createDescriptors (/app/node_modules/#babel/core/lib/config/config-descriptors.js:109:29)
at createPluginDescriptors (/app/node_modules/#babel/core/lib/config/config-descriptors.js:105:10)
at /app/node_modules/#babel/core/lib/config/config-descriptors.js:63:49
at cachedFunction (/app/node_modules/#babel/core/lib/config/caching.js:33:19)
at plugins (/app/node_modules/#babel/core/lib/config/config-descriptors.js:28:77)
at mergeChainOpts (/app/node_modules/#babel/core/lib/config/config-chain.js:314:26)
at /app/node_modules/#babel/core/lib/config/config-chain.js:278:7
at buildRootChain (/app/node_modules/#babel/core/lib/config/config-chain.js:68:29)
at loadPrivatePartialConfig (/app/node_modules/#babel/core/lib/config/partial.js:57:55)
at loadPartialConfig (/app/node_modules/#babel/core/lib/config/partial.js:82:18)
at Object.<anonymous> (/app/node_modules/babel-loader/lib/index.js:155:26)
at Generator.next (<anonymous>)
at asyncGeneratorStep (/app/node_modules/babel-loader/lib/index.js:3:103)
at _next (/app/node_modules/babel-loader/lib/index.js:5:194)
at /app/node_modules/babel-loader/lib/index.js:5:364
at Object.<anonymous> (bundle.js:73:7)
at __webpack_require__ (bundle.js:20:30)
at bundle.js:66:18
at bundle.js:69:10
My package.json file looks like this:
{
"name": "Plant-species-app",
"version": "1.0.0",
"description": "Creating a simple CRUD app with NodeJS, MongoDB, GraphQL, React and Apollo",
"main": "index.js",
"scripts": {
"heroku-postbuild": "npm install --production",
"dev": "nodemon index.js --ignore client",
"start": "npm run dev"
},
"author": "",
"license": "ISC",
"dependencies": {
"apollo-cache-inmemory": "^1.5.1",
"apollo-client": "^2.5.1",
"apollo-link-http": "^1.5.14",
"axios": "^0.15.3",
"babel-core": "^6.26.3",
"babel-loader": "^8.0.6",
"babel-preset-env": "^1.7.0",
"babel-preset-react": "^6.24.1",
"body-parser": "^1.16.0",
"connect-mongo": "^1.3.2",
"css-loader": "^0.26.1",
"dotenv": "^16.0.3",
"express": "^4.16.4",
"express-graphql": "^0.8.0",
"express-session": "^1.15.0",
"graphql": "^14.3.0",
"graphql-tag": "^2.10.1",
"html-entities": "^2.3.3",
"html-webpack-plugin": "^2.26.0",
"lodash": "^4.17.4",
"mongoose": "^5.5.7",
"nodemon": "*",
"passport": "^0.3.2",
"passport-local": "^1.0.0",
"python": "^0.0.4",
"react": "^16.8.6",
"react-apollo": "^2.5.5",
"react-dom": "^16.8.6",
"react-router": "^5.0.0",
"react-router-dom": "^5.0.0",
"style-loader": "^0.13.1",
"webpack": "^2.2.0",
"webpack-dev-middleware": "^1.9.0"
},
"engines": {
"node": "16.17.0",
"npm": "8.15.0"
},
"devDependencies": {
"#babel/core": "^7.0.0",
"#babel/plugin-proposal-class-properties": "^7.0.0",
"#babel/preset-env": "^7.0.0",
"#babel/preset-react": "^7.0.0"
}
}
.babelrc contains:
{
"presets": ["#babel/preset-env", "#babel/preset-react"],
"plugins": [
"#babel/plugin-proposal-class-properties"
]
}
Here is my webpack.config.js:
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './client/index.js',
output: {
path: '/',
filename: 'bundle.js'
},
module: {
rules: [
{
use: 'babel-loader',
test: /\.js$/,
exclude: /node_modules/
},
{
use: ['style-loader', 'css-loader'],
test: /\.css$/
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: 'client/index.html'
})
]
};
I'm struggling to figure out where the issue is, I'm assuming it's either in my .bablerc file or webpack.config.js but I also read about the potential difficulty with .babelrc loading here. I'm very new to programming so please excuse my ignorance.
I've tried moving all the babel devdependencies to dependencies in package.json with no change.
I've also tried removing the contents of the .bablerc file with no luck. If I comment out the plugins in the .babelrc file, the same error appears although #babel/plugin-proposal-class-properties is replaced by #babel/preset-env
Can anyone point me in the right direction or explain how to diagnose this issue?
Help would be greatly appreciated
On a ReactJS project, it is using webpack for building it. Everytime I run the script for production build, it is giving me a development build (getting This page is using the development build of React. from React Developer Tools). I need to get the production build.
The webpack has been configured by some other developer who's not around and I don't have any prior experience with webpack. So I am facing a really hard time to resolve the error.
package.json:
{
"name": "enquiry-form-rnd-2",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "cross-env BUILD_ENV=dev webpack-dev-server --config ./webpack.config.js --mode development --progress --colors --port 3002",
"build:stage": "BUILD_ENV=STAGE webpack --mode production",
"build:prod": "BUILD_ENV=prod webpack --mode production"
},
"author": "",
"license": "ISC",
"devDependencies": {
"#babel/core": "^7.4.4",
"#babel/plugin-proposal-class-properties": "^7.4.4",
"#babel/preset-env": "^7.4.4",
"#babel/preset-react": "^7.0.0",
"babel-loader": "^8.0.6",
"babel-plugin-transform-regenerator": "^6.26.0",
"concurrently": "^4.1.0",
"css-loader": "^2.1.1",
"gulp": "^4.0.2",
"gulp-autoprefixer": "^5.0.0",
"gulp-clean": "^0.4.0",
"gulp-install": "^1.1.0",
"gulp-open": "^3.0.1",
"gulp-sass": "^4.0.1",
"gulp-sourcemaps": "^2.6.4",
"node-sass": "^4.12.0",
"sass-loader": "^7.1.0",
"style-loader": "^0.23.1",
"url-loader": "^1.1.2",
"webpack": "^4.31.0",
"webpack-cli": "^3.3.2",
"webpack-dev-server": "^3.3.1"
},
"dependencies": {
"babel-polyfill": "^6.26.0",
"cross-env": "^5.2.0",
"google-maps-react": "^2.0.2",
"immutable": "^4.0.0-rc.12",
"moment": "^2.24.0",
"numeral": "^2.0.6",
"react": "^16.8.6",
"react-bootstrap": "^1.0.0-beta.8",
"react-datetime": "^2.16.3",
"react-dom": "^16.8.6",
"react-intl": "^2.8.0",
"react-notifications-component": "^1.1.1",
"react-redux": "^7.0.3",
"react-responsive": "^6.1.2",
"redux": "^4.0.1",
"redux-devtools-extension": "^2.13.8",
"redux-logger": "^3.0.6",
"redux-saga": "^1.0.2",
"reselect": "^4.0.0",
"styled-components": "^4.2.0",
"styled-icons": "^7.14.0",
"validator": "^11.1.0",
"whatwg-fetch": "^3.0.0"
}
}
webpack.config.js:
const webpack = require("webpack");
module.exports = {
entry: ["babel-polyfill", "./src/index.js"],
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: ["babel-loader"]
},
{ test: /\.css$/, loader: "style-loader!css-loader" },
{
test: /\.scss$/,
use: [
"style-loader", // creates style nodes from JS strings
"css-loader", // translates CSS into CommonJS
"sass-loader" // compiles Sass to CSS, using Node Sass by default
]
},
{
test: /\.(pdf|jpg|png|gif|svg|ico)$/,
use: [
{
loader: "url-loader"
}
]
},
{
test: /\.(woff|woff2|eot|ttf|otf)$/,
loader: "file-loader"
}
]
},
resolve: {
extensions: ["*", ".js", ".jsx", "css"]
},
output: {
path: __dirname + "/build",
publicPath: "/",
filename: "bundle.js"
},
devServer: {
contentBase: "./dist",
host: "172.16.228.94",
// host: "192.168.2.108",
port: 3002
},
plugins: [
new webpack.DefinePlugin({
"process.env.NODE_ENV": JSON.stringify(process.env.NODE_ENV),
"process.env.DEBUG": JSON.stringify(process.env.BUILD_ENV),
"process.env.BUILD_ENV": JSON.stringify(process.env.BUILD_ENV)
})
]
};
As soon as I import styled-components (import styled from 'styled-components';) into my react app I get the following error:
Uncaught TypeError: __webpack_require__.i(...) is not a function
at Object.eval (styled-components.br…er.esm.js?60a8:1670)
at eval (318:2534)
at Object.<anonymous> (bundle.js:3892)
at __webpack_require__ (bundle.js:20)
at eval (app.js?fbdb:5)
at Object.<anonymous> (bundle.js:1609)
at __webpack_require__ (bundle.js:20)
at eval (index.js?c3ed:7)
at Object.<anonymous> (bundle.js:1967)
at __webpack_require__ (bundle.js:20)
(anonymous) # styled-components.br…er.esm.js?60a8:1670
(anonymous) # 318:2534
(anonymous) # bundle.js:3892
__webpack_require__ # bundle.js:20
(anonymous) # app.js?fbdb:5
(anonymous) # bundle.js:1609
__webpack_require__ # bundle.js:20
(anonymous) # index.js?c3ed:7
(anonymous) # bundle.js:1967
__webpack_require__ # bundle.js:20
(anonymous) # bundle.js:77
(anonymous) # bundle.js:80
My webpack.config file 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})
]
};
Any idea what could be causing this?
Here is my package.json:
{
"name": "cryptoApp",
"version": "1.0.0",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack",
"lint": "./node_modules/eslint/bin/eslint.js client/src",
"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": {
"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",
"nodemon": "^1.11.0",
"passport": "^0.3.2",
"passport-google-oauth2": "^0.1.6",
"pg": "^6.2.4",
"pg-hstore": "^2.3.2",
"prop-types": "^15.6.2",
"react": "^15.5.4",
"react-dom": "^15.5.4",
"react-redux": "^5.0.4",
"react-router": "^4.1.1",
"react-router-dom": "^4.1.1",
"redux": "^3.6.0",
"redux-devtools-extension": "^2.13.0",
"redux-logger": "^3.0.1",
"redux-thunk": "^2.2.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-eslint": "^10.0.1",
"babel-loader": "^7.0.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-plugin-import": "^2.16.0",
"eslint-plugin-jsx-a11y": "^6.2.1",
"eslint-plugin-react": "^7.12.4",
"node-sass": "^4.5.2",
"sass-loader": "^6.0.3",
"style-loader": "^0.16.1",
"webpack": "^2.4.1"
}
}
Look at the following line in the error traceback:
at Object.eval (styled-components.br…er.esm.js?60a8:1670)
Lets take a look at that line in node_modules/styled-components/dist/styled-components.browser.esm.js. You'll see the following:
var ThemeContext = createContext();
createContext was introduced to the context api in React v16.x, see here. As per your package.json, you are using React v15.5.4, hence the error.
You have 2 options: (1) upgrade react to v16.x or (2) downgrade styled-components to v3.x - this will do it because styled-components v3.x uses the old react context api.
Also, you can read here about why your code breaks when using multiple versions of react at the same time.
I updated my project's react version from 15.3.1 to 16.2.0. I'm getting the following runtime error message.
Uncaught TypeError: Cannot read property 'bool' of undefined
at eval (Transition.js?0efa:259)
at Object.<anonymous> (bundle.js:4059)
at __webpack_require__ (bundle.js:1337)
at fn (bundle.js:744)
at eval (398:19)
at Object.<anonymous> (bundle.js:3348)
at __webpack_require__ (bundle.js:1337)
at fn (bundle.js:744)
at eval (99:30)
at Object.<anonymous> (bundle.js:1647)
I did the update gradually and the app worked well in 15.6.2. The error started appearing after I updated it to 16.0.0. I updated it to 16.2.0 hoping it would resolve it. But no luck. My webpack.config.js and package.json is below
package.json
{
"name": "myProject",
"version": "28.0.0",
"description": "New front end",
"main": "main.js",
"scripts": {
"test": "jest",
"test-coverage": "jest --coverage",
"dev": "webpack --config webpack.config.js -d --watch",
"build": "webpack --config ./webpack.config.production.js --progress -p",
"start": "webpack-dev-server --config ./webpack.config.js --hot"
},
"repository": "",
"author": "Sarani",
"license": "BSD",
"dependencies": {
"babel": "~6.5.2",
"babel-core": "~6.13.2",
"babel-loader": "~6.2.4",
"babel-polyfill": "~6.16.0",
"babel-preset-es2015": "~6.13.2",
"babel-preset-react": "~6.11.1",
"create-react-class": "^15.6.3",
"css-loader": "~0.18.0",
"file-loader": "~0.9.0",
"isomorphic-fetch": "~2.2.1",
"json-loader": "~0.5.4",
"less": "~2.7.1",
"less-loader": "~2.2.3",
"moment-range": "~3.0.3",
"moment-timezone": "~0.5.13",
"prop-types": "^15.6.0",
"react": "^16.0.0",
"react-bootstrap": "~0.30.2",
"react-dom": "^16.0.0",
"react-redux": "~4.4.5",
"react-router": "^3.2.0",
"redux": "~3.5.2",
"redux-immutable-state-invariant": "~1.2.3",
"redux-thunk": "~2.1.0",
"style-loader": "~0.13.1",
"url-loader": "~0.5.7",
"webpack": "^3.10.0"
},
"devDependencies": {
"babel-eslint": "~6.1.2",
"babel-jest": "~14.1.0",
"eslint": "~3.5.0",
"eslint-config-airbnb": "~11.1.0",
"eslint-loader": "~1.5.0",
"eslint-plugin-import": "~1.15.0",
"eslint-plugin-jsx-a11y": "~2.2.2",
"eslint-plugin-react": "~6.2.2",
"gulp": "~3.9.1",
"gulp-csslint": "~1.0.0",
"gulp-watch": "~4.3.10",
"jest": "~14.1.0",
"jest-cli": "~14.1.0",
"react-a11y": "~0.3.3",
"react-addons-test-utils": "~15.3.2",
"react-test-renderer": "~15.3.1",
"redux-mock-store": "~1.2.1",
"webpack-dev-server": "~1.14.1"
},
"jest": {
"automock": false,
"moduleNameMapper": {
"^.+\\.(css|less)$": "<rootDir>/__mocks__/styleMock.js",
"^.+\\.(gif|ttf|eot|svg)$": "<rootDir>/__mocks__/fileMock.js",
"^config$": "<rootDir>/__mocks__/configMock.js"
},
"moduleFileExtensions": [
"js",
"jsx"
]
}
}
webpack.config.js
var webpack = require('webpack');
var path = require('path');
module.exports = {
devtool: 'eval-source-map',
entry: {
bundle: ['babel-polyfill', './Main.js'],
bundleIntegrated: ['babel-polyfill', './MainIntegrated.js']
},
output: {
path: path.resolve(__dirname, '../assets/myProject'),
filename: '../assets/myProject/[name].js'
},
target: 'web',
devServer: {
inline: true,
port: 8080,
proxy: {
'/myct/**': {
target: 'http://localhost:9000',
secure: false,
changeOrigin: true
}
}
},
plugins: [
new webpack.optimize.OccurrenceOrderPlugin(),
new webpack.HotModuleReplacementPlugin()
],
resolve: {
extensions: ['.js', '.jsx'],
alias: {
config: path.join(__dirname, 'config/config.dev')
}
},
module: {
rules: [
{
test: /.(js|jsx)$/,
enforce: 'pre',
exclude: /node_modules/,
use: [
{
loader: "eslint-loader",
}
],
},
{
test: /\.(js|jsx)$/,
exclude: /(node_modules|__tests__)/,
loader: "babel-loader",
},
{
test: /\.css$/,
use: [
"style-loader",
"css-loader",
],
},
{
test: /\.less$/,
use: [
"style-loader",
"css-loader",
"less-loader",
],
},
{
test: /\.woff($|\?)|\.woff2($|\?)|\.ttf($|\?)|\.eot($|\?)|\.svg($|\?)/,
use: [
{
loader: "file-loader?name=../assets/myProject/fonts/[name].[ext]",
},
],
},
]
}
}
Any ideas on how to fix this issue. Thanks in advance :)
I had the same issue.
If you run yarn info react-bootstrap peerDependencies, you will see the following:
{
react: '>=16.8.0',
'react-dom': '>=16.8.0'
}
So, make sure the versions are correct.
I've fixed it by running yarn add react#latest and also yarn add react-dom#latest. In addition, I set react-bootstrap to 0.32.4, as version 1.0.0 threw different errors.
"react": "^16.13.1",
"react-bootstrap": "0.32.4",
"react-dom": "^16.13.1",
Thank you all for your help. I managed to fix the issue by updating the following to latest versions. The solution can be found here
"react": "latest",
"react-dom": "latest",
"react-bootstrap": "latest",
"react-router-dom": "latest"
I am using react-slingshot to build my React applications, and I am trying to integrate Bootstrap v4 into it and not having any luck with getting the JavaScript working.
So far, I have a package.json file that looks like the following:
{
"name": "react-slingshot",
"version": "5.0.0",
"description": "Starter kit for creating apps with React and Redux",
"engines": {
"npm": ">=3"
},
"scripts": {
"preinstall": "node tools/nodeVersionCheck.js",
"setup": "node tools/setup/setupMessage.js && npm install && node tools/setup/setup.js",
"remove-demo": "babel-node tools/removeDemo.js",
"start-message": "babel-node tools/startMessage.js",
"prestart": "npm-run-all --parallel start-message remove-dist",
"start": "npm-run-all --parallel test:watch open:src lint:watch",
"open:src": "babel-node tools/srcServer.js",
"open:dist": "babel-node tools/distServer.js",
"lint": "esw webpack.config.* src tools --color",
"lint:watch": "npm run lint -- --watch",
"clean-dist": "npm run remove-dist && mkdir dist",
"remove-dist": "rimraf ./dist",
"prebuild": "npm run clean-dist && npm run lint && npm run test",
"build": "babel-node tools/build.js && npm run open:dist",
"test": "mocha tools/testSetup.js \"src/**/*.spec.js\" --reporter progress",
"test:cover": "babel-node node_modules/isparta/bin/isparta cover --root src --report html node_modules/mocha/bin/_mocha -- --require ./tools/testSetup.js \"src/**/*.spec.js\" --reporter progress",
"test:cover:travis": "babel-node node_modules/isparta/bin/isparta cover --root src --report lcovonly _mocha -- --require ./tools/testSetup.js \"src/**/*.spec.js\" && cat ./coverage/lcov.info | node_modules/coveralls/bin/coveralls.js",
"test:watch": "npm run test -- --watch",
"open:cover": "npm run test:cover && open coverage/index.html"
},
"author": "Cory House",
"license": "MIT",
"dependencies": {
"bootstrap": "4.0.0-alpha.4",
"bootstrap-loader": "2.0.0-beta.12",
"imports-loader": "0.6.5",
"jquery": "3.1.1",
"moment": "2.15.1",
"object-assign": "4.1.0",
"react": "15.3.1",
"react-addons-transition-group": "15.3.2",
"react-dom": "15.3.1",
"react-redux": "4.4.5",
"react-router": "2.7.0",
"react-router-redux": "4.0.5",
"reactstrap": "3.3.2",
"redux": "3.5.2",
"redux-thunk": "2.1.0",
"tether": "1.3.7"
},
"devDependencies": {
"autoprefixer": "6.4.0",
"babel-cli": "6.14.0",
"babel-core": "6.14.0",
"babel-loader": "6.2.5",
"babel-plugin-react-display-name": "2.0.0",
"babel-plugin-transform-react-constant-elements": "6.9.1",
"babel-plugin-transform-react-remove-prop-types": "0.2.9",
"babel-preset-latest": "6.14.0",
"babel-preset-react": "6.11.1",
"babel-preset-react-hmre": "1.1.1",
"babel-preset-stage-1": "6.13.0",
"babel-register": "6.14.0",
"bootstrap": "4.0.0-alpha.4",
"browser-sync": "2.14.0",
"chai": "3.5.0",
"chalk": "1.1.3",
"connect-history-api-fallback": "1.3.0",
"coveralls": "2.11.12",
"cross-env": "2.0.1",
"css-loader": "0.24.0",
"enzyme": "2.4.1",
"eslint": "3.4.0",
"eslint-plugin-import": "1.14.0",
"eslint-plugin-jsx-a11y": "2.2.0",
"eslint-plugin-react": "6.2.0",
"eslint-watch": "2.1.14",
"extract-text-webpack-plugin": "1.0.1",
"file-loader": "0.9.0",
"html-webpack-plugin": "2.22.0",
"isparta": "4.0.0",
"mocha": "3.0.2",
"mockdate": "1.0.4",
"node-sass": "3.8.0",
"npm-run-all": "3.0.0",
"open": "0.0.5",
"postcss-loader": "0.11.0",
"prompt": "1.0.0",
"react-addons-test-utils": "15.3.1",
"redux-immutable-state-invariant": "1.2.3",
"replace": "0.3.0",
"resolve-url-loader": "1.6.0",
"rimraf": "2.5.4",
"sass-loader": "4.0.0",
"sinon": "1.17.5",
"sinon-chai": "2.8.0",
"style-loader": "0.13.1",
"url-loader": "0.5.7",
"webpack": "1.13.2",
"webpack-dev-middleware": "1.6.1",
"webpack-hot-middleware": "2.12.2",
"webpack-md5-hash": "0.0.5"
},
"keywords": [
"react",
"reactjs",
"react-router",
"hot",
"reload",
"hmr",
"live",
"edit",
"webpack",
"redux",
"flux",
"boilerplate",
"starter"
],
"repository": {
"type": "git",
"url": "https://github.com/coryhouse/react-slingshot"
}
}
I have a webpack file that looks like:
import webpack from 'webpack';
import HtmlWebpackPlugin from 'html-webpack-plugin';
import autoprefixer from 'autoprefixer';
import path from 'path';
export default {
resolve: {
extensions: ['', '.js', '.jsx']
},
debug: true,
devtool: 'eval-source-map', // more info:https://webpack.github.io/docs/build-performance.html#sourcemaps and https://webpack.github.io/docs/configuration.html#devtool
noInfo: true, // set to false to see a list of every file being bundled.
entry: [
'bootstrap-loader',
'./src/webpack-public-path',
'webpack-hot-middleware/client?reload=true',
path.resolve(__dirname, 'src/index.js') // Defining path seems necessary for this to work consistently on Windows machines.
],
target: 'web', // necessary per https://webpack.github.io/docs/testing.html#compile-and-test
output: {
path: path.resolve(__dirname, 'dist'), // Note: Physical files are only output by the production build task `npm run build`.
publicPath: '/',
filename: 'bundle.js'
},
plugins: [
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery",
"window.jQuery": "jquery",
Tether: "tether",
"window.Tether": "tether",
Tooltip: "exports?Tooltip!bootstrap/js/dist/tooltip",
Alert: "exports?Alert!bootstrap/js/dist/alert",
Button: "exports?Button!bootstrap/js/dist/button",
Carousel: "exports?Carousel!bootstrap/js/dist/carousel",
Collapse: "exports?Collapse!bootstrap/js/dist/collapse",
Dropdown: "exports?Dropdown!bootstrap/js/dist/dropdown",
Modal: "exports?Modal!bootstrap/js/dist/modal",
Popover: "exports?Popover!bootstrap/js/dist/popover",
Scrollspy: "exports?Scrollspy!bootstrap/js/dist/scrollspy",
Tab: "exports?Tab!bootstrap/js/dist/tab",
Util: "exports?Util!bootstrap/js/dist/util",
}),
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify('development'), // Tells React to build in either dev or prod modes. https://facebook.github.io/react/downloads.html (See bottom)
__DEV__: true
}),
new webpack.HotModuleReplacementPlugin(),
new webpack.NoErrorsPlugin(),
new HtmlWebpackPlugin({ // Create HTML file that includes references to bundled CSS and JS.
template: 'src/index.ejs',
minify: {
removeComments: true,
collapseWhitespace: true
},
inject: true
})
],
module: {
loaders: [
{ test: /bootstrap.+\.(jsx|js)$/, loader: 'imports?jQuery=jquery,$=jquery,this=>window' },
{test: /\.jsx?$/, exclude: /node_modules/, loaders: ['babel']},
{test: /\.eot(\?v=\d+.\d+.\d+)?$/, loader: 'file'},
{test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "url?limit=10000&mimetype=application/font-woff"},
{test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=application/octet-stream'},
{test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=image/svg+xml'},
{test: /\.(jpe?g|png|gif)$/i, loader: 'file?name=[name].[ext]'},
{test: /\.ico$/, loader: 'file?name=[name].[ext]'},
{test: /(\.css|\.scss)$/, loaders: ['style', 'css?sourceMap', 'postcss', 'sass?sourceMap']},
]
},
postcss: ()=> [autoprefixer]
};
And I am getting the following error:
ERROR in ./~/bootstrap-loader/lib/bootstrap.loader.js!./~/bootstrap-loader/no-op.js
Module build failed: Error:
Could not find bootstrap version: '3'. Did you install it?
The package is 'bootstrap' for bootstrap v4 and 'bootstrap-sass' for v3.
at Object.module.exports.pitch (/Users/ryannealmes/sites/work/andromeda/node_modules/bootstrap-loader/lib/bootstrap.loader.js:143:11)
# ./~/bootstrap-loader/loader.js 6:17-61
Child html-webpack-plugin for "index.html":
I have Googled around and found many answers around this, but none of them work. Can anyone point me in the direction I should be looking to get Bootstrap v4 JavaScript working for react-slingshot?
Are you attempting to use bootstrap v3 or v4? You have v4 installed if you are looking to use that you need to additionally have a .bootstraprc in your project root that has a minimum "bootstrapVersion": 3.
Additionally, I would move down the bootstrap-loader in your entry below the ./src/webpack-public-path as this file fixes issues relative paths to icon fonts. This was mostly an issue with bootstrap 3, but may have ill effects if not first in the list.
source