kitten.sh
Mirror: The highly customizable and versatile GraphQL client with which you add on features like normalized caching as you grow.
(build) - Fix graphql imports for Webpack 5 (#1094)
* Upgrade babel-plugin-modular-graphql
* Merge Rollup build pipelines and move babel-plugin-modular-graphql
* Add changeset
* Fix extension input on makeOutputPlugins for React bundles
* Fix broken exports on preact-urql's hooks/index.ts
* Update changeset with Webpack 5 callout
+86
-66
+10
.changeset/thin-rings-tell.md
+10
.changeset/thin-rings-tell.md
···
1
+
---
2
+
'@urql/preact': patch
3
+
'@urql/exchange-execute': patch
4
+
'@urql/exchange-graphcache': patch
5
+
'@urql/exchange-populate': patch
6
+
'@urql/core': patch
7
+
'@urql/introspection': patch
8
+
---
9
+
10
+
Add missing `.mjs` extension to all imports from `graphql` to fix Webpack 5 builds, which require extension-specific import paths for ESM bundles and packages. **This change allows you to safely upgrade to Webpack 5.**
+1
-1
package.json
+1
-1
package.json
···
60
60
"@typescript-eslint/eslint-plugin": "^4.1.0",
61
61
"@typescript-eslint/parser": "^4.1.0",
62
62
"babel-plugin-closure-elimination": "^1.3.2",
63
-
"babel-plugin-modular-graphql": "0.1.3",
63
+
"babel-plugin-modular-graphql": "1.0.0",
64
64
"babel-plugin-transform-async-to-promises": "^0.8.15",
65
65
"dotenv": "^8.2.0",
66
66
"eslint": "^7.8.1",
+1
-6
packages/preact-urql/src/hooks/index.ts
+1
-6
packages/preact-urql/src/hooks/index.ts
+5
-1
scripts/rollup/cleanup-plugin.js
+5
-1
scripts/rollup/cleanup-plugin.js
···
1
1
import { transformSync as transform } from '@babel/core';
2
2
import { createFilter } from '@rollup/pluginutils';
3
+
import babelPluginModularGraphQL from 'babel-plugin-modular-graphql';
3
4
4
5
function removeEmptyImports({ types: t }) {
5
6
return {
···
36
37
}
37
38
38
39
return transform(code, {
39
-
plugins: [removeEmptyImports],
40
+
plugins: [
41
+
[babelPluginModularGraphQL, { extension: opts.extension }],
42
+
removeEmptyImports
43
+
],
40
44
babelrc: false
41
45
});
42
46
}
+39
-37
scripts/rollup/config.js
+39
-37
scripts/rollup/config.js
···
1
1
import genPackageJson from 'rollup-plugin-generate-package-json';
2
2
import { relative, join, dirname, basename } from 'path';
3
-
import { makePlugins } from './plugins';
3
+
import { makePlugins, makeOutputPlugins } from './plugins';
4
4
import * as settings from './settings';
5
5
6
-
const plugins = makePlugins({ isProduction: false });
6
+
const plugins = makePlugins();
7
7
8
8
const input = settings.sources.reduce((acc, source) => {
9
9
acc[source.name] = source.source;
···
34
34
return acc;
35
35
}, {});
36
36
37
-
const config = {
37
+
const output = ({ format, isProduction }) => {
38
+
if (typeof isProduction !== 'boolean')
39
+
throw new Error('Invalid option `isProduction` at output({ ... })');
40
+
if (format !== 'cjs' && format !== 'esm')
41
+
throw new Error('Invalid option `format` at output({ ... })');
42
+
43
+
const extension = format === 'esm'
44
+
? (settings.hasReact ? '.es.js' : '.mjs')
45
+
: '.js';
46
+
47
+
return {
48
+
chunkFileNames: '[hash]' + extension,
49
+
entryFileNames: '[name]' + extension,
50
+
dir: './dist',
51
+
exports: 'named',
52
+
externalLiveBindings: false,
53
+
sourcemap: true,
54
+
esModule: false,
55
+
indent: false,
56
+
freeze: false,
57
+
strict: false,
58
+
format,
59
+
plugins: makeOutputPlugins({
60
+
isProduction,
61
+
extension: format === 'esm' ? '.mjs' : '.js',
62
+
})
63
+
};
64
+
};
65
+
66
+
export default {
38
67
input,
39
68
external: settings.isExternal,
40
69
onwarn() {},
70
+
plugins,
71
+
output: [
72
+
output({ format: 'cjs', isProduction: false }),
73
+
output({ format: 'esm', isProduction: false }),
74
+
!settings.isCI && output({ format: 'cjs', isProduction: true }),
75
+
!settings.isCI && output({ format: 'esm', isProduction: true }),
76
+
].filter(Boolean),
41
77
treeshake: {
42
78
unknownGlobalSideEffects: false,
43
79
tryCatchDeoptimization: false,
44
80
moduleSideEffects: false
45
81
}
46
82
};
47
-
48
-
const output = (format = 'cjs', ext = '.js') => ({
49
-
chunkFileNames: '[hash]' + ext,
50
-
entryFileNames: '[name]' + ext,
51
-
dir: './dist',
52
-
exports: 'named',
53
-
externalLiveBindings: false,
54
-
sourcemap: true,
55
-
esModule: false,
56
-
indent: false,
57
-
freeze: false,
58
-
strict: false,
59
-
format,
60
-
});
61
-
62
-
export default [
63
-
{
64
-
...config,
65
-
shimMissingExports: true,
66
-
plugins,
67
-
output: [
68
-
output('cjs', '.js'),
69
-
output('esm', settings.hasReact ? '.es.js' : '.mjs'),
70
-
],
71
-
},
72
-
!settings.isCI && {
73
-
...config,
74
-
plugins: makePlugins({ isProduction: true }),
75
-
output: [
76
-
output('cjs', '.min.js'),
77
-
output('esm', settings.hasReact ? '.min.es.js' : '.min.mjs'),
78
-
],
79
-
},
80
-
].filter(Boolean);
+26
-17
scripts/rollup/plugins.js
+26
-17
scripts/rollup/plugins.js
···
18
18
19
19
import * as settings from './settings';
20
20
21
-
export const makePlugins = ({ isProduction } = {}) => [
21
+
export const makePlugins = () => [
22
22
resolve({
23
23
dedupe: settings.externalModules,
24
24
extensions: ['.js', '.jsx', '.ts', '.tsx'],
···
49
49
compilerOptions: {
50
50
sourceMap: true,
51
51
noEmit: false,
52
-
declaration: !isProduction,
52
+
declaration: true,
53
53
declarationDir: settings.types,
54
54
target: 'esnext',
55
55
},
···
75
75
babelPluginTransformDebugTarget,
76
76
babelPluginTransformPipe,
77
77
babelPluginTransformInvariant,
78
-
'babel-plugin-modular-graphql',
79
78
'babel-plugin-closure-elimination',
80
79
'@babel/plugin-transform-object-assign',
81
80
settings.hasReact && ['@babel/plugin-transform-react-jsx', {
···
93
92
}]
94
93
].filter(Boolean)
95
94
}),
96
-
isProduction && replace({
97
-
'process.env.NODE_ENV': JSON.stringify('production')
98
-
}),
99
-
!settings.mayReexport && compiler({
100
-
formatting: 'PRETTY_PRINT',
101
-
compilation_level: 'SIMPLE_OPTIMIZATIONS'
102
-
}),
103
-
cleanup(),
104
-
isProduction ? terserMinified : terserPretty,
105
-
isProduction && settings.isAnalyze && visualizer({
106
-
filename: path.resolve(settings.cwd, 'node_modules/.cache/analyze.html'),
107
-
sourcemap: true,
108
-
}),
109
-
].filter(Boolean);
95
+
];
96
+
97
+
export const makeOutputPlugins = ({ isProduction, extension }) => {
98
+
if (typeof isProduction !== 'boolean')
99
+
throw new Error('Missing option `isProduction` on makeOutputPlugins({ ... })');
100
+
if (extension !== '.mjs' && extension !== '.js')
101
+
throw new Error('Missing option `extension` on makeOutputPlugins({ ... })');
102
+
103
+
return [
104
+
isProduction && replace({
105
+
'process.env.NODE_ENV': JSON.stringify('production')
106
+
}),
107
+
!settings.mayReexport && compiler({
108
+
formatting: 'PRETTY_PRINT',
109
+
compilation_level: 'SIMPLE_OPTIMIZATIONS'
110
+
}),
111
+
cleanup({ extension }),
112
+
isProduction ? terserMinified : terserPretty,
113
+
isProduction && settings.isAnalyze && visualizer({
114
+
filename: path.resolve(settings.cwd, 'node_modules/.cache/analyze.html'),
115
+
sourcemap: true,
116
+
}),
117
+
].filter(Boolean);
118
+
};
110
119
111
120
const terserPretty = terser({
112
121
warnings: true,
+4
-4
yarn.lock
+4
-4
yarn.lock
···
3976
3976
dependencies:
3977
3977
babel-helper-is-void-0 "^0.4.3"
3978
3978
3979
-
babel-plugin-modular-graphql@0.1.3:
3980
-
version "0.1.3"
3981
-
resolved "https://registry.yarnpkg.com/babel-plugin-modular-graphql/-/babel-plugin-modular-graphql-0.1.3.tgz#23d474daab2278229bfc9a9f2491f3e1d9f555f1"
3982
-
integrity sha512-13QBZm1sqPTHVBlG79p0jswR+FdNIIaxRrg1tNjpfGYU4U9M8bEDVQ51QK9+cZ6zUBQ0k2mh0iRvCjZt+856pg==
3979
+
babel-plugin-modular-graphql@1.0.0:
3980
+
version "1.0.0"
3981
+
resolved "https://registry.yarnpkg.com/babel-plugin-modular-graphql/-/babel-plugin-modular-graphql-1.0.0.tgz#f8575e746895cf9652ec1ad804661791f520d56c"
3982
+
integrity sha512-yyj8KcO1YU4LfaUGOyP1DY9y3CdqRhc5WhTWYD2XNx8jX4OBLVED+QBY1QmCNLsVqyXyfsv86C2BnwaMnFfDKQ==
3983
3983
3984
3984
babel-plugin-named-asset-import@^0.3.1:
3985
3985
version "0.3.6"