I work with "react": "^17.0.2",
I tried to add the web3 library by npm i web3
But when I try to instantiate my web3 object like this
web3 = new Web3((window as any).ethereum);
Or like this
web3 = new Web3();
And I try to start my app (npm start)
I get a lot of errors
about my webpack I have to add some fallback in my webpack.config.js
Compiled with problems:
ERROR in ./node_modules/cipher-base/index.js 3:16-43
Module not found: Error: Can't resolve 'stream' in
'C:...\node_modules\cipher-base'
BREAKING CHANGE: webpack < 5 used to include polyfills for node.js
core modules by default. This is no longer the case. Verify if you
need this module and configure a polyfill for it.
If you want to include a polyfill, you need to:
add a fallback 'resolve.fallback: { "stream": require.resolve("stream-browserify") }'
install 'stream-browserify' If you don't want to include a polyfill, you can use an empty module like this: resolve.fallback: {
"stream": false }
ERROR in ./node_modules/eth-lib/lib/bytes.js 9:193-227
Module not found: Error: Can't resolve 'crypto' in ....
ERROR in ./node_modules/ethereumjs-util/dist.browser/account.js
71:31-48
Module not found: Error: Can't resolve 'assert' in ...
ERROR in ./node_modules/ethereumjs-util/dist.browser/address.js
14:31-48
Module not found: Error: Can't resolve 'assert' in ... ERROR in
./node_modules/ethereumjs-util/dist.browser/object.js 46:31-48
Module not found: Error: Can't resolve 'assert' in ...
ERROR in ./node_modules/web3-eth-accounts/lib/index.js 31:74-91
Module not found: Error: Can't resolve 'crypto' in ... ERROR in
./node_modules/web3-eth-accounts/node_modules/eth-lib/lib/bytes.js
7:193-227
Module not found: Error: Can't resolve 'crypto' in ...
ERROR in ./node_modules/web3-providers-http/lib/index.js 30:11-26
Module not found: Error: Can't resolve 'http' in ...
ERROR in ./node_modules/web3-providers-http/lib/index.js 32:12-28
Module not found: Error: Can't resolve 'https' in ...
ERROR in ./node_modules/xhr2-cookies/dist/xml-http-request.js 37:11-26
Module not found: Error: Can't resolve 'http' in ...
ERROR in ./node_modules/xhr2-cookies/dist/xml-http-request.js 39:12-28
Module not found: Error: Can't resolve 'https' in ...
ERROR in ./node_modules/xhr2-cookies/dist/xml-http-request.js 41:9-22
Module not found: Error: Can't resolve 'os' in
'C:...\node_modules\xhr2-cookies\dist'
BREAKING CHANGE: webpack < 5 used to include polyfills for node.js
core modules by default. This is no longer the case. Verify if you
need this module and configure a polyfill for it.
If you want to include a polyfill, you need to:
add a fallback 'resolve.fallback: { "os": require.resolve("os-browserify/browser") }'
install 'os-browserify' If you don't want to include a polyfill, you can use an empty module like this: resolve.fallback: { "os":
false }
a lot of errors like this : Failed to parse source map from 'C:....\node_modules\xhr2-cookies\xml-http-request-upload.ts' file: Error: ENOENT: no such file or directory
WARNING in ./node_modules/#ethersproject/abi/lib.esm/coders/fixed-bytes.js Module
Warning (from ./node_modules/source-map-loader/dist/cjs.js): Failed to
parse source map from
'C:...\node_modules#ethersproject\abi\src.ts\coders\fixed-bytes.ts'
file: Error: ENOENT: no such file or directory, open
'C:...\node_modules#ethersproject\abi\src.ts\coders\fixed-bytes.ts'
# ./node_modules/#ethersproject/abi/lib.esm/abi-coder.js 13:0-55
76:17-32 # ./node_modules/#ethersproject/abi/lib.esm/index.js 4:0-56
6:0-204 6:0-204 # ./node_modules/web3-eth-abi/lib/index.js 28:21-59
30:16-55 # ./node_modules/web3-eth/lib/index.js 47:10-33 #
./node_modules/web3/lib/index.js 34:10-29 #
./src/components/Authenticate.tsx 7:0-24 14:19-23 14:24-42 #
./src/App.tsx 5:0-53 10:35-47 # ./src/index.tsx 7:0-24 11:33-36
WARNING in ./node_modules/#ethersproject/abi/lib.esm/coders/null.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from
'C:...\node_modules#ethersproject\abi\src.ts\coders\null.ts'
file: Error: ENOENT: no such file or directory, open
'C:...\node_modules#ethersproject\abi\src.ts\coders\null.ts'
# ./node_modules/#ethersproject/abi/lib.esm/abi-coder.js 14:0-42
50:19-28 # ./node_modules/#ethersproject/abi/lib.esm/index.js 4:0-56
6:0-204 6:0-204 # ./node_modules/web3-eth-abi/lib/index.js 28:21-59
30:16-55 # ./node_modules/web3-eth/lib/index.js 47:10-33 #
./node_modules/web3/lib/index.js 34:10-29 #
./src/components/Authenticate.tsx 7:0-24 14:19-23 14:24-42 #
./src/App.tsx 5:0-53 10:35-47 # ./src/index.tsx 7:0-24 11:33-36
I used the basic template given by npx create-react-app Appname --template typescript
And then added web3 library (npm i web3)
And tried this code
import React, { useState } from 'react';
import detectEthereumProvider from '#metamask/detect-provider'
import Web3 from 'web3';
const Authenticate = () => {
const web3 = new Web3();
}
return (
<div>
TEST
</div >
);
};
export default Authenticate;
Install react-scripts #4.0.3
npm install --save react-scripts#4.0.3
Related
I am making web scraping site,
and I want get Tags in URL , but they are dynamic sources.
so I can't touch only Cheerio.
people recommended Puppeteer. and my problem was starting
first. I could see Module not found:
Error: Can't resolve 'https' in '/Users/Documents/myMac/Study/bookMarks/node_modules/puppeteer-core/lib/cjs/puppeteer/node'
and also they couldn't find out os, path .....
so I add (I use yarn) webpack and cli
second. I set the webpack.config.js for fallback
resolve:{
fallback:{
"fs":false,
"os": require.resolve("os-browserify/browser"),
"path": require.resolve("path-browserify"),
"https": require.resolve("https-browserify"),
"stream": false,
"zlib": false ,
"crypto": false,
"constants": false,
}
}
because the Err-Message said
BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.
If you want to include a polyfill, you need to:
- add a fallback 'resolve.fallback: { "https": require.resolve("https-browserify") }'
- install 'https-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
resolve.fallback: { "https": false }
but the err messages still there when I yarn start
Third. I thought if the config didn't set .
so I did ' $ webpack --config webpack.config.js'
I couldn't see the err
but still when I did yarn start, problem are there
4th. I add fs, os, http..... (in the err's module name) using yarn
I can see the dependencies
"os": "^0.1.2", "path": "^0.12.7",
and added
"browser": {
"crypto": false,
"fs": false,
"path": false,
"os": false,
"net": false,
"stream": false,
"tls": false
}
setting in package.json
but,,
.
.
.
ERROR in ./node_modules/puppeteer-core/lib/cjs/puppeteer/node/FirefoxLauncher.js 43:29-42
Module not found: Error: Can't resolve 'fs' in '/Users/Documents/myMac/Study/bookMarks/node_modules/puppeteer-core/lib/cjs/puppeteer/node'
ERROR in ./node_modules/puppeteer-core/lib/cjs/puppeteer/node/ProductLauncher.js 65:13-26
Module not found: Error: Can't resolve 'fs' in '/Users/Documents/myMac/Study/bookMarks/node_modules/puppeteer-core/lib/cjs/puppeteer/node'
webpack compiled with 41 errors
I am having 41 errors
5th . I removed folder the node_modules and yarn.lock
and did
$ yarn cache clean $ yarn install
it doesn't work
also I removed puppeteer-core and re-add
and i have 41 errors still
do you have another way
or
can I alternate puppeteer?
at last
this is js module using puppeteer
const puppeteer = require('puppeteer-core');
const DomParser = require('dom-parser');
async function getTagList(url) {
const tagListText = new Array();
try{
const browser = await puppeteer.launch();
const page = await browser.newPage();
await page.goto(url);
const html = await page.content();
const parser = new DomParser();
const dom = parser.parseFromString(html);
const tagList = dom.getElementsByClassName('tag_area')[0].getElementsByTagName('a');
tagListText = Array.from(tagList).map(tag => tag.textContent);
await browser.close();
}catch(error) {
console.error(error);
}
return tagListText;
}
module.exports = { getTagList };
and I am using chatGPT. he recommended setting in webpack.config.js
Specially fallback -> fallbacks
and it can't terminal said fallbacks isn't option
I use webpack5
Help me install the react-pdf package (https://github.com/diegomura/react-pdf) on create react app. I can't make changes to webpack.config. I do it according to the instructions I found here from the user River Twilight: How to update webpack config for a react project created using create-react-app?
According to the instructions of installing react-pdf
I run npm install process browserify-zlib stream-browserify util buffer assert
Created config-override.js in project root folder
Next you need to insert the following lines into the config:
const webpack = require("webpack");
module.exports = {
/* ... */
resolve: {
fallback: {
process: require.resolve("process/browser"),
zlib: require.resolve("browserify-zlib"),
stream: require.resolve("stream-browserify"),
util: require.resolve("util"),
buffer: require.resolve("buffer"),
asset: require.resolve("assert"),
}
},
plugins: [
new webpack.ProvidePlugin({
Buffer: ["buffer", "Buffer"],
process: "process/browser",
}),
]
/* ... */
}
But a) webstorm swears, b) the project is not started by the "start": "react-app-rewired start".
Errors that I get without changing the config:
Compiled with problems:X
ERROR in ./node_modules/#react-pdf/pdfkit/lib/pdfkit.browser.es.js 2:0-28
Module not found: Error: Can't resolve 'stream' in 'C:\Users\schek\Desktop\react\snitch\node_modules\#react-pdf\pdfkit\lib'
BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.
If you want to include a polyfill, you need to:
- add a fallback 'resolve.fallback: { "stream": require.resolve("stream-browserify") }'
- install 'stream-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
resolve.fallback: { "stream": false }
ERROR in ./node_modules/#react-pdf/pdfkit/lib/pdfkit.browser.es.js 4:0-24
Module not found: Error: Can't resolve 'zlib' in 'C:\Users\schek\Desktop\react\snitch\node_modules\#react-pdf\pdfkit\lib'
BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.
If you want to include a polyfill, you need to:
- add a fallback 'resolve.fallback: { "zlib": require.resolve("browserify-zlib") }'
- install 'browserify-zlib'
If you don't want to include a polyfill, you can use an empty module like this:
resolve.fallback: { "zlib": false }
ERROR in ./node_modules/#react-pdf/png-js/lib/png-js.browser.es.js 1:0-24
Module not found: Error: Can't resolve 'zlib' in 'C:\Users\schek\Desktop\react\snitch\node_modules\#react-pdf\png-js\lib'
BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.
If you want to include a polyfill, you need to:
- add a fallback 'resolve.fallback: { "zlib": require.resolve("browserify-zlib") }'
- install 'browserify-zlib'
If you don't want to include a polyfill, you can use an empty module like this:
resolve.fallback: { "zlib": false }
ERROR in ./node_modules/blob-stream/index.js 1:21-47
Module not found: Error: Can't resolve 'stream' in 'C:\Users\schek\Desktop\react\snitch\node_modules\blob-stream'
BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.
If you want to include a polyfill, you need to:
- add a fallback 'resolve.fallback: { "stream": require.resolve("stream-browserify") }'
- install 'stream-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
resolve.fallback: { "stream": false }
ERROR in ./node_modules/restructure/src/EncodeStream.js 23:11-28
Module not found: Error: Can't resolve 'stream' in 'C:\Users\schek\Desktop\react\snitch\node_modules\restructure\src'
BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.
If you want to include a polyfill, you need to:
- add a fallback 'resolve.fallback: { "stream": require.resolve("stream-browserify") }'
- install 'stream-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
resolve.fallback: { "stream": false }
These errors seems to have happened due to react-scripts v5. Took me a day to figure out a solution while using react-router v5. But it seems the best approach for now is to stay on, or revert back to v4.0.3 until v5 adds back support for node built-ins #11764 is merged and released.
This issue on Github might help.
You can use rewire to change the settings of webpack config without ejecting.
npm i rewire
I put two scripts (start.js and build.js) in a scripts folder in root directory (i.e. outside src). Then in package.json change the start and build scripts to use those.
"start": "node scripts/start.js",
"build": "node scripts/build.js",
start.js:
const rewire = require('rewire');
const webpack = require('webpack');
const defaults = rewire('react-scripts/scripts/start.js');
const webpackConfig = require('react-scripts/config/webpack.config');
//In order to override the webpack configuration without ejecting the create-react-app
defaults.__set__('configFactory', (webpackEnv) => {
let config = webpackConfig(webpackEnv);
//Customize the webpack configuration here.
config.resolve.fallback = {
...config.resolve.fallback,
process: require.resolve('process/browser'),
zlib: require.resolve('browserify-zlib'),
stream: require.resolve('stream-browserify'),
util: require.resolve('util'),
buffer: require.resolve('buffer'),
asset: require.resolve('assert'),
};
config.plugins = [
...config.plugins,
new webpack.ProvidePlugin({
Buffer: ['buffer', 'Buffer'],
process: 'process/browser',
}),
];
return config;
});
build.js:
const rewire = require('rewire');
const webpack = require('webpack');
const defaults = rewire('react-scripts/scripts/build.js');
//In order to override the webpack configuration without ejecting the create-react-app
const config = defaults.__get__('config');
//Customize the webpack configuration here.
config.resolve.fallback = {
...config.resolve.fallback,
process: require.resolve('process/browser'),
zlib: require.resolve('browserify-zlib'),
stream: require.resolve('stream-browserify'),
util: require.resolve('util'),
buffer: require.resolve('buffer'),
asset: require.resolve('assert'),
};
config.plugins = [
...config.plugins,
new webpack.ProvidePlugin({
Buffer: ['buffer', 'Buffer'],
process: 'process/browser',
}),
];
This is a combination of this post and the readme you already refered to.
...and ofcourse you also need the once you already had:
npm install process browserify-zlib stream-browserify util buffer assert
I am trying to use Playfab SDK on my React project, but no success yet..
I can't find well explained documentation for it.
created a react app with:
npx create-react-app playfabtest
installing PlayFab SDK for nodejs:
npm install playfab-sdk
NOTE: ( there is another SDK for JavaScript (npm install playfab-web-sdk), but I am assuming that for a react app, the nodes is the correct one ?)
The documentation for those SDK
Modified the App.js file on the project with this code:
(tried in many ways actually, I put the last one tried that didn't work neither).
App.js:
// import { PlayFabClient } from './playfab-sdk/Scripts/PlayFab/PlayFabClient';
// var PlayFabClient = require('./PlayFabSdk/Scripts/PlayFab/PlayFabClient.js')
function App() {
const PlayFabClient = require('./PlayFabSdk/Scripts/PlayFab/PlayFabClient.js');
PlayFabClient.settings.titleId = '';
PlayFabClient.settings.developerSecretKey = '';
PlayFabClient.GetTitleData({ Keys: ['Sample'] }, function (error, result) {
if (error) {
console.log('Got an error: ', error);
return;
}
console.log('Reply: ', result);
});
return ...
}
After that, if I run : npm start
get this error :
error:
Compiled with problems:
ERROR in ./src/PlayFabSdk/Scripts/PlayFab/PlayFab.js 4:10-24
Module not found: Error: Can't resolve 'url' in 'D:\Github\playfabtest\src\PlayFabSdk\Scripts\PlayFab'
BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default. This is no longer the case. Verify if you need this module and configure a polyfill for it.
If you want to include a polyfill, you need to:
- add a fallback 'resolve.fallback: { "url": require.resolve("url/") }'
- install 'url' If you don't want to include a polyfill, you can use an empty module like this: resolve.fallback: { "url": false }
ERROR in ./src/PlayFabSdk/Scripts/PlayFab/PlayFab.js 6:12-28
Module not found: Error: Can't resolve 'https' in 'D:\Github\playfabtest\src\PlayFabSdk\Scripts\PlayFab'
BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default. This is no longer the case. Verify if you need this module and configure a polyfill for it.
If you want to include a polyfill, you need to:
- add a fallback 'resolve.fallback: { "https": require.resolve("https-browserify") }'
- install 'https-browserify' If you don't want to include a polyfill, you can use an empty module like this: resolve.fallback: { "https": false }
Would be very helpful if can explain how to make PlayfabSDK run well on a react app.
Thanks a lot!
In the context of Create React App, you need to use ES6 style import statement instead of require to import the playfab-sdk NPM package into your project. Also you need to set the settings on the PlayFab object instead of the PlayFabClient.
Example:
import { useEffect, useState } from 'react';
import { PlayFab, PlayFabClient } from 'playfab-sdk'
PlayFab.settings.titleId = process.env.REACT_APP_PLAYFAB_TITLE_ID || ''
PlayFab.settings.developerSecretKey = process.env.REACT_APP_PLAYFAB_DEVELOPER_SECRET_KEY
// continue with component implementation
const App {
// get title data
PlayFabClient.GetTitleData(...)
// etc...
}
export default App
I am doing a react project there i need to add Java library
It says while i'm running the project
ERROR in ./node_modules/java/lib/nodeJavaBridge.js
Module not found: Error: Can't resolve 'fs'
i add dependency in my package.json file is
{...
"dependencies": {
...
"fs": "0.0.1-security",
"java": "^0.9.0"
...
}
...}
for this what should i do
I cannot seem to compile using the babel 6 loader and webpack. It's driving me mad. Has anyone else come across this problem? I cannot for the life of me see where I am screwing up. :)
Console Log
ERROR in ./~/redux/lib/index.js
Module build failed: ReferenceError: [BABEL] /Users/montague/Sites/redux/routing/node_modules/redux/lib/index.js: Unknown option: /Users/montague/Sites/redux/routing/node_modules/redux/.babelrc.stage
at Logger.error (/Users/montague/Sites/redux/routing/node_modules/babel-core/lib/transformation/file/logger.js:43:11)
at OptionManager.mergeOptions (/Users/montague/Sites/redux/routing/node_modules/babel-core/lib/transformation/file/options/option-manager.js:245:18)
at OptionManager.addConfig (/Users/montague/Sites/redux/routing/node_modules/babel-core/lib/transformation/file/options/option-manager.js:206:10)
at OptionManager.findConfigs (/Users/montague/Sites/redux/routing/node_modules/babel-core/lib/transformation/file/options/option-manager.js:347:16)
at OptionManager.init (/Users/montague/Sites/redux/routing/node_modules/babel-core/lib/transformation/file/options/option-manager.js:392:12)
at File.initOptions (/Users/montague/Sites/redux/routing/node_modules/babel-core/lib/transformation/file/index.js:191:75)
at new File (/Users/montague/Sites/redux/routing/node_modules/babel-core/lib/transformation/file/index.js:122:22)
at Pipeline.transform (/Users/montague/Sites/redux/routing/node_modules/babel-core/lib/transformation/pipeline.js:42:16)
at transpile (/Users/montague/Sites/redux/routing/node_modules/babel-loader/index.js:14:22)
at Object.module.exports (/Users/montague/Sites/redux/routing/node_modules/babel-loader/index.js:83:14)
# ./src/js/main.js 11:13-29
ERROR in ./~/react-redux/lib/index.js
Module build failed: ReferenceError: [BABEL] /Users/montague/Sites/redux/routing/node_modules/react-redux/lib/index.js: Unknown option: /Users/montague/Sites/redux/routing/node_modules/react-redux/.babelrc.stage
at Logger.error (/Users/montague/Sites/redux/routing/node_modules/babel-core/lib/transformation/file/logger.js:43:11)
at OptionManager.mergeOptions (/Users/montague/Sites/redux/routing/node_modules/babel-core/lib/transformation/file/options/option-manager.js:245:18)
at OptionManager.addConfig (/Users/montague/Sites/redux/routing/node_modules/babel-core/lib/transformation/file/options/option-manager.js:206:10)
at OptionManager.findConfigs (/Users/montague/Sites/redux/routing/node_modules/babel-core/lib/transformation/file/options/option-manager.js:347:16)
at OptionManager.init (/Users/montague/Sites/redux/routing/node_modules/babel-core/lib/transformation/file/options/option-manager.js:392:12)
at File.initOptions (/Users/montague/Sites/redux/routing/node_modules/babel-core/lib/transformation/file/index.js:191:75)
at new File (/Users/montague/Sites/redux/routing/node_modules/babel-core/lib/transformation/file/index.js:122:22)
at Pipeline.transform (/Users/montague/Sites/redux/routing/node_modules/babel-core/lib/transformation/pipeline.js:42:16)
at transpile (/Users/montague/Sites/redux/routing/node_modules/babel-loader/index.js:14:22)
at Object.module.exports (/Users/montague/Sites/redux/routing/node_modules/babel-loader/index.js:83:14)
# ./src/js/main.js 17:18-40
ERROR in ./~/redux-router/lib/index.js
Module build failed: ReferenceError: [BABEL] /Users/montague/Sites/redux/routing/node_modules/redux-router/lib/index.js: Unknown option: /Users/montague/Sites/redux/routing/node_modules/redux-router/.babelrc.stage
at Logger.error (/Users/montague/Sites/redux/routing/node_modules/babel-core/lib/transformation/file/logger.js:43:11)
at OptionManager.mergeOptions (/Users/montague/Sites/redux/routing/node_modules/babel-core/lib/transformation/file/options/option-manager.js:245:18)
at OptionManager.addConfig (/Users/montague/Sites/redux/routing/node_modules/babel-core/lib/transformation/file/options/option-manager.js:206:10)
at OptionManager.findConfigs (/Users/montague/Sites/redux/routing/node_modules/babel-core/lib/transformation/file/options/option-manager.js:347:16)
at OptionManager.init (/Users/montague/Sites/redux/routing/node_modules/babel-core/lib/transformation/file/options/option-manager.js:392:12)
at File.initOptions (/Users/montague/Sites/redux/routing/node_modules/babel-core/lib/transformation/file/index.js:191:75)
at new File (/Users/montague/Sites/redux/routing/node_modules/babel-core/lib/transformation/file/index.js:122:22)
at Pipeline.transform (/Users/montague/Sites/redux/routing/node_modules/babel-core/lib/transformation/pipeline.js:42:16)
at transpile (/Users/montague/Sites/redux/routing/node_modules/babel-loader/index.js:14:22)
at Object.module.exports (/Users/montague/Sites/redux/routing/node_modules/babel-loader/index.js:83:14)
# ./src/js/main.js 13:19-42
webpack.config.js
var path = require('path');
module.exports = {
entry: path.resolve(__dirname + "/src/js/main.js"),
output: {
path: path.resolve(__dirname + "/dist/js/bundle.js")
},
module: {
loaders: [
{
test: /\.jsx?/,
excludes: /(node_modules|bower_components)/,
loader: "babel",
query: {
presets:['es2015']
}
}
]
}
}
main.js
import React, {Component, PropTypes} from 'react';
import ReactDOM from 'react-dom';
import {createStore, compose, combineReducers} from 'redux';
import {
ReduxRouter,
routerStateReducer,
reduxReactRouter,
pushState
} from 'redux-router';
import {Route, Link} from 'react-router';
import {Provider, connect} from 'react-redux';
import {createHistory} from 'history';
According to the error it seems that redux is complaining about the stage option. It is probably because redux is still using Babel 5. This stage option has been removed from Babel 6.
Module build failed: ReferenceError: [BABEL]
/Users/montague/Sites/redux/routing/node_modules/redux/lib/index.js:
Unknown option:
/Users/montague/Sites/redux/routing/node_modules/redux/.babelrc.stage
But you shouldn't be running through babel those files. Hence something in your webpack.config.js should be wrong. Probably because your exclude field has an extra s.
Change:
excludes: /(node_modules|bower_components)/,
^
With:
exclude: /(node_modules|bower_components)/,
Try create a .babelrc file (root) without stage property. You can create just a empty brackets if you don't need set any property.
{}
Try installing the preset first, since babel 6 does not transform anything by default but requires a preset to define its transformation.
npm install --save-dev babel-preset-es2015
and for react:
npm install --save-dev babel-preset-react
Now add the preset to the .babelrc file:
{
"presets": ["es2015"]
}
This should do the trick, its exactly what I had to do to solve this.
Forget where I saw this (lemme know if it was you so I can give credit) but this command has helped fix a multitude of babel reference errors for me.
rm $( find node_modules -name .babelrc)
If you exclude node_modules from your loaders, then how are you going to deal with node modules which are coded using es6?