— Tutorial, Javascript, Snowpack — 2 min read
So you come to know about Snowpack. It's damn cool when you need for development. Snowpack makes local development very fast. Read more about the snowpack to there official website
Catch: Since its in a very early version. So not much resource is available anywhere. So In this resource, I wrote what are common errors I found during the development in the snowpack
So without delay let’s start!
If you see something like this:
If you bootstrap your project snowpack using there create react app template i.e like
1npx create-snowpack-app new-dir --template [SELECT FROM BELOW] [--use-yarn]
Chances are higher that you might see this error very age of development.
There are two solutions I found:
.js
extension to .jsx
that's it. The error will disappear..jsx
then there is another method as well which takes care either you define .js
or .jsx
. You need to install some dependencies as the error suggests:1yarn add @babel/preset-react --dev
and then inside babel.config.json
add this command(You can do according to your project requirement):
1{2 "presets": ["@babel/preset-react"]3}
and you also have to install snowpack babel plugin to take these babel settings in the project for that you have to install this
1yarn add @snowpack/plugin-babel --dev
and add it to on snowpack.config.js
. Here is sample file:
1module.exports = {2 mount: {3 public: "/",4 src: "/_dist_",5 },6 plugins: [7 "@snowpack/plugin-react-refresh",8 "@snowpack/plugin-dotenv",9 "@snowpack/plugin-babel",10 ],11};
That's it your project start running again!
If you come from Create-react-app
. There they have Absolute Imports. If you also tired of writing like this:
1import Button from "../../../../../components/Button";
Isn't it looks weird every time if want to import Button
you have to import like this? That's where Absolute imports
come into play. When Absolute imports
is enabled on the project you simply can create like this:
1import Button from "src/components/Button";
In snowpack
it is minor different compare to Absolute imports
. They follow webpack alias patter. So for using absolute imports like first one you have create an alias in snowpack.config.js
like this:
1module.exports = {2 mount: {3 public: "/",4 src: "/_dist_",5 },6 alias: {7 "@app": "./src",8 components: "./src/components",9 styles: "./src/styles",10 },11 plugins: ["@snowpack/plugin-react-refresh", "@snowpack/plugin-dotenv"],12};
So now you can simply import a button using aliases
. For this case it would like this:
1import Button from "@app/components/Button";
Note: You can set any name to alias.
If you see snowpack documentation about adding scss
to the project. You can read more about here. So it's not very clear as you can see.
So if you are using create-react-app
(version>2). You simply need to install node-sass
. That's it, it will start compiling SCSS to CSS
Basically for running scss
to your project. You need tools that compile SCSS
to CSS
. node-sass
,node-sass-chokidar
are popular ones. So in snowpack, they have one great plugin '@snowpack/plugin-run-script
.
This will run whenever your code compiles. So you need to add scss compiler script there to compile your scss. That't it. I use node-sass-chokidar
. But it will work for sass compiler. Make sure you follow there correct steps:
1module.exports = {2 mount: {3 public: "/",4 src: "/_dist_",5 },6 plugins: [7 "@snowpack/plugin-react-refresh",8 "@snowpack/plugin-dotenv",9 [10 "@snowpack/plugin-run-script",11 {12 cmd:13 "node-sass-chokidar ./src/ -o ./src/ --output-style expanded --include-path src/ --include-path node_modules/",14 watch: "$1 --watch ",15 },16 ],17 ],18};
Note: These configurations are mines preferred one for node-sass-chokidar
. You can customize it according to it. You can run any command according to your requirement. This plugin is not only a specific sass
conversion.
Update(18-10-20): Snowpack release there official @snowpack/plugin-sass
. You can simply install this from here
For my case I am trying to install @snowpack/plugin-webpack
this arise that time. This happened because I already installed @snowpack/plugin-optimize
. By removing @snowpack/plugin-optimize
the error gone. You can either uninstall this package. Or give @snowpack/plugin-webpack
priority over this.
1module.exports = {2 mount: {3 public: "/",4 src: "/_dist_",5 },6 plugins: ["@snowpack/plugin-webpack", "@snowpack/plugin-optimize"],7};