GithubHelp home page GithubHelp logo

fredkschott / create-snowpack-app Goto Github PK

View Code? Open in Web Editor NEW
728.0 15.0 96.0 1.91 MB

The all-in-one app template for Snowpack. [moved]

Home Page: https://www.snowpack.dev

License: Other

JavaScript 92.51% HTML 4.33% CSS 1.57% TypeScript 0.63% Vue 0.20% Svelte 0.38% Nunjucks 0.39%
snowpack

create-snowpack-app's People

Contributors

34x avatar agneym avatar au5ton avatar bencates avatar brunolemos avatar cesalberca avatar cherniavskii avatar david-else avatar dlindenkreuz avatar doriangrey avatar drwpow avatar eliamartani avatar fredkschott avatar hampuskraft avatar ibaldie avatar jamesgeorge007 avatar jihchi avatar jokull avatar jovidecroock avatar lajoiemedia avatar lukyth avatar mxmul avatar orta avatar robincsl avatar robpalme avatar stefanfrede avatar stramel avatar tyilo avatar valin4tor avatar yannbertrand avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

create-snowpack-app's Issues

create-snowpack-app-react breaks after reinstall

Steps to reproduce:

npx create-snowpack-app new-project --template @snowpack/app-template-react
cd new-project
npm run start

Then I removed node modules and lock file

rm -rf node_modules && rm package-lock.json
npm install
npm run start

Then I get this error, and things are broken:

Error: Parse error @:11:60
 at Object.parse
    at getInstallTargetsForFile 
    at Array.map (<anonymous>)
    at scanImports 
    at async command 
    at async command 

Command failed with exit code 243: npm install @snowpack/app-template-svelte

Just wanted to give snowpack a first shot, but create-snowpack-app keeps failing:

user@home:~:^$ npx create-snowpack-app snowpack-test --template "@snowpack/app-template-svelte" --use-yarn --force
npx: Installierte 36 in 1.994s

  - Using template @snowpack/app-template-svelte
  - Creating a new project in /home/user/snowpack-test
(node:847187) UnhandledPromiseRejectionWarning: Error: Command failed with exit code 243: npm install @snowpack/app-template-svelte --ignore-scripts
    at makeError (/home/user/.npm/_npx/847187/lib/node_modules/create-snowpack-app/node_modules/execa/lib/error.js:59:11)
    at handlePromise (/home/user/.npm/_npx/847187/lib/node_modules/create-snowpack-app/node_modules/execa/index.js:114:26)
    at processTicksAndRejections (internal/process/task_queues.js:97:5)
    at async /home/user/.npm/_npx/847187/lib/node_modules/create-snowpack-app/index.js:127:3
(node:847187) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag `--unhandled-rejections=strict` (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 1)
(node:847187) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

To my surprise, the failing command executes just fine when I execute it manually in the terminal:

