fix: webpack resolve options

docs/CONFIGURATION.md

@@ -80,6 +80,13 @@ module.exports = {
 - `babelOptions: Object`
 
   If you need to specify custom babel configuration, you can pass them here. These babel options will be used by Linaria when parsing and evaluating modules.
+
+- `resolveOptions: Object`
+
+  By default, the loader will resolve modules using the `alias` and `modules`
+  settings from your Webpack configuration. If you need additional custom
+  configuration for resolving modules, use this property to add or customize the
+  [enhanced-resolve options](https://www.npmjs.com/package/enhanced-resolve#user-content-resolver-options).
 
 ## `@linaria/babel-preset`
 

packages/webpack4-loader/src/index.ts

@@ -34,11 +34,17 @@ export default function webpack4Loader(
 
   EvalCache.clearForFile(this.resourcePath);
 
+  const resolveOptionsDefaults = {
+    conditionNames: ['require'],
+    extensions: ['.js', '.jsx', '.ts', '.tsx', '.json'],
+  };
+
   const {
     sourceMap = undefined,
     cacheDirectory = '.linaria-cache',
     preprocessor = undefined,
     extension = '.linaria.css',
+    resolveOptions = {},
     ...rest
   } = loaderUtils.getOptions(this) || {};
 
@@ -57,23 +63,21 @@ export default function webpack4Loader(
     )
   );
 
-  const resolveOptions = {
-    extensions: ['.js', '.jsx', '.ts', '.tsx', '.json'],
-  };
-
   const resolveSync = enhancedResolve.create.sync(
     // this._compilation is a deprecated API
     // However there seems to be no other way to access webpack's resolver
     // There is this.resolve, but it's asynchronous
     // Another option is to read the webpack.config.js, but it won't work for programmatic usage
     // This API is used by many loaders/plugins, so hope we're safe for a while
-    this._compilation?.options.resolve
-      ? {
-          ...resolveOptions,
-          alias: this._compilation.options.resolve.alias,
-          modules: this._compilation.options.resolve.modules,
-        }
-      : resolveOptions
+    {
+      ...resolveOptionsDefaults,
+      ...((this._compilation?.options.resolve && {
+        alias: this._compilation.options.resolve.alias,
+        modules: this._compilation.options.resolve.modules,
+      }) ||
+        {}),
+      ...resolveOptions,
+    }
   );
 
   let result;

packages/webpack5-loader/src/index.ts

@@ -32,11 +32,17 @@ export default function webpack5Loader(
 
   EvalCache.clearForFile(this.resourcePath);
 
+  const resolveOptionsDefaults = {
+    conditionNames: ['require'],
+    extensions: ['.js', '.jsx', '.ts', '.tsx', '.json'],
+  };
+
   const {
     sourceMap = undefined,
     cacheDirectory = '.linaria-cache',
     preprocessor = undefined,
     extension = '.linaria.css',
+    resolveOptions = {},
     ...rest
   } = this.getOptions() || {};
 
@@ -55,23 +61,21 @@ export default function webpack5Loader(
     )
   );
 
-  const resolveOptions = {
-    extensions: ['.js', '.jsx', '.ts', '.tsx', '.json'],
-  };
-
   const resolveSync = enhancedResolve.create.sync(
     // this._compilation is a deprecated API
     // However there seems to be no other way to access webpack's resolver
     // There is this.resolve, but it's asynchronous
     // Another option is to read the webpack.config.js, but it won't work for programmatic usage
     // This API is used by many loaders/plugins, so hope we're safe for a while
-    this._compilation?.options.resolve
-      ? {
-          ...resolveOptions,
-          alias: this._compilation.options.resolve.alias,
-          modules: this._compilation.options.resolve.modules,
-        }
-      : resolveOptions
+    {
+      ...resolveOptionsDefaults,
+      ...((this._compilation?.options.resolve && {
+        alias: this._compilation.options.resolve.alias,
+        modules: this._compilation.options.resolve.modules,
+      }) ||
+        {}),
+      ...resolveOptions,
+    }
   );
 
   let result;