Module not found errors with React 0.13
mohanzhang opened this issue · 13 comments
I get these errors when I run my tests (karma/mocha/expect):
ERROR in ./~/skin-deep/skin-deep.js
Module not found: Error: Cannot resolve module 'react-addons-test-utils' in /Users/mohanzhang/code/test/node_modules/skin-deep
@ ./~/skin-deep/skin-deep.js 10:14-48
ERROR in ./~/skin-deep/skin-deep.js
Module not found: Error: Cannot resolve module 'react-dom/server' in /Users/mohanzhang/code/test/node_modules/skin-deep
@ ./~/skin-deep/skin-deep.js 18:9-36
When I try to add these dependencies, I run into problems with version constraints because these expect React 0.14. I saw in the commit messages that there is implied support for React 0.13, so I'm probably missing something obvious?
EDIT: Upon further investigation, this seems to happen during the webpack bundling phase, but not during the test running phase.
For reference, I added the following lines (which you'll recognize as the start of skin-deep.js):
var subset = require('is-subset');
var React = require('react');
var React013 = (React.version.substring(0, 4) == '0.13');
console.log(React.version.substring(0, 4));
console.log(React013);
var TestUtils;
if (React013) {
console.log("ok");
TestUtils = require('react/addons').addons.TestUtils;
} else {
console.log("wtf");
TestUtils = require('react-addons-test-utils');
}Here is the log output from karma start:
> karma start
Hash: 1aa70af04e73edda661c
Version: webpack 1.12.1
Time: 16935ms
Asset Size Chunks Chunk Names
45c73723862c6fc5eb3d6961db2d71fb.eot 68.9 kB [emitted]
4b5a84aaf1c9485e060c503a0ff8cadb.woff2 64.5 kB [emitted]
dfb02f8f6d0cedc009ee5887cc68f1f3.woff 81.3 kB [emitted]
7c87870ab40d63cfb8870c1f183f9939.ttf 138 kB [emitted]
76a4f23c6be74fd309e0d0fd2c27a5de.svg 356 kB [emitted]
tests.webpack.js 9.52 MB 0 [emitted] tests.webpack.js
index.html 980 bytes [emitted]
chunk {0} tests.webpack.js (tests.webpack.js) 3.17 MB [rendered]
[0] ./tests.webpack.js 174 bytes {0} [built]
...
[1441] ./app/reducers/__tests__/managers-test.js 1.82 kB {0} [optional] [built]
[1442] ./app/selectors/__tests__/managers-test.js 2.4 kB {0} [optional] [built]
ERROR in ./~/skin-deep/skin-deep.js
Module not found: Error: Cannot resolve module 'react-addons-test-utils' in /Users/mohanzhang/code/test/node_modules/skin-deep
@ ./~/skin-deep/skin-deep.js 14:14-48
ERROR in ./~/skin-deep/skin-deep.js
Module not found: Error: Cannot resolve module 'react-dom/server' in /Users/mohanzhang/code/test/node_modules/skin-deep
@ ./~/skin-deep/skin-deep.js 22:9-36
�[32m02 10 2015 23:05:42.372:INFO [karma]: �[39mKarma v0.13.10 server started at http://localhost:9876/
�[32m02 10 2015 23:05:42.383:INFO [launcher]: �[39mStarting browser Chrome
�[32m02 10 2015 23:05:45.987:INFO [Chrome 45.0.2454 (Mac OS X 10.10.5)]: �[39mConnected on socket RADFMz5dA_LFwgbcAAAA with id 26179585
Chrome 45.0.2454 (Mac OS X 10.10.5) LOG: '0.13'
Chrome 45.0.2454 (Mac OS X 10.10.5) LOG: true
Chrome 45.0.2454 (Mac OS X 10.10.5) LOG: 'ok'
............................
Chrome 45.0.2454 (Mac OS X 10.10.5): Executed 28 of 28 SUCCESS (0.128 secs / 0.022 secs)
Duplicate of #10
You should exclude these modulefrom the webpack loader. You might also be able to use theDefinePluginto setReact013` to true.
I tried making these config changes in my karma.conf.js, and it still appears that they only affect what happens after the tests start running. I tried using a DefinePlugin to set React013 to true, but this had no effect on the errors.
Similarly, I tried excluding modules, e.g.
module.exports = function (config) {
config.set({
// ...
webpack: {
devtool: 'inline-source-map',
module: {
loaders: ([
{
test: /skin-deep/,
loader: 'null'
}
]).concat(commonConfig.loaders)
},
plugins: commonConfig.plugins.concat([
new webpack.DefinePlugin({
'React013': true
})
])
},
// ...
});
};This results in
Chrome 45.0.2454 (Mac OS X 10.10.5) ERROR
Uncaught Error: Cannot find module "skin-deep"
at /Users/mohanzhang/code/test/tests.webpack.js:96 <- webpack:///app/components/managers/__tests__/ManagerItem-test.js:3:15
So I am fairly convinced that my exclusion config is doing something. Now if I replace skin-deep above with the two targets, i.e.:
loaders: ([
{
test: /react-addons-test-utils/,
loader: 'null'
},
{
test: /react-dom\/server/,
loader: 'null'
}
]).concat(commonConfig.loaders)I still get the same errors. I understand that I'm having the "other side" of #10 since I am getting the React 0.13 equivalent of that error. Maybe @hallister can explain how they did it?
Try using this: https://webpack.github.io/docs/list-of-plugins.html#ignoreplugin
{
plugins: commonConfig.plugins.concat([
new webpack.IgnorePlugin(/react-addons/),
new webpack.IgnorePlugin(/react-dom/),
]
}Ah, like magic! :) Thanks @glenjamin 👍
I have encountered the same issue, but I have not yet experienced the magic.
I have tried adding
loaders: [
...
{
test: /skin-deep/,
loader: 'null'
},
{
test: /react-addons-test-utils/,
loader: 'null'
},
{
test: /react-dom\/server/,
loader: 'null'
}
]
and
plugins: [
new webpack.IgnorePlugin(/react-addons/),
new webpack.IgnorePlugin(/react-dom/),
new webpack.DefinePlugin({
'React013': true
})
]
But I am still seeing the cannot resolve module errors
Can you post a link to your package json and webpack config? You should only need the ignore line as shown in the README.
On 6 Jan 2016, at 20:50, David Hasenjaeger notifications@github.com wrote:
I have encountered the same issue, but I have not yet experienced the magic.
I have tried adding
loaders: [
...
{
test: /skin-deep/,
loader: 'null'
},
{
test: /react-addons-test-utils/,
loader: 'null'
},
{
test: /react-dom/server/,
loader: 'null'
}
]
andplugins: [
new webpack.IgnorePlugin(/react-addons/),
new webpack.IgnorePlugin(/react-dom/),
new webpack.DefinePlugin({
'React013': true
})
]
But I am still seeing the cannot resolve module errors—
Reply to this email directly or view it on GitHub.
before adding the ignore lines, my webpack config looks like
var webpack = require('webpack');
var path = require('path');
var node_modules_dir = path.resolve(__dirname, 'node_modules');
const ROOT_PATH = path.resolve(__dirname, '../..');
const DEBUG = false;
const CLIENT_PATH = path.join(ROOT_PATH, 'src', 'client');
const PUBLIC_PATH = path.join(ROOT_PATH, 'public');
var config = {
context: CLIENT_PATH,
entry: {
index: './index.js'
},
output: {
path: PUBLIC_PATH,
filename: 'js/[name].js',
},
resolve: {
extensions: ['', '.js', '.jsx'],
modulesDirectories: ['node_modules']
},
module: {
loaders: [
{
test: /\.js$/,
// There is not need to run the loader through
// vendors
exclude: [node_modules_dir],
loader: 'babel'
},
{
test: /\.css$/,
loaders: ['style', 'css']
},
{
test: /\.scss/,
loader: 'style!css!autoprefixer-loader?browsers=last 2 version!sass?outputStyle=compressed'
},
{
test: /\.json$/,
loader: 'json'
},
{
test: /\.(jpe?g|png|gif|svg|woff|woff2|eot|ttf|svg)$/,
loader: 'url?limit=10000&name=[sha512:hash:base64:7].[ext]'
},
{
test: /\.html$/,
loader: 'raw'
}
]
},
plugins: [
new webpack.DefinePlugin({
'process.env': {
NGINX_HOST: JSON.stringify(process.env.NGINX_HOST || 'http://localhost'),
NGINX_PORT: JSON.stringify(process.env.NGINX_PORT || '8080')
}
})
]
};
module.exports = config;
I just looked at the readme and it looks like I need to add
new webpack.IgnorePlugin(/react-addons|react-dom/)
to the plugins list. I have now done that but I am still seeing the errors.
In my package.json dependencies I have
"skin-deep": "^0.8.1",
"react": "^0.13.3",
I have also tried this with skin-deep@^0.13.0 but the errors remain then too.
This looks like config for the main application.
Is skin deep part of your actual app? If not, how are you running your tests?
I'm using karma for testing and skin-deep is included in the tests themselves.
I also have a karma.conf.js. Should I include a line in there to ignore the troublesome packages?
Sounds like there's some bundling going on via karma, and that's where you need to ignore the 0.14 flavoured modules.
I will look there, thanks.