Duplicated React/Redux project resulting "async_hooks" not found - reactjs

First of all, thank you all for your attention. I'm new about react/redux code, and I have an old project that already existed and I only need to duplicate it because they need the same version with some different parameters.
So, I duplicated the old project, created a new gitlab project for it, changed what I needed(practically only text) on the duplicated project, then how it was showing many errors after "npm run build", I did:
Inside the package.json file I changed "node-sass" to use the version 4.11.0 because the old one was generating some "Module not found: Error: Cannot resolve module" kind of errors(as I said, this was a duplication from a old project that even is still running on production has many deprecated dependencies).
I deleted the package-lock.json file.
I deleted also the node_modules folder.
I did "npm install" already on the master branch of the folder to create again the node_modules.
As you can see, I just tried to delete the package-lock.json file then I deleted the node_modules folder, and finally I did "npm install", but when I tried "npm run build", the async_hooks error showed up... I'm stuck in this part.
After these basic steps, the error happened: Cannot resolve module 'async_hooks'. I tried to "npm install async_hooks" but it didn't work, I also tried to put the "async-hooks" on the package.json file but it didn't work, and finally I also tried put a new version from bluebird there but didn't work too.
How to install this "async_hooks"? Because even after doing "npm install async_hooks" it didn't work yet. I run "npm run build" but the same error happened.
See below the full result:
Module not found: Error: Cannot resolve module 'async_hooks' in C:\xampp\htdocs\careers\node_modules\bluebird\js\release
# ./~/bluebird/js/release/util.js 410:18-40
ERROR in ./~/bluebird/js/release/promise.js
Module not found: Error: Cannot resolve module 'async_hooks' in C:\xampp\htdocs\careers\node_modules\bluebird\js\release
# ./~/bluebird/js/release/promise.js 34:4-26
. Here is my package.json file:
"main": "index.js",
"repository": "git#github.com:StephenGrider/ReduxSimpleStarter.git",
"scripts": {
"start": "node ./node_modules/webpack-dev-server/bin/webpack-dev-server.js",
"build": "node ./node_modules/webpack/bin/webpack.js ",
"test": "mocha --compilers js:babel-core/register --require ./test/test_helper.js --recursive ./test",
"test:watch": "npm run test -- --watch"
},
"license": "ISC",
"engines": {
"node": "^v8.9.4"
},
"devDependencies": {
"babel-core": "^6.2.1",
"babel-eslint": "^6.1.2",
"babel-loader": "^6.2.4",
"babel-plugin-add-module-exports": "^0.2.1",
"babel-plugin-react-transform": "^2.0.2",
"babel-plugin-transform-react-constant-elements": "^6.3.13",
"babel-plugin-transform-react-inline-elements": "^6.3.13",
"babel-plugin-transform-runtime": "^6.12.0",
"babel-polyfill": "^6.9.1",
"babel-preset-es2015": "^6.1.18",
"babel-preset-es2015-node5": "^1.2.0",
"babel-preset-react": "^6.1.18",
"babel-preset-react-hmre": "^1.1.1",
"babel-preset-stage-1": "^6.1.18",
"babel-register": "^6.11.6",
"babel-runtime": "^6.11.6",
"bootstrap-loader": "^1.1.0-beta.1",
"bootstrap-sass": "^3.3.7",
"chai": "~3.5.0",
"chai-jquery": "~2.0.0",
"extract-text-webpack-plugin": "^1.0.1",
"file-loader": "^0.9.0",
"jquery": "~2.2.1",
"jsdom": "~8.1.0",
"mocha": "~2.4.5",
"node-sass": "^4.11.0",
"postcss-loader": "^0.9.1",
"react-addons-test-utils": "~0.14.7",
"resolve-url-loader": "^1.6.0",
"sass-loader": "^3.2.0",
"style-loader": "^0.13.1",
"url-loader": "^0.5.7",
"webpack": "~1.12.9",
"webpack-dev-server": "~1.14.0"
},
"dependencies": {
"axios": "~0.13.1",
"bluebird": "^3.4.1",
"css-loader": "^0.23.1",
"griddle-react": "~0.6.0",
"immutable": "^3.8.1",
"jwt-decode": "^2.2.0",
"lodash": "~3.10.1",
"moment": "^2.19.1",
"nested-property": "^0.0.7",
"numeral": "^2.0.6",
"react": "^0.14.3",
"react-datetime": "^2.10.3",
"react-dom": "^0.14.3",
"react-ga": "^2.3.5",
"react-redux": "~4.3.0",
"react-router": "~2.0.1",
"redux": "~3.1.7",
"redux-form": "^6.1.1",
"redux-logger": "^3.0.1",
"redux-thunk": "^2.2.0"
}
}
. and here is my webpack.config.js file:
var path = require('path');
module.exports = {
entry: [
'./src/index.js'
],
output: {
path: path.join(__dirname,'./js/'),
publicPath: '/js/',
filename: 'bundle.js'
},
module: {
loaders: [{
exclude: /node_modules/,
loader: 'babel',
query: {
presets: ['react', 'es2015', 'stage-1']
}
}]
},
resolve: {
extensions: ['', '.js', '.jsx']
},
devServer: {
historyApiFallback: true,
contentBase: './'
}
};
Any ideas?

