Open RemLampa opened 5 years ago
Samme issue here.
Yeah, this is probably related to webpack (may be in your config) itself, not this loader. Try add loader as first in chain.
Yeah, this is probably related to webpack (may be in your config) itself, not this loader. Try add loader as first in chain.
Nope:
module: {
rules: [
{
test: /\.(graphql|gql)$/,
exclude: /node_modules/,
use: 'graphql-tag/loader',
},
}
Throws a GraphQLError: Syntax Error: Unexpected Name "module"
error on the first .gql the loader encounters in a CRA 2.x ejected application.
I took another stab at this and got absolute imports working for the #import
keyword in a CRA 2.x ejected application:
#import 'queries/talentOffer/talentOfferFields.gql'
query talentOffer($id: Int!) {
talentOffer(id: $id) {
...talentOfferFields
}
}
The key was adding an alias to the ejected config/webpack.config.js
file:
alias: {
// Support React Native Web
// https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/
'react-native': 'react-native-web',
// START - ADDED AFTER EJECTING CRA
// point to the src/queries for the graphql-tag/loader loader
queries: path.resolve(__dirname, '../src/queries/')
// END - ADDED AFTER EJECTING CRA
},
The loader was added right before the last file-loader
:
// START - ADDED AFTER EJECTING CRA
{
test: /\.(graphql|gql)$/,
exclude: /node_modules/,
loader: 'graphql-tag/loader',
},
// END - ADDED AFTER EJECTING CRA
// "file" loader makes sure those assets get served by WebpackDevServer.
// When you `import` an asset, you get its (virtual) filename.
// In production, they would get copied to the `build` folder.
// This loader doesn't use a "test" so it will catch all modules
// that fall through the other loaders.
{
loader: require.resolve('file-loader'),
// Exclude `js` files to keep "css" loader working as it injects
// its runtime that would otherwise be processed through "file" loader.
// Also exclude `html` and `json` extensions so they get processed
// by webpacks internal loaders.
exclude: [/\.(js|mjs|jsx|ts|tsx)$/, /\.html$/, /\.json$/],
options: {
name: 'static/media/[name].[hash:8].[ext]',
},
},
// ** STOP ** Are you adding a new loader?
// Make sure to add the new loader(s) before the "file" loader.
HTH
I don't think this is a bug in graphql-tag
, maybe you should try stack overflow or somewhere people can help you with webpack
questions.
Issue Labels
In my webpack config:
resolve.modules = [ 'src', 'node_modules'];
I have various folders inside
src
, notablycomponents
andgraphql-docs
.This absolute import works:
import SomeComponent from 'components/SomeComponent';
This relative import also works:
import SomeQuery from './graphql-docs/SomeQuery.graphql';
But this absolute import doesn't work:
import SomeQuery from 'graphql-docs/SomeQuery.graphql';
This is somewhat related to #198, but that points out a bug in Webpack aliases, while this one is about the Webpack module resolver.
Node version: 8.12.0 npm version: 6.4.1 graphql-tag version: 2.9.2 webpack version: 4.12.1