Skip to content

Commit 7413d87

Browse files
alsonleejalsonleej
authored
Update craco.config.js
1 parent 9312d38 commit 7413d87

File tree

1 file changed

+209
-29
lines changed

1 file changed

+209
-29
lines changed

‎craco.config.js‎

Lines changed: 209 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -40,17 +40,17 @@ const cracoConfig = {
4040
// Polyfill Node.js core modules.
4141
// An empty implementation (false) is provided when there is no browser equivalent.
4242
webpackConfig.resolve.fallback = {
43-
child_process: false,
44-
constants: require.resolve('constants-browserify'),
45-
fs: false,
46-
http: require.resolve('stream-http'),
47-
https: require.resolve('https-browserify'),
48-
os: require.resolve('os-browserify/browser'),
43+
'child_process': false,
44+
'constants': require.resolve('constants-browserify'),
45+
'fs': false,
46+
'http': require.resolve('stream-http'),
47+
'https': require.resolve('https-browserify'),
48+
'os': require.resolve('os-browserify/browser'),
4949
'path/posix': require.resolve('path-browserify'),
5050
'process/browser': require.resolve('process/browser'),
51-
stream: require.resolve('stream-browserify'),
52-
timers: require.resolve('timers-browserify'),
53-
url: require.resolve('url/')
51+
'stream': require.resolve('stream-browserify'),
52+
'timers': require.resolve('timers-browserify'),
53+
'url': require.resolve('url/'),
5454
};
5555

5656
// workaround .mjs files by Acorn
@@ -60,34 +60,31 @@ const cracoConfig = {
6060
type: 'javascript/auto',
6161
resolve: {
6262
fullySpecified: false
63-
}
63+
},
6464
});
6565

66-
webpackConfig.ignoreWarnings = [
67-
{
68-
// Ignore warnings for dependencies that do not ship with a source map.
69-
// This is because we cannot do anything about our dependencies.
70-
module: /node_modules/,
71-
message: /Failed to parse source map/
72-
},
73-
{
74-
// Ignore the warnings that occur because js-slang uses dynamic imports
75-
// to load Source modules
76-
module: /js-slang\/dist\/modules\/loader\/loaders.js/,
77-
message: /Critical dependency: the request of a dependency is an expression/
78-
}
79-
];
66+
webpackConfig.ignoreWarnings = [{
67+
// Ignore warnings for dependencies that do not ship with a source map.
68+
// This is because we cannot do anything about our dependencies.
69+
module: /node_modules/,
70+
message: /Failed to parse source map/
71+
}, {
72+
// Ignore the warnings that occur because js-slang uses dynamic imports
73+
// to load Source modules
74+
module: /js-slang\/dist\/modules\/loader\/loaders.js/,
75+
message: /Critical dependency: the request of a dependency is an expression/
76+
}];
8077

8178
webpackConfig.plugins = [
8279
...webpackConfig.plugins,
8380
// Make environment variables available in the browser by polyfilling the 'process' Node.js module.
8481
new webpack.ProvidePlugin({
85-
process: 'process/browser'
82+
process: 'process/browser',
8683
}),
8784
// Make the 'buffer' Node.js module available in the browser.
8885
new webpack.ProvidePlugin({
89-
Buffer: ['buffer', 'Buffer']
90-
})
86+
Buffer: ['buffer', 'Buffer'],
87+
}),
9188
];
9289

9390
// Workaround to suppress warnings caused by ts-morph in js-slang
@@ -159,15 +156,198 @@ const cracoConfig = {
159156
jestConfig.setupFiles = [
160157
...jestConfig.setupFiles,
161158
'./src/i18n/i18n.ts' // Setup i18next configuration
162-
];
159+
]
163160
return jestConfig;
164161
}
165162
},
166163
babel: {
167-
presets: [['@babel/preset-typescript']]
164+
presets: [
165+
['@babel/preset-typescript']
166+
]
168167
}
168+
}
169+
170+
const ignoreModulePaths = (...paths) => {
171+
const moduleRoot = replaceSlashes('/node_modules/');
172+
const modulePaths = paths
173+
.map(replaceSlashes)
174+
.map(path => `(${path}[/\\\\.*])`)
175+
.join('|');
176+
return moduleRoot + '(?!' + modulePaths + ').*.(js|jsx|ts|tsx)$';
177+
};
178+
const replaceSlashes = target => {
179+
return target.replaceAll('/', '[/\\\\]');
169180
};
170181