Related

Uncaught Error: Module build failed: Cannot find module'#babel/plugin-proposal-class-properties'

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

Reactjs - /dist folder has only 2 files - bundle.js and bundle.js.map - doesn't include any other files

I have a reactjs app - which is running well in dev environment. I mean, when I use
npm start
It's running in localhost:8080 without any issues.
When I try to execute the same with below command, to generate a distribution folder for static hosting, somewhere in AWS S3. That's where the problem.
npm run build
Below is my output folder structure when I execute the above command:
dist
bundle.js
bundle.js.map
public
index.html
I have gone through these posts (regarding warning which I'm getting related to bundle.js file sizes & this link) and did modify as per the suggestion, but I haven't got the desired outcome.
Below is my package.json for reference:
{
"name": "react-starter",
"version": "1.1.5",
"description": "example",
"main": "dist/bundle.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "webpack-dev-server --config ./webpack.dev.js",
"build": "webpack --max_old_space_size=4096 --config ./webpack.prod.js --progress --profile --colors"
},
"homepage": ".",
"keywords": [
"react"
],
"devDependencies": {
"babel-cli": "^6.26.0",
"babel-core": "^6.26.3",
"babel-eslint": "^10.0.2",
"babel-loader": "^7.1.5",
"babel-plugin-transform-class-properties": "^6.24.1",
"babel-plugin-transform-object-rest-spread": "^6.26.0",
"babel-preset-env": "^1.7.0",
"babel-preset-react": "^6.24.1",
"clean-webpack-plugin": "^0.1.19",
"css-loader": "^3.2.0",
"dotenv": "^6.2.0",
"eslint": "^5.16.0",
"eslint-config-airbnb": "^17.1.0",
"eslint-plugin-import": "^2.17.3",
"eslint-plugin-jsx-a11y": "^6.2.1",
"eslint-plugin-react": "^7.13.0",
"eslint-plugin-react-hooks": "^1.6.0",
"file-loader": "^1.1.11",
"node-sass": "^4.12.0",
"react": "^16.8.6",
"react-dom": "^16.8.6",
"sass-loader": "^7.1.0",
"style-loader": "^0.21.0",
"stylelint": "^9.10.1",
"stylelint-config-standard": "^18.3.0",
"uglifyjs-webpack-plugin": "^2.1.3",
"webpack": "^4.34.0",
"webpack-cli": "^3.3.4",
"webpack-dev-server": "^3.7.1",
"webpack-merge": "^4.1.4"
},
"dependencies": {
"bootstrap": "^4.3.1",
"i18next": "^16.0.0",
"i18next-browser-languagedetector": "^3.0.1",
"konva": "^2.5.1",
"normalizr": "^3.4.0",
"prop-types": "^15.7.2",
"react-hot-loader": "^4.11.1",
"react-i18next": "^10.11.1",
"react-icons": "^3.7.0",
"react-konva": "^16.8.6",
"react-player": "^1.11.1",
"react-scroll": "^1.7.12",
"reactstrap": "^6.5.0"
},
"peerDependencies": {
"react": "^16.8.6",
"react-dom": "^16.8.6"
}
}
webpack.prod.js is below:
const path = require('path');
const merge = require('webpack-merge');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const common = require('./webpack.common.js');
module.exports = merge(common, {
entry: 'apps/index.js',
mode: 'production',
devtool: 'source-map',
output: {
path: path.resolve(__dirname, 'dist/'),
publicPath: '/dist/',
filename: 'bundle.js',
libraryTarget: 'commonjs2',
},
plugins: [
new CleanWebpackPlugin(['dist/*.*']),
],
externals: {
react: 'react',
'react-dom': 'react-dom',
},
});
I also noticed some deprecations in the library which I'm trying to integrate with. I've installed the missing peer dependencies. I've reported the issues with the library here.
I believe to upload it to S3, we should have all necessary files in the dist or public folder along with index.html which would be added as a prefix in S3 from where the app gets the entry point.
Any help on this would be highly appreciated. Also, I would be ready to provide any additional information.
Looking at your package.json file it seems you haven't used create-react-app.
I suggest to simply create a new React.js app using it and copy the content of your app in the newly created. It's easy and it works.
Hope this helps.
Just getting things working is not enough. You should go through a simple guide to setup things step-by-step like these
creating-a-production-ready-webpack-4-config-from-scratch
react-boilerplate using WebPack 4
And try some simple boilerplate projects before messing with a complex one like these
react-boilerplate
react-webpack-boilerplate
And yes starting with create-react-app is also good as suggested by #Daniele Ricci and You can use react-scripts eject to understand what's going on under the hood.

