Parcel 2: @parcel/transformer-raw problems

[Banou26]

🐛 bug report

https://github.com/Banou26/parcel-bug-4174

When using this configuration as per #1080 (comment) and #501 (comment)
.parcelrc

{
  "extends": "@parcel/config-default",
  "transforms": {
    "url:*": ["@parcel/transformer-raw"]
  }
}

The end build isn't transpiled at all, for example in the repro, the index.html imports index.ts which contains

import './foo.ts'

console.log('foo')

and the output build Parcel serves is

/parcel-test.d7ebec59.ts

import './foo.ts'

console.log('foo')

🎛 Configuration (.babelrc, package.json, cli command)

.parcelrc

{
  "extends": "@parcel/config-default",
  "transforms": {
    "url:*": ["@parcel/transformer-raw"]
  }
}

package.json

{
  "name": "parcel-raw-transform",
  "version": "0.0.1",
  "main": "index.js",
  "license": "MIT",
  "devDependencies": {
    "parcel": "^2.0.0-nightly.116"
  },
  "scripts": {
    "dev": "parcel src/index.html"
  }
}

I tried with both the 2.0.0-alpha.3.2 and 2.0.0-nightly.116

[mischnic]

"main": "index.js", disables node_modules bundling

[Banou26]

The result is exactly the same with "main": "src/index.ts" or "main": "dist/index.js" and even without the field at all.
Also tried replacing "main" by "browser": "dist/index.js" with its related target, but once again, same result

[mischnic]

Use any name for the target except main, browser or module.

[Banou26]

I've tried again using this config

{
  "name": "parcel-raw-transform",
  "version": "0.0.1",
  "license": "MIT",
  "devDependencies": {
    "parcel": "^2.0.0-nightly.116"
  },
  "scripts": {
    "dev": "parcel src/index.html --target=appModern"
  },
  "appModern": "dist/browserModern/index.html",
  "targets": {
    "appModern": {
      "engines": {
        "browsers": ["last 1 chrome version"]
      }
    }
  }
}

the build in /dist/browserModern still only contains

import './foo.ts'

console.log('foo')

and now in addition, even though the logs says Server running at http://localhost:1234 i'm getting

Request URL: http://localhost:1234/
Request Method: GET
Status Code: 403 Forbidden

If i remove --target=appModern, then the serving server responds correctly, but i'm still getting the same original problem, which is having this error

- Refused to execute script from 'http://localhost:1234/parcel-test.d7ebec59.ts' because its MIME type ('video/mp2t') is not executable.

because the served html file points to a .ts file which is not transpiled
/parcel-test.d7ebec59.ts

import './foo.ts'

console.log('foo')

[Banou26]

The problem happens most of the time when there's a url:* in a transforms property name.

{
  "extends": "@parcel/config-default",
  "transforms": {
-    "url:*": ["@parcel/transformer-raw"] // throws
-    "url:*.*": ["@parcel/transformer-raw"] // throws
+    "url:*foo.*": ["@parcel/transformer-raw"] // ok
+    "urlfoo:*": ["@parcel/transformer-raw"] // ok
+    "url:a:*": ["@parcel/transformer-raw"] // ok
+    // ect...
  }
}

[mischnic]

Indeed, it seems like the ts import is matched with url:* and therefore runs through the raw transformer only.

[Banou26]

The problem also happen on js files but differently, with js files the bundle actually gets built, but the JS asset is still raw.

// ...
})({"238cc7072f28c30752fc1f1e9056221e":[function(require,module,exports) {
import './foo.js'

console.log('foo')

},{}],"d347dc37b6ca23899ffbbc32fd87b43f":[function(require,module,exports) {
// ...

[Banou26]

Any starting points/guidance on how to try to fix it ?

[mischnic]

Quite sure the bug is in here:

parcel/packages/core/core/src/ResolverRunner.js

Lines 64 to 100 in 706a7e6

	let pipeline;
	let filePath;
	let validPipelines = new Set(this.config.getNamedPipelines());
	if (
	// Don't consider absolute paths. Absolute paths are only supported for entries,
	// and include e.g. `C:\` on Windows, conflicting with pipelines.
	!path.isAbsolute(dependency.moduleSpecifier) &&
	dependency.moduleSpecifier.includes(':')
	) {
	[pipeline, filePath] = dependency.moduleSpecifier.split(':');
	if (!validPipelines.has(pipeline)) {
	if (dep.isURL) {
	// This may be a url protocol or scheme rather than a pipeline, such as
	// `url('http://example.com/foo.png')`
	return null;
	} else {
	throw new Error(`Unknown pipeline ${pipeline}.`);
	}
	}
	} else {
	if (dependency.isURL && dependency.moduleSpecifier.startsWith('//')) {
	// A protocol-relative URL, e.g `url('//example.com/foo.png')`
	return null;
	}
	filePath = dependency.moduleSpecifier;
	}
	if (dependency.isURL) {
	let parsed = URL.parse(filePath);
	if (typeof parsed.pathname !== 'string') {
	throw new Error(`Received URL without a pathname ${filePath}.`);
	}
	filePath = decodeURIComponent(parsed.pathname);
	if (!pipeline) {
	pipeline = 'url';
	}
	}

At the end pipeline should be undefined, but I don't think it is.

[Banou26]

I tried fixing it, made a PR, but all tests are failing and i can't even run yarn test without it throwing instantly either, any idea how i can fix that ?
I posted the error in the PR.

[mischnic]

Actually, the error seems to be somewhere else, because

{
  "extends": "@parcel/config-default",
  "transforms": {
    "url:*": ["@parcel/transformer-raw"]
  }
}

should really do nothing (this is already specified in the default config).

[Banou26]

I mean, the PR i made fixed the repo build & properly transpiled the url: into the path value, but it also broke some other tests.
So i don't think i was too far off from the problem there.
Just gotta cover all cases that needs to be covered, i don't know what they are though.

But yeah, if it's specified by default there's a problem somewhere else.

[devongovett]

I think this should be fixed by #6495 which runs transformers from the next matching pipeline before the url transformer.