我正在为我的React Project设置webpack,而不是react-create-app配置。
当我使用npm start
启动项目时,我在chrome devtools中遇到此错误
apollo-client.js:42 Uncaught TypeError: apollo_client__WEBPACK_IMPORTED_MODULE_1__.default is not a constructor
at eval (apollo-client.js:42)
at Module../src/apollo-client.js (main.js:5165)
at __webpack_require__ (main.js:770)
at fn (main.js:130)
at eval (AppLoadingContainer.js:24)
at Module../src/containers/AppLoading/AppLoadingContainer.js (main.js:5505)
at __webpack_require__ (main.js:770)
at fn (main.js:130)
at eval (AppContainer.js:17)
at Module../src/containers/App/AppContainer.js (main.js:5493)
webpack.dev.js
const webpack = require('webpack');
const commonPaths = require('./paths');
module.exports = {
mode: 'development',
output: {
filename: '[name].js',
path: commonPaths.outputPath,
chunkFilename: '[name].js'
},
module: {
... scss loader
},
devServer: {
contentBase: commonPaths.outputPath,
compress: true,
port: 3000,
hot: true
},
plugins: [new webpack.HotModuleReplacementPlugin()]
};
webpack.common.js
const webpack = require('webpack');
const convert = require('koa-connect');
const history = require('connect-history-api-fallback');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ScriptExtHtmlWebpackPlugin = require('script-ext-html-webpack-plugin');
const commonPaths = require('./paths');
module.exports = {
entry: commonPaths.entryPath,
module: {
rules: [
{
enforce: 'pre',
test: /\.(js|jsx)$/,
loader: 'eslint-loader',
exclude: /(node_modules)/,
options: {
emitWarning: process.env.NODE_ENV !== 'production'
}
},
{
test: /\.(js|jsx)$/,
loader: 'babel-loader',
exclude: /(node_modules)/
}
]
},
serve: {
add: app => {
app.use(convert(history()));
},
content: commonPaths.entryPath,
dev: {
publicPath: commonPaths.outputPath
},
open: true
},
resolve: {
modules: ['src', 'node_modules'],
extensions: ['*', '.js', '.jsx', '.css', '.scss']
},
plugins: [
new webpack.ProgressPlugin(),
new HtmlWebpackPlugin({
template: commonPaths.templatePath
}),
new ScriptExtHtmlWebpackPlugin({
defaultAttribute: 'async'
})
]
};
apollo-client.js
import ApolloClient from 'apollo-client';
import { createHttpLink } from 'apollo-link-http';
import { setContext } from 'apollo-link-context';
import { InMemoryCache } from 'apollo-cache-inmemory';
import { apiUrl } from 'config/constants';
// import auth from './utils/auth';
const LOGIN_TOKEN_STORAGE_KEY = 'LoginToken';
const httpLink = new createHttpLink({ uri: `${apiUrl}/graphql` });
// set token autherization to headers
const authLink = setContext((_, { headers }) => {
const token = localStorage.getItem(LOGIN_TOKEN_STORAGE_KEY);
return {
headers: {
...headers,
authorization: token ? `Bearer ${token}` : ''
}
};
});
const defaultOptions = {
watchQuery: {
fetchPolicy: 'network-only',
errorPolicy: 'ignore'
},
query: {
fetchPolicy: 'network-only',
errorPolicy: 'all'
}
};
const client = new ApolloClient({
link: authLink.concat(httpLink),
cache: new InMemoryCache(),
defaultOptions: defaultOptions
});
export default client;
我用谷歌搜索了一段时间,主要是因为ApolloClient不再位于react-apollo中。您必须从“ apollo-client”导入它
但这对我不起作用
知道如何解决此错误吗?