React-Redux not updating in IE11

I'm having a problem with IE11 in my React SPA, it is a client-side rendered app.
The issue is that while in others browsers it just works perfectly fine, in IE11 it sometimes wills stay in an infinite loading state (won't update loading flag from store) or it goes directly to the dashboard of the app when you enter the sign-in screen (obviusly it doesn't have any data).
I've setted
<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
<META HTTP-EQUIV="Expires" CONTENT="-1">
in the index.html, with no use but one thing I see it "fixes it" is that when I delete a file named "recaptcha__es_419" in the INetCache folder, the page works as intended.
Is there a known problem with redux and IE11 that i couldn't find in the forums? maybe a library or a polyfill that is missing?
This is my package.json in case it can be of help. I can't actually put any code because it's a really big project and really don't know where the problem is, since IE11 doesn't tell me about any error.
{
"version": "0.1.0",
"private": true,
"dependencies": {
"#material-ui/core": ">=1.0.0",
"#material-ui/icons": ">=1.0.0",
"#trainline/react-skeletor": "^1.0.2",
"apisauce": ">=0.14.1",
"autoprefixer": "^8.6.3",
"card-validator": ">=4.3.0",
"downloadjs": "^1.4.7",
"es5-shim": ">=4.5.9",
"es6-shim": ">=0.35.3",
"es7-shim": ">=6.0.0",
"extract-text-webpack-plugin": "^3.0.2",
"history": ">=4.6.1",
"i18next": ">=10.0.1",
"lodash": ">=4.17.4",
"mobile-detect": ">=1.3.6",
"moment": ">=2.19.1",
"node-sass": "^4.9.0",
"numeral": ">=2.0.6",
"prop-types": ">=15.5.10",
"raf": "^3.3.2",
"rc-slider": "^8.6.1",
"react": ">=16.3.2",
"react-app-rewire-hot-loader": "^1.0.1",
"react-app-rewired": "^1.5.2",
"react-credit-cards": "^0.7.0",
"react-dom": ">=16.0.0",
"react-facebook-login": "^4.0.1",
"react-google-login": "^3.2.1",
"react-google-maps": "^9.4.5",
"react-google-recaptcha": "^1.0.1",
"react-hot-loader": "^4.3.3",
"react-markdown": "^3.4.1",
"react-ms-login": "^0.1.2",
"react-redux": ">=5.0.4",
"react-responsive": "^4.1.0",
"react-router": "^4.1.1",
"react-router-dom": "^4.1.1",
"react-router-redux": "next",
"react-scripts": "^1.1.4",
"react-twitter-auth": "^0.0.12",
"recharts": "^1.1.0",
"redux": ">=3.6.0",
"redux-form": ">=6.8.0",
"redux-recompose": "^1.0.11",
"redux-thunk": ">=2.2.0",
"reselect": "^3.0.1",
"rollbar": "^2.3.9",
"sass-loader": "^7.0.3",
"seamless-immutable": ">=7.1.2",
"url-search-params-polyfill": ">=2.0.1"
},
"devDependencies": {
"babel-eslint": ">=8.0.1",
"babel-plugin-module-resolver": "^3.1.1",
"babel-preset-react-app": "^3.1.2",
"eslint": ">=4.9.0",
"eslint-config-airbnb": "^16.1.0",
"eslint-config-prettier": ">=2.6.0",
"eslint-import-resolver-babel-module": "^4.0.0",
"eslint-plugin-flowtype": ">=2.39.1",
"eslint-plugin-import": ">=2.8.0",
"eslint-plugin-jsx-a11y": ">=5.0.3",
"eslint-plugin-prettier": ">=2.3.1",
"eslint-plugin-react": ">=7.4.0",
"husky": ">=0.14.3",
"prettier": ">=1.7.4",
"prettier-eslint": ">=8.2.1",
"sass-lint": "^1.12.1"
},
"scripts": {
"sass-lint": "./node_modules/sass-lint/bin/sass-lint.js -v -q",
"lint": "./node_modules/eslint/bin/eslint.js src && npm run sass-lint",
"lint-fix": "./node_modules/eslint/bin/eslint.js src --fix",
"lint-diff": "git diff --name-only --cached --relative --diff-filter=ACM | grep \\.js$ | xargs ./node_modules/eslint/bin/eslint.js",
"precommit": "npm run lint-diff & npm run sass-lint",
"start": "react-app-rewired start",
"build": "react-app-rewired build",
"test": "react-app-rewired test --env=jsdom"
}
}
EDIT: If you're having the same problem I had, as #Ayushya said, adding Babel-Polyfill might help. It did in my case, and since I'm using CRA with Rewired I'll leave here how I configured it:
1) Install #babel/polyfill package:
npm install --save #babel/polyfill
2) In your config-override.js:
module.exports = function override(config, env) {
config.entry.unshift('#babel/polyfill');
...All your other code...
return config;
};
In this case, entry is the array of modules of webpack and unshift will put that item in the first position of the array, this is important because the polifyll should run first of all things!.
And that's it, everything should work perfect now in IE!
You are missing babel-polyfill in your packages and webpack configuration.
https://babeljs.io/docs/en/babel-polyfill#usage-in-node-browserify-webpack
Just install #babel/polyfill and include them in each of the webpack entry.
So if webpack configuration looks like below:
var path = require('path');
module.exports = {
mode: 'development',
entry: './foo.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'foo.bundle.js'
}
};
Add the #babel/polyfill in entry as follows.
var path = require('path');
require("#babel/polyfill");
module.exports = {
mode: 'development',
entry: ['#babel/polyfill', './foo.js'],
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'foo.bundle.js'
}
};
Hope this helps

