I have a client-server setup, in which the client(create-react-app) runs on localhost:3000 and the server is an express server which is built on node and I'm attempting to build graphql schema-resolvers setup.
I'm able to import .graphql files on the server, however, on the client side, I'm using this setup by graphql-tools.
When I'm attempting to build the schema-resolvers on the frontend, I'm importing
import { GraphQLFileLoader } from '@graphql-tools/graphql-file-loader';
import { addResolversToSchema } from '@graphql-tools/schema';
import { loadSchema } from '@graphql-tools/load';
...which causes this error: ./node_modules/@graphql-tools/graphql-file-loader/index.mjs Can't import the named export 'AggregateError' from non EcmaScript module (only default export is available)
After researching, I've found out that this is an issue related with webpack.
Is there any resolution to this issue?
I manually renamed index.mjs to index.mjs_old in every @graphql-tools subfolders (merge, mock, and schema) and it worked.
the solution is to make sure that you have a webpack.config.js file in the root of your project directory that looks something like this:
const config = {
mode: 'production', // "production" | "development" | "none"
resolve: {
extensions: ['*', '.mjs', '.js', '.json']
},
module: {
rules: [
{
test: /\.mjs$/,
include: /node_modules/,
type: 'javascript/auto'
}
]
}
}
module.exports = config
also you can take a look https://github.com/vanruesc/postprocessing
Here is a another example for the glahql library
module.exports = {
chainWebpack: config => {
// ...other chains
config.module // fixes https://github.com/graphql/graphql-js/issues/1272
.rule('mjs$')
.test(/\.mjs$/)
.include
.add(/node_modules/)
.end()
.type('javascript/auto');
},
configureWebpack: {
resolve: {
// .mjs needed for https://github.com/graphql/graphql-js/issues/1272
extensions: ['*', '.mjs', '.js', '.vue', '.json']
}
}
}
try this one, hope will help
mkdir webpack-test
cd webpack-test
npm init -y
npm install --save graphql webpack webpack-cli
./node_modules/.bin/webpack-cli index.js