Webpack error with imported variables

[kinetifex]

Environment

• Linaria version: 3.0.0-beta.13
• Bundler (+ version): webpack@5.59.0
• Node.js version: 14.15.1
• OS: macOS@11.6

Description

We've been using Linaria successfully in our projects for a while now. However, I have encountered a strange issue recently with using the Webpack loader, but which works with CLI.

If I use a constant that is imported from another module, Webpack blows up with finishWithoutResolve error.

For example:

import { styled } from '@linaria/react';
import { device, size } from './breakpoints';

const Description = styled.p`
  background-color: orange;
 
  @media ${ device.tablet } {    
    background-color: blue;
  }
`;

Fails to build, erroring with:
Can't resolve './breakpoints' in '/path/to/linaria-webpack-bug/src'

Reproducible Demo

A reproducible repo with steps is available here:
https://github.com/kinetifex/linaria-webpack-bug

[kinetifex]

So, the root of the problem is the missing extension in the import. The enhanced resolve doesn't know how to find it. It appears that the default resolve option extensions were dropped in this #830.

A few options for this fix:

1. Update all import paths to include the extension (i.e. ./breakpoints.js)
2. Set the resolve.extensions in the webpack config
3. Set the resolveOptions.extensions for the Webpack loader options.

[kinetifex]

Re-opening this as my work-around 👆🏻 really shouldn't be required for basic configs. The resolve.extensions and conditionNames would still benefit from having defaults, at best utilizing the defaults from Webpack itself (docs).

[Anber]

Hi @kinetifex!

I think it's happened because the default value for extensions is an empty array, which is replaced with the default list of extensions somewhere inside Webpack. I've added a workaround for that case. I hope it'll help.