Cant resolve module 'babel' when running dist

I´ve built my project upon the generator-react-webpack. Now I am trying to deploy my react app to Heroku. In the process of Building dependencies I get an error:
npm run copy & webpack --env=dist
remote:
remote: Hash: 82c8f499a3f6822a3522
remote: Version: webpack 1.13.3
remote: Time: 73ms
remote:
remote: ERROR in Entry module not found: Error: Cannot resolve module 'babel' in /tmp/build_a9e8f64bdab19b2486d922d4ba0f3d83
There seems to be something weird with the loader. I´ve tried to include 'babel' in dependencies, and also tried to replace it with 'babel-core' and it did not work.
I´m super frustrated with this problem and would appreciate it alot if someone could help me. Thanks!
package.json
{
"name": "templateApp",
"private": true,
"version": "0.0.1",
"description": "Template application for future builds",
"main": "",
"engines": {
"node": "6.2.2"
},
"scripts": {
"clean": "rimraf dist/*",
"copy": "copyfiles -f ./src/index.html ./src/favicon.ico ./dist",
"dist": "npm run copy & webpack --env=dist",
"lint": "eslint ./src",
"posttest": "npm run lint",
"release:major": "npm version major && npm publish && git push --follow-tags",
"release:minor": "npm version minor && npm publish && git push --follow-tags",
"release:patch": "npm version patch && npm publish && git push --follow-tags",
"serve": "node server.js --env=dev",
"serve:dist": "node server.js --env=dist",
"dev": "node server.js --env=dev",
"start": "node server.js --env=dev",
"test": "karma start",
"test:watch": "karma start --autoWatch=true --singleRun=false",
"postinstall": "npm run dist && npm run start"
},
"repository": "",
"keywords": [],
"author": "Alfred Ödling",
"devDependencies": {
"babel-core": "^6.0.0",
"babel-eslint": "^6.0.0",
"babel-loader": "^6.0.0",
"babel-polyfill": "^6.3.14",
"babel-preset-es2015": "^6.0.15",
"babel-preset-react": "^6.0.15",
"babel-preset-stage-0": "^6.5.0",
"bower-webpack-plugin": "^0.1.9",
"chai": "^3.2.0",
"copyfiles": "^0.2.1",
"css-loader": "^0.23.0",
"eslint": "^2.2.0",
"eslint-loader": "^1.0.0",
"eslint-plugin-react": "^5.0.0",
"file-loader": "^0.8.4",
"glob": "^7.0.0",
"isparta-instrumenter-loader": "^1.0.0",
"karma": "^0.13.9",
"karma-chai": "^0.1.0",
"karma-coverage": "^1.0.0",
"karma-mocha": "^1.0.0",
"karma-mocha-reporter": "^2.0.0",
"karma-phantomjs-launcher": "^1.0.0",
"karma-sourcemap-loader": "^0.3.5",
"karma-webpack": "^1.7.0",
"lost": "^7.0.3",
"minimist": "^1.2.0",
"mocha": "^2.2.5",
"node-sass": "^3.4.2",
"null-loader": "^0.1.1",
"open": "0.0.5",
"phantomjs-prebuilt": "^2.0.0",
"postcss": "^5.0.11",
"postcss-loader": "^0.8.0",
"react-addons-test-utils": "^15.0.0",
"react-hot-loader": "^1.2.9",
"rimraf": "^2.4.3",
"rucksack-css": "^0.8.6",
"sass-loader": "^3.1.2",
"style-loader": "^0.13.0",
"url-loader": "^0.5.6",
"webpack": "^1.12.0",
"webpack-dev-server": "^1.12.0"
},
"dependencies": {
"autoprefixer": "^6.3.7",
"axios": "^0.13.1",
"classnames": "^2.2.5",
"clipboard": "^1.5.12",
"core-js": "^2.0.0",
"firebase": "^3.4.1",
"fixed-data-table": "^0.6.3",
"flat": "^2.0.1",
"history": "^3.0.0",
"lodash": "^4.15.0",
"lost": "^7.0.3",
"normalize.css": "^4.0.0",
"postcss": "^5.1.1",
"postcss-cli": "^2.5.2",
"postcss-cssnext": "^2.8.0",
"postcss-import": "^8.1.2",
"postcss-loader": "^0.8.2",
"react": "^15.0.0",
"react-addons-css-transition-group": "^15.3.0",
"react-cookie": "^0.4.8",
"react-datagrid": "^2.1.1",
"react-dom": "^15.3.1",
"react-redux": "^4.4.5",
"react-router": "^2.6.1",
"react-tooltip": "^3.2.1",
"redux": "^3.5.2",
"redux-thunk": "^2.1.0",
"rucksack-css": "^0.8.6",
"seamless-immutable": "^6.1.1"
}
}
dist.js
'use strict';
let path = require('path');
let webpack = require('webpack');
let baseConfig = require('./base');
let defaultSettings = require('./defaults');
// Add needed plugins here
let BowerWebpackPlugin = require('bower-webpack-plugin');
let config = Object.assign({}, baseConfig, {
entry: path.join(__dirname, '../src/index'),
cache: false,
devtool: 'sourcemap',
plugins: [
new webpack.optimize.DedupePlugin(),
new webpack.DefinePlugin({
'process.env.NODE_ENV': '"production"'
}),
new BowerWebpackPlugin({
searchResolveModulesDirectories: false
}),
new webpack.optimize.UglifyJsPlugin(),
new webpack.optimize.OccurenceOrderPlugin(),
new webpack.optimize.AggressiveMergingPlugin(),
new webpack.NoErrorsPlugin()
],
module: defaultSettings.getDefaultModules()
});
// Add needed loaders to the defaults here
config.module.loaders.push({
test: /\.(js|jsx)$/,
loader: 'babel',
include: [].concat(
config.additionalPaths,
[ path.join(__dirname, '/../src') ]
)
});
module.exports = config;
From https://github.com/mxstbr/react-boilerplate/issues/914
"Make sure you set NPM_CONFIG_PRODUCTION=false on heroku. Without this devDependencies won't be installed. Which are needed for this boilerplate to build.
If you have heroku cli installed you can
heroku config:set NPM_CONFIG_PRODUCTION=false --app your-app-name
else go to the settings tab on your app and add in Config Variables"
This fixed it!
Can you change your entry from your dist.js file to this:
entry: [
'babel-polyfill',
path.join(__dirname, '../src/index')
],

