初始化ApolloClient时未捕获到TypeError

时间:2019-06-11 13:34:41

标签: reactjs webpack webpack-dev-server apollo-client

我正在为我的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”导入它

但这对我不起作用

知道如何解决此错误吗?

0 个答案:

没有答案