user@home:~/testing:^$ npm install @snowpack/app-template-svelte --ignore-scripts
npm WARN lifecycle The node binary used for scripts is /snap/bin/node but npm is using /snap/node/2776/bin/node itself. Use the `--scripts-prepend-node-path` option to include the path for the node binary npm was executed with.
npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@~2.1.2 (node_modules/chokidar/node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@~2.1.2 (node_modules/chokidar/node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
npm WARN @babel/[email protected] requires a peer of @babel/core@^7.0.0-0 but none is installed. You must install peer dependencies yourself.
npm WARN @rollup/[email protected] requires a peer of rollup@^1.20.0 but none is installed. You must install peer dependencies yourself.
npm WARN testing No description
npm WARN testing No repository field.
npm WARN testing No license field.

+ @snowpack/[email protected]
added 22 packages from 3 contributors, removed 18 packages, updated 219 packages and audited 244 packages in 11.864s

22 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

Any suggestions?

Setup:

node: 12.17.0
npm: 6.14.4
yarn: 1.22.4
OS: GNU/Linux / x86_64 / 5.4.0-31-generic

Blank template does not load CSS

Blank template has a file App.css in public folder, but it isn't linked anywhere.

In earlier versions, the .css file in src folder was automatically transpiled and moved to dist folder with build:css if any. But that is no longer the case.

Typescript conflict with required file extension

When running snowpack build on a project using typescript, error messages are shown "...missing required file extension" if I use imports without .ts extension. The build output will also error if loaded on a browser.

The reason why omitting extensions when using typescript is desirable is because of this long-standing issue.

The good news is running snowpack build --bundle works and produces a functioning output. Just wondering if anyone has a found a solution / compromise for this?

Snowpack install fails using React's template

Hello,

I've been willing to use create-snowpack-app with template @snowpack/app-template-react as such:

npx create-snowpack-app zenoid-web --template @snowpack/app-template-react --use-yarn

I'm using Node LTS (12.x) and I've also tried using npm instead of yarn but still get the following error:

$ snowpack
⠼ snowpack installing... https://cdn.pika.dev/-/[email protected]/dist=es2019/csz.js
✘ /Users/charly/tmp/zenoid-web/node_modules/react/cjs/react.production.min.js?commonjs-proxy
👉 https://rollupjs.org/guide/en/#error-name-is-not-exported-by-module

Error: '__moduleExports' is not exported by node_modules/react/cjs/react.production.min.js, imported by /Users/charly/tmp/zenoid-web/node_modules/react/cjs/react.production.min.js?commonjs-proxy
    at error (/Users/charly/tmp/zenoid-web/node_modules/rollup/dist/shared/rollup.js:161:30)
    at Module.error (/Users/charly/tmp/zenoid-web/node_modules/rollup/dist/shared/rollup.js:15006:16)
    at handleMissingExport (/Users/charly/tmp/zenoid-web/node_modules/rollup/dist/shared/rollup.js:14905:28)
    at Module.traceVariable (/Users/charly/tmp/zenoid-web/node_modules/rollup/dist/shared/rollup.js:15401:24)
    at ModuleScope.findVariable (/Users/charly/tmp/zenoid-web/node_modules/rollup/dist/shared/rollup.js:13957:39)
    at Identifier$1.bind (/Users/charly/tmp/zenoid-web/node_modules/rollup/dist/shared/rollup.js:9861:40)
    at ExportDefaultDeclaration.bind (/Users/charly/tmp/zenoid-web/node_modules/rollup/dist/shared/rollup.js:9494:23)
    at Program$1.bind (/Users/charly/tmp/zenoid-web/node_modules/rollup/dist/shared/rollup.js:9490:31)
    at Module.bindReferences (/Users/charly/tmp/zenoid-web/node_modules/rollup/dist/shared/rollup.js:14978:18)
    at Graph.link (/Users/charly/tmp/zenoid-web/node_modules/rollup/dist/shared/rollup.js:18414:20)

error Command failed with exit code 1.

Getting 404 on web_modules/react.js using TypeScript React template

This is the first time I'm using Snowpack. Here is what I did:

My history:

yarn start
cd new-dir/
npx create-snowpack-app new-dir --template @snowpack/app-template-react-typescript --use-yarn
nvm use 12
cd Desktop/
cd
GET http://localhost:8080/web_modules/react.js net::ERR_ABORTED 404 (Not Found)

I ran all of the commands from VSCode. It prompted me to allow VSCode to control Chrome. I'm on Mac.

Other files are ok. I aw App.js being downloaded fine.

React TypeScript Template not working

npx create-snowpack-app snowpack --template @snowpack/app-template-react                                [13:02:22]
npx: Installierte 36 in 1.876s

  - Using template @snowpack/app-template-react
  - Creating a new project in /home/christian/snowpack-webmail

⠹ snowpack installing... https://cdn.pika.dev/-/[email protected]/dist=es2019/csz.js
✘ /home/christian/snowpack-webmail/node_modules/react/cjs/react.production.min.js?commonjs-proxy
👉 https://rollupjs.org/guide/en/#error-name-is-not-exported-by-module

Error using react template

I get an error when trying to use the react template

pro/unnecessary » npx create-snowpack-app snowpack-webmail --template react
npx: installed 36 in 3.914s

  - Using template react
  - Creating a new project in /Users/ben/pro/unnecessary/snowpack-webmail
(node:81046) ExperimentalWarning: The fs.promises API is experimental

[ERROR] Template is not properly marked as a CSA template (Missing "csa-template" keyword in package.json).
[ERROR] Cannot continue safely. Exiting...

"ver is not defined" error on creation of template

When running after installing snowpack@next (tried with snowpack as well), I get:

ver is not defined

I tried installing locally and globally.

Example run:

npx create-snowpack-app snowpack --template @snowpack/app-template-react-typescript

Node version: 14.2.0
Npm/npx version: 6.14.4
Running OS X Catalina

CSA Live Reload

I've been using Snowpack to create a Lit-Element app and it's great. However live reloads only works for files modified directly in the /src directory. I have folders in there for each element and live reload does not work when I modify them. A normal reload doesn't work either. I have to restart the dev server to see changes.

How can I fix this? Here's my snowpack config:

{
  "scripts": {
    "mount:public": "mount public --to .",
    "mount:web_modules": "mount web_modules",
    "mount:src": "mount src --to _dist_",
    "build:js": "cat"
  },
  "installOptions": {},
  "devOptions": {}
}

Will ESLint be included as standard?

Hi, snowpack team.
It's a great project. I love snowpack! 👍

I think ESLint is a JavaScript standard Lint tool,
so I hope ESLint is included in these boilerplates.

out of the box react-typescript template build script throws a "$RefreshSig$ is not defined" browser error

  1. npx create-snowpack-app new-dir --template @snowpack/app-template-react-typescript --use-yarn

  2. yarn build

  3. serve ./build

  4. Open the built bundle in the browser and it throws the following error (with no rendering):

Uncaught ReferenceError: $RefreshSig$ is not defined

Same happens by adding the webpack plugin + adding this in the config file:

{
  "extends": "@snowpack/app-scripts-react",
  "scripts": {
    "bundle:*": "@snowpack/plugin-webpack"
  },
  "plugins": [
    "@snowpack/plugin-webpack"
  ]
}

Any idea why this is happening?

Thanks

Angular?

You forgot Angular starter kit

Svelte template - 'cat' is not recognized

npx/npm 6.14.4
node v12.16.3

I'm trying the Svelte template under Windows (not using WSL).
The installation is completing without an issue
npx create-snowpack-app myfolder --template @snowpack/app-template-svelte

npm start although is producing an error while building:

  Server started in 14ms.

  mount:web_modules.......[DONE]
  mount:public............[DONE]
  plugin:svelte...........[READY]
  build:js................[RUNNING]

▼ Console

  [error] F:\dev\myfolder\src\index.js Error: Command failed with ENOENT: cat
  spawn cat ENOENT
  'cat' is not recognized as an internal or external command,
  operable program or batch file.
      at notFoundError (F:\DEV\myfolder\node_modules\snowpack\node_modules\cross-spawn\lib\enoent.js:6:26)
      at verifyENOENT (F:\DEV\myfolder\node_modules\snowpack\node_modules\cross-spawn\lib\enoent.js:40:16)
      at ChildProcess.cp.emit (F:\DEV\myfolder\node_modules\snowpack\node_modules\cross-spawn\lib\enoent.js:27:25)
...
``


create-snowpack-app fails on git commit

I don't have a global git user.email and user.name and due to this git prompts for it when commiting anything.

(node:21972) UnhandledPromiseRejectionWarning: Error: Command failed with exit code 128: git commit -m initial commit

*** Please tell me who you are.

Run

  git config --global user.email "[email protected]"
  git config --global user.name "Your Name"

to set your account's default identity.
Omit --global to set the identity only in this repository.

fatal: unable to auto-detect email address (got '_@_.(none)')
    at makeError (C:\Users\_\AppData\Roaming\npm-cache\_npx\21972\node_modules\create-snowpack-app\node_modules\execa\lib\error.js:59:11)
    at handlePromise (C:\Users\_\AppData\Roaming\npm-cache\_npx\21972\node_modules\create-snowpack-app\node_modules\execa\index.js:114:26)
    at processTicksAndRejections (internal/process/task_queues.js:97:5)
    at async C:\Users\_\AppData\Roaming\npm-cache\_npx\21972\node_modules\create-snowpack-app\index.js:152:3
(node:21972) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag `--unhandled-rejections=strict` (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 1)
(node:21972) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

svelte template fails

attempted to follow instructions to use svelte template

npx/npm 6.14.4
node 14.2.0, 13.14.0

npx  create-snowpack-app myfolder --template @snowpack/app-template-svelte
  • create-snowpack-app 0.2.5

    • Using template @snowpack/app-template-svelte
    • Creating a new project in /Users/franz/dev/tmp2
      (node:55045) UnhandledPromiseRejectionWarning: Error: ENOENT: no such file or directory, stat '/Users/username/dev/myfolder/node_modules/@snowpack/app-template-svelte'
(Use `node --trace-warnings ...` to show where the warning was created)
(node:55107) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag `--unhandled-rejections=strict` (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 1)
(node:55107) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

Svelte components are built in dev mode

Running npm run build creates svelte components in dev mode. This seems to be correctly implemented in plugin-svelte so the plugin must not receive the correct environment variable.

Build step missing after new setup

When setting up a new app with svelte the build step does not complete (?), the "build:js" step is missing. When opening the app in the browser the dev server answers with 404.

image

Steps to reproduce:

  1. Run npx create-snowpack-app new-dir --template @snowpack/app-template-svelte
  2. cd new-dir
  3. sp dev

Node: 14.2
Snowpack: 2.0.0-beta.9

I am able to start a CSA app I created earlier (last weekish) just fine, the new created one does not work.

Snowpack + Fastify & General Questions

Ideas on combining the two together as a template/starter project?

Also can snowpack take any npm package and pack it for client side use or only specific ones

[error] [404] /web_modules/svelte/internal.js

Follow the instructions from the official site. After running npm start, i get-

[error] [404] /web_modules/svelte/internal.js
✘ <project_dir>/node_modules/.cache/snowpack/dev/svelte/internal.js

I've verified that the file exists in

node_modules/.cache/snowpack/dev/svelte/internal.js

Unsure where to create snowpack app

I am following the instructions here: https://www.snowpack.dev/#install-snowpack

where I first run

npm install --save-dev snowpack@next

in a directory to install the snowpack package. But when I try to run this in the directory with the package.json file:

npx create-snowpack-app . --template @snowpack/app-template-react

It fails with this error: [ERROR] /Users/michaelhagar/personal/snowpack-test already exists. So where am I supposed to target the snowpack app to?

Svelte hmr: dynamic imports yield a full page reload

Hi,

Trying to understand and take advantage of svelte hmr. Really don't know if is just enough to include the hmr snippet in index.js, or if there's additional setup required on a per component basis in order to take full advantage of it.

The index.js is configured with the hmr code:

import App from "./App.svelte";
...

// Hot Module Replacement (HMR) - Remove this snippet to remove HMR.
// Learn more: https://www.snowpack.dev/#hot-module-replacement
if (import.meta.hot) {
  import.meta.hot.accept();
  import.meta.hot.dispose(() => {
    app.$destroy();
  });
}

My svelte app is using a client side router (Navaid) with dynamic imports and works great with snowpack.

  //App.js

  // home component statically imported
  import index from './routes/index.svelte';


  router = Navaid('/')
    // home route in same bundle as App.js
    .on('/', () => run(Promise.resolve(index)))
    // other routes dynamically imported
    .on('/about', () => run(import('./routes/about.svelte')))
    .on('/sign-up', () => run(import('./routes/sign-up/index.svelte')))
    .on('/play/:band', params => run(import('./routes/play/index.svelte'), params))
    .listen();

If I change the statically imported index.svelte component, the hmr module signals an update of _dist_/index.js which in turn reloads the statically imported component chain.

If I change the dynamically imported components, the hmr module signals a full page reload. Maybe more hmr configuration code is required to make dynamically imported components to update instead of a full reload.

Thanks!!

Could not find module './web_modules/import-map.json'

Upon running npx create-snowpack-app new-dir --template @snowpack/app-template-react-typescript and then running npm start in new-dir, the following error occurs:

> @ start /workspaces/snowpack-test/new-dir
> snowpack dev

Snowpack Dev Server (Beta)
NOTE: Still experimental, default behavior may change.
Starting up...

Error: Cannot find module '/workspaces/snowpack-test/new-dir/web_modules/import-map.json'
Require stack:
- /workspaces/snowpack-test/new-dir/node_modules/snowpack/dist-node/index.js
- /workspaces/snowpack-test/new-dir/node_modules/snowpack/dist-node/index.bin.js
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:982:15)
    at Function.Module._load (internal/modules/cjs/loader.js:864:27)
    at Module.require (internal/modules/cjs/loader.js:1044:19)
    at require (internal/modules/cjs/helpers.js:77:18)
    at command$1 (/workspaces/snowpack-test/new-dir/node_modules/snowpack/dist-node/index.js:993:31)
    at cli (/workspaces/snowpack-test/new-dir/node_modules/snowpack/dist-node/index.js:3159:11)

Looks like the web_modules import map isn't being created, but the docs say this will be done automatically upon installation

react-typescript template not working

I'm not able to run the default app created by CSA for react/typescript.

Steps to reproduce:

npx create-snowpack-app myapp --template @snowpack/app-template-react-typescript
cd myapp
npm run start

Seeing a blank page in the browser with an error in the console:

Uncaught TypeError: Cannot read property 'unstable_cancelCallback' of undefined
    at react-dom.js:340
    at react-dom.js:175
    at react-dom.js:175
    at createCommonjsModule (_commonjsHelpers-f5462f22.js:4)
    at react-dom.js:174

The Vue template fails

Running yarn start on the Vue template give a blank page and this error on Chrome devtools:

image

yarn build gives another error:
image

Env: macOS Catalina, node@14

Svelte hmr doesn't pick the style changes

Hi,
I'm still trying to understand how hmr works in snowpack.

Using the default template 0.8.0. When I change the css part of App.js, the hmr module reloads only the js part of the component. I see following resources loaded in the network tab.

_dist_/index.js?mtime=159....
_dist_/App.js?mtime=159

But as the change is in the css part, and svelte regenerates the scoped css, the css part of the component App.css.proxy.js should be loaded as well .

Thanks so much for all the great features in snowpack.

Consider making Parcel optional

Following on from the discussion in #29, I wonder what you would think about making installing Parcel optional? The dev environment in Snowpack V2 is brilliant and personally I think getting people set up with that as quickly and painlessly as possible should be the priority. Parcel installs a huge amount of dependencies (107.3 MB) and many users will still choose to use Webpack or Rollup to build for production. Snowpack-react-app isn't much lighter than create-react-app at the moment but would be much smaller if production bundling wasn't included by default. A script to add Parcel to an existing project would be great.

Consider turning resolveJsonModule TypeScript compiler option on by default

I saw that right now resolveJsonModule won't be true by default for the react-typescript template (https://github.com/pikapkg/create-snowpack-app/blob/master/packages/app-scripts-react/tsconfig.base.json).

I would like to hear your thought about making it true out of the box. I think it's very useful to be able to type-check an imported JSON file, and it doesn't hurt to have it turn on. FWIW, Create React App and Deno has it turned on by default as well.

If you think this is a good idea, I can help taking care of getting this option in :)