React 0.14 error: Module build failed: ReferenceError: [BABEL] .../node_modules/eslint-loader/index.js!/.../main.jsx: Unknown option: base.stage

This is my package.json:
"scripts": {
"test": "echo \"Error: no test specified\n\" && exit 1",
"lint": "npm run lint-js && npm run lint-css",
"lint-js": "echo \"\\033[33mLinting JS\\033[0m\n\" && eslint . --ext .js --ext .jsx",
"lint-css": "echo \"\\033[33mLinting CSS\\033[0m\n\" && csslint app/style --quiet",
"start": "echo \"\\033[33mStarting dev server at localhost:8080\\033[0m\n\" && TARGET=dev webpack-dev-server --devtool eval-source --progress --colors --hot --inline --history-api-fallback",
"compile": "echo \"\\033[33mBuilding for production\\033[0m\n\" && TARGET=build webpack -p",
"build": "npm run lint-js && npm run lint-css && npm run compile"
},
"private": true,
"dependencies": {
"alt": "^0.17.8",
"babel-core": "^6.1.2",
"babel-loader": "^6.1.0",
"babelify": "^7.2.0",
"css-loader": "^0.22.0",
"csslint": "^0.10.0",
"csslint-loader": "^0.2.1",
"eslint": "^1.9.0",
"eslint-plugin-react": "^3.8.0",
"file-loader": "^0.8.4",
"flowcheck": "^0.2.7",
"flowcheck-loader": "^1.0.0",
"gsap": "^1.18.0",
"html-webpack-plugin": "^1.6.2",
"jquery-browserify": "^1.8.1",
"node-libs-browser": "^0.5.3",
"radium": "^0.14.3",
"react": "^0.14.2",
"react-bootstrap": "^0.27.3",
"react-bootstrap-modal": "^2.0.0",
"react-dom": "^0.14.2",
"react-hot-loader": "^1.3.0",
"react-odometer": "0.0.1",
"react-slick": "^0.9.1",
"react-swf": "^0.13.0",
"style-loader": "^0.13.0",
"superagent": "^1.4.0",
"url-loader": "^0.5.6",
"video.js": "^5.0.2",
"webpack": "^1.12.3",
"webpack-dev-server": "^1.12.1",
"webpack-merge": "^0.2.0"
}
}
This is the complete error message, I read that this error can be solved using babelify so I added it, although I don't need it.
ERROR in ./app/
main.jsx
Module build failed: ReferenceError: [BABEL] /Dev/Fanatico/node_modules/eslint-loader/index.js!/Dev/Fanatico/app/main.jsx: Unknown option: base.stage
at Logger.error (/Dev/Fanatico/node_modules/babel-core/lib/transformation/file/logger.js:43:11)
at OptionManager.mergeOptions (/Dev/Fanatico/node_modules/babel-core/lib/transformation/file/options/option-manager.js:245:18)
at OptionManager.init (/Dev/Fanatico/node_modules/babel-core/lib/transformation/file/options/option-manager.js:396:10)
at File.initOptions (/Dev/Fanatico/node_modules/babel-core/lib/transformation/file/index.js:191:75)
at new File (/Dev/Fanatico/node_modules/babel-core/lib/transformation/file/index.js:122:22)
at Pipeline.transform (/Dev/Fanatico/node_modules/babel-core/lib/transformation/pipeline.js:42:16)
at transpile (/Dev/Fanatico/node_modules/babel-loader/index.js:14:22)
at Object.module.exports (/Dev/Fanatico/node_modules/babel-loader/index.js:83:14)
# multi main
It all started when I wanted to upgrade to React 0.14, and ended up installing all the packages one by one.
You will need to have installed:
babel-core
babel-loader
babel-preset-es2015
babel-preset-react
babel-preset-stage-0
Your dependencies in your package.json would be:
{
"name": "react-transform-example",
"devDependencies": {
"babel-core": "^6.0.20",
"babel-loader": "^6.0.1",
"babel-preset-es2015": "^6.0.15",
"babel-preset-react": "^6.0.15",
"babel-preset-stage-0": "^6.0.15",
"express": "^4.13.3",
"webpack": "^1.9.6"
},
"dependencies": {
"react": "^0.14.0",
"react-dom": "^0.14.0"
}
}
And your .babelrc file
{
"presets": ["es2015", "stage-0", "react"]
}
More info at setting-up-babel-6
You're using babel 6 which doesn't have a stage option anymore, instead you have to use presets, e.g:
http://babeljs.io/docs/plugins/#presets
http://babeljs.io/docs/plugins/preset-stage-0/
Installation
$ npm install babel-preset-stage-0
Usage
Add the following line to your .babelrc file:
{"presets": ["stage-0"] }
Note you'll also need the es2015 and react preset. Also note that at least some of the hot reloading plugins are not compatible yet.

Resources