Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update & fix react messaging #188

Merged
merged 1 commit into from
Feb 4, 2020
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
- snowpack installing...
⠼ snowpack installing... react-dom
✖ Dependency "react-dom" has no native "module" entrypoint.
To continue, install our drop-in, ESM-ready builds of "react" & "react-dom" to your project:
npm: npm install react@npm:@pika/react react-dom@npm:@pika/react-dom
yarn: yarn add react@npm:@pika/react react-dom@npm:@pika/react-dom
See https://www.snowpack.dev/#react for more info.
⚠ Finished with warnings.

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

13 changes: 13 additions & 0 deletions __tests__/integration/error-react-explicit/package.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
{
"scripts": {
"TEST": "node ../../../pkg/dist-node/index.bin.js"
},
"snowpack": {
"webDependencies": [
"react-dom"
]
},
"dependencies": {
"react-dom": "latest"
}
}
8 changes: 8 additions & 0 deletions __tests__/integration/error-react/expected-output.txt
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
- snowpack installing...
⠼ snowpack installing... react
✖ Dependency "react" has no native "module" entrypoint.
To continue, install our drop-in, ESM-ready builds of "react" & "react-dom" to your project:
npm: npm install react@npm:@pika/react react-dom@npm:@pika/react-dom
yarn: yarn add react@npm:@pika/react react-dom@npm:@pika/react-dom
See https://www.snowpack.dev/#react for more info.
⚠ Finished with warnings.

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

8 changes: 8 additions & 0 deletions __tests__/integration/error-react/package.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
{
"scripts": {
"TEST": "node ../../../pkg/dist-node/index.bin.js"
},
"dependencies": {
"react": "latest"
}
}
4 changes: 2 additions & 2 deletions docs/08-guides.md
Original file line number Diff line number Diff line change
Expand Up @@ -110,14 +110,14 @@ const html = htm.bind(h);
import React, { useState } from '/web_modules/react.js';
```

**Important:** React is [not yet published with ES Module support](https://github.com/facebook/react/issues/11503), and due to the way it's written, it's impossible to install as a dependency (*"Error: '__moduleExports' is not exported by node_modules/react/index.js"*). **However**, it is still possible to use React with Snowpack thanks to [@sdegutis](https://github.com/sdegutis)'s [@reactesm](https://www.npmjs.com/org/reactesm) project & npm/yarn's alias feature:
**Important:** React is [not yet published with ES Module support](https://github.com/facebook/react/issues/11503), and the way that it's written makes it impossible to install as a dependency (*"Error: '__moduleExports' is not exported by node_modules/react/index.js"*). **However**, React is still supported thanks to our actively-maintained ESM builds of [React](https://www.npmjs.com/package/@pika/react) & [React-DOM](https://www.npmjs.com/package/@pika/react). You can install them both in your project under an alias like so:

```
npm install react@npm:@reactesm/react react-dom@npm:@reactesm/react-dom
yarn add react@npm:@reactesm/react react-dom@npm:@reactesm/react-dom
```

When installed under the usual react/react-dom alias, Snowpack will install these easier-to-optimize ESM distributions into your `web_modules/` directory.
When installed under the react/react-dom alias, all tooling (including Snowpack) will benefit from these easier-to-analyze ESM distributions of the popular packages.



Expand Down
25 changes: 16 additions & 9 deletions src/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -41,6 +41,7 @@ export interface InstallOptions {
dedupe?: string[];
}

const ALWAYS_SHOW_ERRORS = new Set(['react', 'react-dom']);
const cwd = process.cwd();
const banner = chalk.bold(`snowpack`) + ` installing... `;
const installResults = [];
Expand Down Expand Up @@ -117,15 +118,14 @@ function detectExports(filePath: string): string[] | undefined {
*/
function resolveWebDependency(dep: string, isExplicit: boolean): DependencyLoc {
// if dep includes a file extension, check that dep isn't a package before returning
const depManifestLoc = resolveFrom.silent(cwd, `${dep}/package.json`);
if (path.extname(dep) && !resolveFrom.silent(cwd, `${dep}/package.json`)) {
const isJSFile = ['.js', '.mjs', '.cjs'].includes(path.extname(dep));
return {
type: isJSFile ? 'JS' : 'ASSET',
loc: resolveFrom(cwd, dep),
};
}

const depManifestLoc = resolveFrom.silent(cwd, `${dep}/package.json`);
if (!depManifestLoc) {
throw new ErrorWithHint(
`"${dep}" not found. Have you installed the package via npm?`,
Expand All @@ -139,6 +139,19 @@ function resolveWebDependency(dep: string, isExplicit: boolean): DependencyLoc {
if (!foundEntrypoint && isExplicit) {
foundEntrypoint = depManifest.main || 'index.js';
}
if (
(dep === 'react' || dep === 'react-dom') &&
(!foundEntrypoint || foundEntrypoint === 'index.js')
) {
throw new ErrorWithHint(
chalk.bold(`Dependency "${dep}" has no native "module" entrypoint.`) +
`
To continue, install our drop-in, ESM-ready builds of "react" & "react-dom" to your project:
npm: npm install react@npm:@pika/react react-dom@npm:@pika/react-dom
yarn: yarn add react@npm:@pika/react react-dom@npm:@pika/react-dom`,
chalk.italic(`See ${chalk.underline('https://www.snowpack.dev/#react')} for more info.`),
);
}
if (!foundEntrypoint) {
throw new ErrorWithHint(
`dependency "${dep}" has no native "module" entrypoint.`,
Expand All @@ -147,12 +160,6 @@ function resolveWebDependency(dep: string, isExplicit: boolean): DependencyLoc {
),
);
}
if (dep === 'react' && foundEntrypoint === 'index.js') {
throw new ErrorWithHint(
`dependency "react" has no native "module" entrypoint.`,
chalk.italic(`See: ${chalk.underline('https://github.com/pikapkg/web#a-note-on-react')}`),
);
}
return {
type: 'JS',
loc: path.join(depManifestLoc, '..', foundEntrypoint),
Expand Down Expand Up @@ -224,7 +231,7 @@ export async function install(
} catch (err) {
installResults.push([installSpecifier, false]);
spinner.text = banner + formatInstallResults(skipFailures);
if (skipFailures) {
if (skipFailures && !ALWAYS_SHOW_ERRORS.has(installSpecifier)) {
continue;
}
// An error occurred! Log it.
Expand Down