182+
module.exports = cracoConfig;/* eslint-disable @typescript-eslint/no-require-imports */
183+
const webpack = require('webpack');
184+
185+
const cracoConfig = {
186+
webpack: {
187+
configure: webpackConfig => {
188+
// avoid the entire process.env being inserted into the service worker
189+
// if SW_EXCLUDE_REGEXES is unset
190+
const definePlugin = webpackConfig.plugins.find(
191+
plugin => plugin.constructor.name === 'DefinePlugin'
192+
);
193+
const inlineProcessEnv = definePlugin.definitions['process.env'];
194+
if (!inlineProcessEnv.REACT_APP_SW_EXCLUDE_REGEXES) {
195+
inlineProcessEnv.REACT_APP_SW_EXCLUDE_REGEXES = undefined;
196+
}
197+
198+
const injectManifestPlugin = webpackConfig.plugins.find(
199+
plugin => plugin.constructor.name === 'InjectManifest'
200+
);
201+
if (injectManifestPlugin) {
202+
injectManifestPlugin.config.maximumFileSizeToCacheInBytes = 20 * 1024 * 1024;
203+
}
204+
205+
// add rules to pack WASM (for Sourceror)
206+
const wasmExtensionRegExp = /\.wasm$/;
207+
webpackConfig.resolve.extensions.push('.wasm');
208+
webpackConfig.module.rules.forEach(rule => {
209+
(rule.oneOf || []).forEach(oneOf => {
210+
if (oneOf.type === 'asset/resource') {
211+
oneOf.exclude.push(wasmExtensionRegExp);
212+
}
213+
});
214+
});
215+
// See https://webpack.js.org/configuration/experiments/#experiments.
216+
webpackConfig.experiments = {
217+
syncWebAssembly: true
218+
};
219+
webpackConfig.output.webassemblyModuleFilename = 'static/[hash].module.wasm';
220+
221+
// Polyfill Node.js core modules.
222+
// An empty implementation (false) is provided when there is no browser equivalent.
223+
webpackConfig.resolve.fallback = {
224+
'child_process': false,
225+
'constants': require.resolve('constants-browserify'),
226+
'fs': false,
227+
'http': require.resolve('stream-http'),
228+
'https': require.resolve('https-browserify'),
229+
'os': require.resolve('os-browserify/browser'),
230+
'path/posix': require.resolve('path-browserify'),
231+
'process/browser': require.resolve('process/browser'),
232+
'stream': require.resolve('stream-browserify'),
233+
'timers': require.resolve('timers-browserify'),
234+
'url': require.resolve('url/'),
235+
};
236+
237+
// workaround .mjs files by Acorn
238+
webpackConfig.module.rules.push({
239+
test: /\.mjs$/,
240+
include: /node_modules/,
241+
type: 'javascript/auto',
242+
resolve: {
243+
fullySpecified: false
244+
},
245+
});
246+
247+
webpackConfig.ignoreWarnings = [{
248+
// Ignore warnings for dependencies that do not ship with a source map.
249+
// This is because we cannot do anything about our dependencies.
250+
module: /node_modules/,
251+
message: /Failed to parse source map/
252+
}, {
253+
// Ignore the warnings that occur because js-slang uses dynamic imports
254+
// to load Source modules
255+
module: /js-slang\/dist\/modules\/loader\/loaders.js/,
256+
message: /Critical dependency: the request of a dependency is an expression/
257+
}];
258+
259+
webpackConfig.plugins = [
260+
...webpackConfig.plugins,
261+
// Make environment variables available in the browser by polyfilling the 'process' Node.js module.
262+
new webpack.ProvidePlugin({
263+
process: 'process/browser',
264+
}),
265+
// Make the 'buffer' Node.js module available in the browser.
266+
new webpack.ProvidePlugin({
267+
Buffer: ['buffer', 'Buffer'],
268+
}),
269+
];
270+
271+
// Workaround to suppress warnings caused by ts-morph in js-slang
272+
webpackConfig.module.noParse = /node_modules\/@ts-morph\/common\/dist\/typescript\.js$/;
273+
274+
return webpackConfig;
275+
}
276+
},
277+
jest: {
278+
configure: jestConfig => {
279+
jestConfig.transformIgnorePatterns = [
280+
// Will give something like
281+
// '[/\\\\]node_modules[/\\\\]
282+
// (?!
283+
// ( @ion-phaser[/\\\\]react[/\\\\.*] )|
284+
// ( js-slang[/\\\\.*] )|
285+
// ( array-move[/\\\\.*] )|
286+
// ...
287+
// ( comma-separated-tokens[/\\\\.*] )
288+
// ).*.(js|jsx|ts|tsx)$'
289+
ignoreModulePaths(
290+
'@ion-phaser/react',
291+
'js-slang',
292+
'array-move',
293+
'konva',
294+
'react-konva',
295+
'react-debounce-render',
296+
'devlop',
297+
'hastscript',
298+
'hast-to-hyperscript',
299+
'hast-util-.+',
300+
'mdast-util-.+',
301+
'micromark',
302+
'micromark-.+',
303+
'vfile',
304+
'vfile-message',
305+
'unist-util-.+',
306+
'web-namespaces',
307+
'rehype-react',
308+
'unified',
309+
'bail',
310+
'is-plain-obj',
311+
'trough',
312+
'decode-named-character-reference',
313+
'character-entities',
314+
'trim-lines',
315+
'property-information',
316+
'space-separated-tokens',
317+
'comma-separated-tokens',
318+
'query-string',
319+
'decode-uri-component',
320+
'split-on-first',
321+
'filter-obj',
322+
'@sourceacademy/c-slang',
323+
'java-parser',
324+
'conductor'
325+
),
326+
'^.+\\.module\\.(css|sass|scss)$'
327+
];
328+
jestConfig.moduleNameMapper['unist-util-visit-parents/do-not-use-color'] =
329+
'<rootDir>/node_modules/unist-util-visit-parents/lib';
330+
jestConfig.moduleNameMapper['vfile/do-not-use-conditional-minpath'] =
331+
'<rootDir>/node_modules/vfile/lib';
332+
jestConfig.moduleNameMapper['vfile/do-not-use-conditional-minproc'] =
333+
'<rootDir>/node_modules/vfile/lib';
334+
jestConfig.moduleNameMapper['vfile/do-not-use-conditional-minurl'] =
335+
'<rootDir>/node_modules/vfile/lib';
336+
337+
jestConfig.setupFiles = [
338+
...jestConfig.setupFiles,
339+
'./src/i18n/i18n.ts' // Setup i18next configuration
340+
]
341+
return jestConfig;
342+
}
343+
},
344+
babel: {
345+
presets: [
346+
['@babel/preset-typescript']
347+
]
348+
}
349+
}
350+
171351
const ignoreModulePaths = (...paths) => {
172352
const moduleRoot = replaceSlashes('/node_modules/');
173353
const modulePaths = paths

0 commit comments

Comments
 (0)