Build fails on windows 10

Running the build via "npm run build" with the --bundle flag is failing on windows 10 (without the --bundle flag it succeeds but there are missing files ie. there's no dist folder):


Snowpack

.\build Building your application...

mount:web_modules.......[DONE]
mount:public............[DONE]
plugin:svelte...........[DONE]
build:js................[DONE]
bundle:*................[FAILED]

▼ bundle:*

× C:\home\new-dir.build_dist_\index.js: ENOENT: no such file or directory, open 'C:\home\new-dir.build_dist_\index.js'
Error: ENOENT: no such file or directory, open 'C:\home\new-dir.build_dist_\index.js'
Error: Command failed with exit code 1: parcel build index.html --out-dir C:\home\new-dir\build
× C:\home\new-dir.build_dist_\index.js: ENOENT: no such file or directory, open 'C:\home\new-dir.build_dist_\index.js'
Error: ENOENT: no such file or directory, open 'C:\home\new-dir.build_dist_\index.js'

▼ Result

⚠️ Finished, with errors.

Software used:
Microsoft Windows [Version 10.0.18363.815]
node 12.16.1
npm 6.13.4

app-template-svelte: Dependency svelte/internal not found!

a fresh start with app-template svelte fails to start/build

setup:

npx create-snowpack-app snowpack-svelte-app --template @snowpack/app-template-svelte
cd snowpack-svelte-app

npm start

Snowpack

  http://localhost:8080 > http://192.168.2.119:8080
  Server started in 5ms.

  mount:web_modules.......[DONE] mount $WEB_MODULES --to /web_modules
  mount:public............[DONE] mount public --to /
  mount:src...............[DONE] mount src --to /_dist_
  build:js,jsx,ts,tsx.....[READY] (default) esbuild
  build:svelte............[READY] (plugin) @snowpack/plugin-svelte

npm run build

Snowpack

  ./build Building your application...

  mount:web_modules.......[DONE] mount $WEB_MODULES --to /web_modules
  mount:public............[DONE] mount public --to /
  mount:src...............[DONE] mount src --to /_dist_
  build:js,jsx,ts,tsx.....[DONE] (default) esbuild
  build:svelte............[RUNNING] (plugin) @snowpack/plugin-svelte
  bundle:*................[SKIP] 

▼ Snowpack

  Dependency svelte/internal not found!

versions:
os: ubuntu 18.04
node: 12.17.0
npm: 6.14.5
create-snowpack-app: 1.0.0

Add CONTRIBUTING.md

Add a CONTRIBUTING.md I would like to do this one for my first ever PR! 😊

Nice and easy unbreaking PR would you help through it @FredKSchott ?

app-scripts-react uses the babel cli for typescript instead of plugin-babel, and sourcemaps are not generated

Although the documentation for snowpack recommends using babel via the plugin for performance reasons, the scripts config from @snowpack/app-scripts-react uses the babel cli.

Is there a reason this shouldn't be the plugin (at least in the case where a babel config is found in the project folder?)

The reason I started investigating was that, for some reason (to be determined why), source maps are correctly created at dev time when using babel via the plugin and they are not with the app-scripts-react script setup. Without sourcemaps, it's pretty unpleasant to debug the application at dev time as you only ever see the babel-ified javascript in Chrome debug tools. Making my own scripts config and switching to the babel plugin fixed it, but I'm not clear on why.

React Typescript Template Fails

NPM Ignore is ignoring the web-modules folder and causes npm start and npm build to fail with these errors:

Error: Cannot find module '/snowpack-react/web_modules/import-map.json'
Require stack:
- /snowpack-react/node_modules/snowpack/dist-node/index.js
- /snowpack-react/node_modules/snowpack/dist-node/index.bin.js
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:797:15)
    at Function.Module._load (internal/modules/cjs/loader.js:690:27)
    at Module.require (internal/modules/cjs/loader.js:852:19)
    at require (internal/modules/cjs/helpers.js:74:18)
    at command$1 (/snowpack-react/node_modules/snowpack/dist-node/index.js:941:31)
    at cli (/snowpack-react/node_modules/snowpack/dist-node/index.js:3026:11)

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! @ start: `snowpack dev`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the @ start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

