Common errors in react project when running with snowpack

04.10.2020 — 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!

1. Snowpack build error

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.

Solution:

There are two solutions I found:

Easy and not time taking is simply repace your .js extension to .jsx that's it. The error will disappear.
For some reason you don't want to keep reminding yourself to create a file with extension .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):

babel.config.json

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:

snowpack.config.js

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!

2. Relative path

If you come from Create-react-app. There they have Absolute Imports. If you also tired of writing like this:

no-absolute-imports.jsx

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";

Solution:

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:

snowpack.config.js

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:

snowpack-absolute-import.js

1import Button from "@app/components/Button";

Note: You can set any name to alias.

3. Adding SCSS to react project

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

Solution:

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:

snowpack.config.json

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

4. Uncaught ReferenceError: SNOWPACKENV__ is not defined

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.

snowpack.config.json

1module.exports = {
2  mount: {
3    public: "/",
4    src: "/_dist_",
5  },
6  plugins: ["@snowpack/plugin-webpack", "@snowpack/plugin-optimize"],
7};