[v3] PostCSS module imports use relative path instead of baseUrl

[jamsch]

Is this a bug report?

Yes

Did you try recovering your dependencies?

Yes

Environment

Environment Info:

  System:
    OS: Linux 4.15 Ubuntu 18.04.2 LTS (Bionic Beaver)
    CPU: (8) x64 Intel(R) Core(TM) i7-7700K CPU @ 4.20GHz
  Binaries:
    Node: 10.15.3 - ~/.nvm/versions/node/v10.15.3/bin/node
    Yarn: 1.15.2 - ~/.yarn/bin/yarn
    npm: 6.9.0 - ~/.nvm/versions/node/v10.15.3/bin/npm
  Browsers:
    Chrome: 73.0.3683.86
    Firefox: 66.0.3
  npmPackages:
    react: 16.8.6 => 16.8.6 
    react-dom: 16.8.6 => 16.8.6 
    react-scripts: 3.0.0 => 3.0.0 
  npmGlobalPackages:
    create-react-app: Not Found

Steps to Reproduce

Given the project structure:

src/
- components/
---- YoutubePlaylist.tsx
---- YoutubePlaylist.module.css
- res/
---- breakpoints.css
tsconfig.json

1. Configure baseUrl in tsconfig.json (or jsconfig.json)

{
  "compilerOptions": {
    "baseUrl": "src",
   }
}

2. Use the following code snippet anywhere in a CSS module

@value tablet from "res/breakpoints.css";

2. Run npm start

3. See the following error message:

Failed to compile.

./src/components/YoutubePlaylist.module.scss (./node_modules/css-loader/dist/cjs.js??ref--6-oneOf-6-1!./node_modules/postcss-loader/src??postcss!./node_modules/sass-loader/lib/loader.js??ref--6-oneOf-6-3!./src/components/YoutubePlaylist.module.scss)
Module not found: Can't resolve './res/breakpoints.css' in '/home/jamsch/Documents/test-site/client/src/components'

Expected Behavior

Module resolution should be relative to the src directory.

Actual Behavior

Module resolution attempts to resolve relative to the directory the file is importing from.

Additional info

I had this configured for v2 using aliases, react-app-rewired, & customize-cra

./config-overrides.js

const path = require("path");
const { override, addWebpackAlias } = require("customize-cra");

module.exports = override(
  addWebpackAlias({
    "~": path.resolve(__dirname, "src")
  })
);

./tsconfig.json -- CRA was hard removing paths so I was forced to do this:

{
  "extends": "./paths.json",
}

./paths.json

{
  "compilerOptions": {
    "baseUrl": "src",
    "rootDir": ".",
    "paths": {
      "~/*": ["*"]
    }
  }
}

./src/components/YoutubePlaylist.module.scss

@value tablet from "~/res/breakpoints.css";

On v2 this works fine, but on v3 it seems to import from the root dir.

Module not found: You attempted to import ../../../../../../../../../res/breakpoints.css which falls outside of the project src/ directory. Relative imports outside of src/ are not supported.

[pewniak747]

@jamsch I had the same issue in my project. I found out that this behavior is caused by css-loader upgrade in new create-react-app.

The path resolving logic in css-loader was changed. Now, an import in css file is treated as a local import by default (adding ./, so res/breakpoints.css -> ./res/breakpoints.css. To avoid this, you need to prefix the import with ~ : (~res/breakpoints.css, not ~/res/breakpoints.css).

Adding src as a baseUrl and importing with ~ prefix is what worked for me.

See the "BREAKING CHANGES" section of the relevant css-loader release for more info: https://github.com/webpack-contrib/css-loader/releases/tag/v2.0.0

[devrlonardi]

Having the same issue, we have imports like:

@value minTabletBreakpoint from 'styles/grid.css';

The import now fails in version 3.0.1 because it tries to resolve it as ./styles/grid.css.

In our case we don't use baseUrl but NODE_PATH=src in the .env file.