create-snowpack-app CLI fails

I've tried the Vue, blank and React templates, but they all cause the same error:

  - Using template @snowpack/app-template-react
  - Creating a new project in /Users/yann/development/snowpack2/new-dir
(node:32733) UnhandledPromiseRejectionWarning: Error: ENOENT: no such file or directory, stat '/Users/yann/development/snowpack2/new-dir/node_modules/@snowpack/app-template-react'
(Use `node --trace-warnings ...` to show where the warning was created)
(node:32733) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag `--unhandled-rejections=strict` (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 1)
(node:32733) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

Env: macOS Catalina, node@14/12/10

Svelte template doesn't build after adding parcel

We first create the app from the template:

npx create-snowpack-app snowpack-svelte-test --template @snowpack/app-template-svelte --use-yarn
cd snowpack-svelte-test

yarn build now works:

Snowpack

  ./build Building your application...
  mount:public............[DONE]
  mount:web_modules.......[DONE]
  mount:src...............[DONE]
  plugin:svelte...........[DONE]
  bundle:*................[SKIP]

▼ bundle:*

  npm install --save-dev parcel@^2.0.0-0 
  
  Install Parcel into your project to bundle for production.  Set "devOptions.bundle = false" to remove this message.
▶ Build Complete!

Done in 0.52s.

