Error: Unsupported operation: 'Uri.base' is not supported

[Justinidlerz]

Describe the bug

Dart sass block createServer().ssrLoadModule();
Using sass in ssrLoadModule will throw error:

Error: Unsupported operation: 'Uri.base' is not supported
    at Object._newRenderError (/Users/project/node_modules/sass/sass.dart.js:13537:19)
    at _render_closure1.call$2 (/Users/project/node_modules/sass/sass.dart.js:80375:21)
    at _RootZone.runBinary$3$3 (/Users/project/node_modules/sass/sass.dart.js:27269:18)
    at _FutureListener.handleError$1 (/Users/project/node_modules/sass/sass.dart.js:25797:19)
    at _Future__propagateToListeners_handleError.call$0 (/Users/project/node_modules/sass/sass.dart.js:26094:49)
    at Object._Future__propagateToListeners (/Users/project/node_modules/sass/sass.dart.js:4543:77)
    at _Future._completeError$2 (/Users/project/node_modules/sass/sass.dart.js:25927:9)
    at _Future__asyncCompleteError_closure.call$0 (/Users/project/node_modules/sass/sass.dart.js:26016:18)
    at Object._microtaskLoop (/Users/project/node_modules/sass/sass.dart.js:4594:24)
    at StaticClosure._startMicrotaskLoop (/Users/project/node_modules/sass/sass.dart.js:4600:11) {
  formatted: "Error: Unsupported operation: 'Uri.base' is not supported",
  status: 3,
  id: '/Users/project/src/pages/FindProductDetail/FindProductDetail.module.scss',
  frame: "Error: Unsupported operation: 'Uri.base' is not supported",
  plugin: 'vite:css'

Seems the bug is triggered by this one: dart-lang/sdk#27979

Reproduction

Create an Scss file test-module.scss
Create an entry file: index.ts

import classes from './test-module.scss';

2. Create the build file, see like:

const path = require('path');
const {createServer} = require('vite');

const build = async () => {
	const devServer = await createServer({});

	const entryPath = path.resolve(__dirname, './index.ts');
	const App = await devServer.ssrLoadModule(entryPath);

	console.log(App);
};

build()
	.then(() => {
		console.log(`Build pages done.`);
		process.exit(0);
	})
	.catch((e) => {
		console.error(`Build pages failed.`);
		console.error(e);
		process.exit(1);
	});

3. Run the script

node build.js

Then get the error.

System Info

• vite version: 2.0.3
• Operating System: macOS 10.15.7 (19H2) Darwin 19.6.0
• Node version: v14.16.0
• Package manager (npm/yarn/pnpm) and version: 1.22.10

[yyx990803]

Cannot reproduce using the provided snippets - also, this seems to be a purely upstream issue.

[zhangyuang]

@Justinidlerz
In ssr environment, sass.dart.js contain below code

var dartNodePreambleSelf = typeof global !== "undefined" ? global : window;
var self = Object.create(dartNodePreambleSelf);

Primitives_currentUri: function() {
      if (!!self.location)
        return self.location.href;
      return null;
    },
 Uri_base: function() {
      debugger
      var uri = H.Primitives_currentUri();
      if (uri != null)
        return P.Uri_parse(uri);
      throw H.wrapException(P.UnsupportedError$("'Uri.base' is not supported"));
    },

So, you must add location.href in Node.js global object。
For example, if you use ssr framework which you can get ctx object from props in layout.vue

export default {
  props: ['ctx'],
  created () {
    global.location = {
      href: this.ctx.request.url
    }
  }
}

it can be render succeed with combine vite and sass in ssr scene

[github-actions]

This issue has been locked since it has been closed for more than 14 days.

If you have found a concrete bug or regression related to it, please open a new bug report with a reproduction against the latest Vite version. If you have any other comments you should join the chat at Vite Land or create a new discussion.