Preact brags that it doesn't need build tools , but I don't see a way to make preact-router/match
work. When I do:
<script type="module">
import { Match } from 'https://unpkg.com/preact-router@3.2.1/src/match.js';
</script>
it complains about the <Match>
tags in the file :
Uncaught SyntaxError: expected expression, got '<'
And this one is apparently not a JavaScript module. Is there a way to make it work? Alternatively, what are the changes to be done to preact-router
to make it work?
The preact
and preact-router
are two different packages. preact-router
itself has a dependency on preact
. So, there is a dependency graph. To resolve this dependency graph without any builder within the browser itself, you need System.js or equivalent.
Alternately, instead of loading preact-router
as a Module
, import it as a normal self-bundled IIFE script as:
<script src="https://unpkg.com/preact-router@3.2.1/dist/preact-router.js"></script>
Just ensure that before this script is loaded preact
is also available globally. So, you should have:
<script src="https://unpkg.com/preact@10.5.13/dist/preact.min.js"></script>
<script src="https://unpkg.com/preact-router@3.2.1/dist/preact-router.js"></script>
To use ES bundle, you should use from this location:
https://unpkg.com/browse/preact-router@3.2.1/dist/preact-router.es.js
If you open this file you will notice that it imports from the preact
library as:
import { Component, cloneElement, createElement, toChildArray } from 'preact';
When you load this as module
type in browser and when browser encounters this import statement, it cannot figure from where it has to exactly get the preact
dependency. Is it relative to the CDN? Is it relative to the domain from where you are loading the app? Or, is it relative to the path shown in address bar of the browser?
In case of TypeScript/Bable or front-end blunder like Webpack, it generally pulls it from node_modules using Node resolution algorithm. But browser doesn't have knowledge of node_modules. You have to teach it. At compile time, we use module bundler whereas at runtime, if you need to resolve modules, you need module loader like System.js .
There are four types of imports in ES Modules
// 1. Bare imports (Not supported by browsers directly)
import { Component } from 'preact';
// 2. Relative imports (Supported)
import { X } from './x.js';
// 3. Root relative imports (Supported)
import { X } from '/relative/to/site/root/x.js';
// 4. Absolute imports (Supported)
import { render } from 'https://unpkg.com/preact@10.5.13/dist/preact.module.js';
Thus, even if your library is shipped as ES module, internally it has dependency on bare import specified 'preact'
which browser cannot resolve.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.