If we do as the instructions says (using yarn instead of npm):

yarn add --dev parcel@^2.0.0-0

Now yarn build fails with:

Snowpack

  ./build Building your application...

  mount:public............[DONE]
  mount:web_modules.......[DONE]
  mount:src...............[DONE]
  plugin:svelte...........[DONE]
  bundle:*................[FAILED]

▼ bundle:*

  Building index.html...
  Building favicon.ico...
  Building index.js...
  🚨 Build failed.
  @parcel/core: Failed to resolve './App.svelte' from '.build/_dist_/index.js'
  /tmp/snowpack-svelte-test/.build/_dist_/index.js:1:17
  > 1 | import App from "./App.svelte";
  >   |                 ^^^^^^^^^^^^^^
    2 | 
    3 | var app = new App({
  @parcel/resolver-default: Cannot load file './App.svelte' in '.build/dist'.
  Error: Command failed with exit code 1: parcel build index.html --dist-dir /tmp/snowpack-svelte-test/build
  @parcel/core: Failed to resolve './App.svelte' from '.build/_dist_/index.js'
  /tmp/snowpack-svelte-test/.build/_dist_/index.js:1:17
  > 1 | import App from "./App.svelte";
  >   |                 ^^^^^^^^^^^^^^
    2 | 
    3 | var app = new App({
  @parcel/resolver-default: Cannot load file './App.svelte' in '.build/dist'.
  Building index.html...
  Building favicon.ico...
  Building index.js...
  🚨 Build failed.

▼ Result

  ⚠️  Finished, with errors.

error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

React template fails with a rollup error

I just wanted to try snowpack for the first time and I chose the react template

npx create-snowpack-app prep-snowpack --template @snowpack/app-template-react

and I got this error

⠸ snowpack installing... https://cdn.pika.dev/-/[email protected]/dist=es2019/csz.js
✘ /prep-snowpack/node_modules/react/cjs/react.production.min.js?commonjs-proxy
👉 https://rollupjs.org/guide/en/#error-name-is-not-exported-by-module

Error: '__moduleExports' is not exported by node_modules/react/cjs/react.production.min.js, imported by /prep-snowpack/node_modules/react/cjs/react.production.min.js?commonjs-proxy
    at error (/prep-snowpack/node_modules/rollup/dist/shared/rollup.js:161:30)

Other templates (svelte for instance) work as expected

env

Node: 12.16.3
yarn : 1.19.0
npm : 6.14.4
OS: Arch Linux

Support create-snowpack-app in existing directory?

Hi! 👋

I wanted to check out create-snowpack-app - it looks very promising!

So I've created a new repo on GitHub and checked it out locally.
Unfortunately, create-snowpack-app doesn't allow to create app in existing directory, which is a little annoying.

Would you accept a PR, which will allow to create project in existing directory?
I'll be happy to contribute :)

Cheers!

On template-blank : snowpack build --bundle, parcelRequire unknown

Hello,

Steps to reproduce:

In a fresh folder.

yarn add -D snowpack@next

[email protected] installed

npx create-snowpack-app my-project-blank --template @snowpack/app-template-blank --use-yarn
npx snowpack build --bundle
cd build && npx http-server

Confetti pop on the screen but there is an error into the dev console:

Capture d’écran 2020-05-06 à 19 56 51

Thanks,

Env: mac mojave | node v11.15.0

create-snowpack-app fails to complete - Windows 10

I have tried to create an app with all the different templates but it always fails with the following output:

npx: installed 36 in 6.43s

  - Using template @snowpack/app-template-blank
  - Creating a new project in C:\repos\my-app
(node:3956) ExperimentalWarning: The fs.promises API is experimental
  - Installing package dependencies. This might take a couple of minutes.


> deasync@0.1.20 install C:\repos\my-app\node_modules\deasync
> node ./build.js

`win32-x64-node-10` exists; testing
Binary is fine; exiting

> core-js@2.6.11 postinstall C:\repos\my-app\node_modules\core-js
> node -e "try{require('./postinstall')}catch(e){}"


> parcel-bundler@1.12.4 postinstall C:\repos\my-app\node_modules\parcel-bundler
> node -e "console.log('\u001b[35m\u001b[1mLove Parcel? You can now donate to our open collective:\u001b[22m\u001b[39m\n > \u001b[34mhttps://opencollective.com/parcel/donate\u001b[0m')"

Love Parcel? You can now donate to our open collective:
 > https://opencollective.com/parcel/donate

> undefined prepare C:\repos\my-app
> snowpack

(node:11924) ExperimentalWarning: The fs.promises API is experimental
\ snowpack installing... canvas-confetti
TypeError: zlib.brotliCompressSync is not a function
    at compareDependencies (C:\repos\my-app\node_modules\snowpack\dist-node\index.js:2370:22)
    at Object.writeBundle (C:\repos\my-app\node_modules\snowpack\dist-node\index.js:2409:7)
    at Promise.resolve.then (C:\repos\my-app\node_modules\rollup\dist\shared\rollup.js:18156:25)

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! undefined prepare: `snowpack`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the undefined prepare script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\c097645\AppData\Roaming\npm-cache\_logs\2020-05-07T22_36_35_047Z-debug.log
(node:3956) UnhandledPromiseRejectionWarning: Error: Command failed with exit code 1: npm install --loglevel error
    at makeError (C:\Users\c097645\AppData\Roaming\npm-cache\_npx\3956\node_modules\create-snowpack-app\node_modules\execa\lib\error.js:58:11)
    at handlePromise (C:\Users\c097645\AppData\Roaming\npm-cache\_npx\3956\node_modules\create-snowpack-app\node_modules\execa\index.js:114:26)
    at process._tickCallback (internal/process/next_tick.js:68:7)
(node:3956) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 1)
(node:3956) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code. ```

snowpack react project does not work with @apollo/client

Hi,

I need to use the Apollo React client in my project and using Snowpack it does not seem to work because @apollo/client uses a "require()" instruction somewhere in its bundle, is there any documented workaround for those kind of setup, also according to pika @apollo/client seems to be fine in terms of exposing a module endpoint.

Thanks

Svelte bundle size

I've just been trying out Create Snowpack App and used the @snowpack/app-template-svelte template. I ran npm run build on a Hello World app (literally <h1>Hello world!</h1> in App.svelte) and the javascript bundle was 31.13 KB. This should be much smaller (probably between 2 and 3 KB). I notice that svelte/internal.js is inside the web_modules folder and my guess is that this is being bundled in its entirety.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.