Inconsistant build behaviour using 'snowpack dev' and 'snowpack build'

[MatsSundqvist]

When using 'snowpack build' the dependecies are installed to build/web_modules as expected. When running 'snowpack start'. The server seems to use another version of the library which is also installed to node_modules/.cache/snowpack

The cached version is not identical to the web_module version.

diff node_modules/.cache/snowpack/dev/redux-undo.js build/web_modules/redux-undo.js
613a614

var ActionCreators = lib.ActionCreators;
614a616
export { ActionCreators };

This gives the following error when loading a page (not index.html) in the browser
Uncaught SyntaxError: The requested module '/web_modules/redux-undo.js' does not provide an export named 'ActionCreators'

When serving the built application directly through another server it works as it should.

[jcschmidig]

Uncaught SyntaxError: The requested module '/web_modules/redux-undo.js' does not provide an export named 'ActionCreators'

Yes, same experience here with other modules.
Please fix this, it prevents me from using snowpack in development!

[MatsSundqvist]

I still have this problem with snowpack 2.7.7 and @snowpack/plugin-run-script 2.0.4" I cannot understand why the build result from 'build' is altered when run in the dev server.

[MoonBall]

@MatsSundqvist @jcschmidig There is a workaround which is setting installOptions.treeshake to true.

{
  "extends": "@snowpack/app-scripts-react",
  "installOptions": {
    "treeshake": true
  },
  "plugins": []
}

[MatsSundqvist]

I already have "treeshake=true"
Another strange thing is that I had to install geojson to make 'snowpack dev' work. Does the dev server have a dependency to 'geojson' in some way. For 'snowpack build' it's not needed.

$ npx snowpack build
[snowpack] ! building source…
[snowpack] ✔ build complete [0.18s]
[snowpack] ! installing dependencies…
[snowpack] ✔ install complete [10.23s]
[snowpack] ▶ Build Complete!

snowpack

Server starting…

▼ Console

[snowpack] ! updating dependencies...
[snowpack] ! installing dependencies…
[snowpack] Package "geojson" not found. Have you installed it?
[snowpack] Install failed.

[FredKSchott]

Hey everyone, thanks for surfacing these issues. I think there are a few different things going on here for different people, that I'll try to respond to individually, inline.

@MatsSundqvist Snowpack works by scanning your source folders for imports, and then installing any imported packages. Somewhere in your project, it's found an import ... from "geojson" statement. Are you defining any "mount" directories in your Snowpack config file? I'd recommend adding your source directories there and seeing if that fixes the geojson issue.

[MatsSundqvist]

the problem is the same with 2.8.0

[MatsSundqvist]

I think it must be of high priority that you know that the dev server uses the same js-files that you have in your build directory. Otherwise you don't know if a production deployed application is ok even if it seems to be ok in the dev server. Or in my case - the built application is ok but I can ot run it in the dev server.

[FredKSchott]

Hey everyone, thanks for surfacing these issues. Some notes/thoughts here:

1. If you'd like your build to match the unoptimized dev install, you can set installOptions.treeshake = false in your config. This is the difference that you're seeing between dev & build and its intentional for performance.

2. The final build is optimized via tree-shaking, where Snowpack scans all of your final imports to detect what exactly is used from every package, and removing the rest. @MatsSundqvist @jcschmidig In the comments above, it seems like Snowpack isn't able to detect your use of the ActionCreators named import in your application. Can you share a code snippet of where this exists in your file, and how you use it? For some reason, it sounds like Snowpack isn't able to detect it as something that you use.

If you'd like to keep tree-shaking for all package except for this one, you can add "redux-undo" to your top-level "install" array in your config file, and Snowpack will assume the entire package is needed.

[MatsSundqvist]

Thank you for your answer @FredKSchott!

I think the issue with geojson is resolved. But I still have the issue with 'redux-undo'. I have tried 'treeshake = false', but it didn't change this.
The dev still lacks the 'ActionCreators', but the 'build' is ok. So for some reason the dev server strips it away.

functionality from redux-undo is imported in two ways and different files:

file1

import { ActionCreators } from 'redux-undo';

export function clean() {
return dispatch => {
dispatch({ type: types.METOBJECT_CLEAN });
dispatch(ActionCreators.clearHistory);
};
}

==============================
file 2

import undoable from 'redux-undo';

    let reducer = redux.combineReducers(<any>{
        navigator: (<any>undoable).default(<any>navigator.navigator, undoConfig),
        metobject: (<any>undoable).default(<any>metobject.metobject, undoConfig),
        persistance: persReducer.persistance,
        observations: obsReducer.observations
    });

================================
my snowpack.config.json:

{
"mount": {
"public": "/",
"src": "/dist"
},
"plugins": [
[
"@snowpack/plugin-run-script",
{ "cmd": "tsc --noEmit", "watch": "$1 --watch" }
]
],
"installOptions": {
"installTypes": true,
"sourceMap" : false,
"treeshake": false
},
"buildOptions": {
"minify": false
},
"devOptions": {
"open": "google-chrome",
"out": "build"
},
"proxy": {
"/llf": "http://localhost:8081/llf"
}
}

[MatsSundqvist]

using "install": ["redux-undo"], didn't fix it

[FredKSchott]

Ah, it looks like redux-undo is a common.js dependency. ESM compatability states that CJS packages are only ever available as the default import, no named imports (like ActionCreator) supported.

We provide the namedExports config setting as a workaround for these CJS packages that document the use of named exports. Add "redux-undo" to that array in your config file and you should be good to go.

1 thing that we can do: add a troubleshooting entry to the docs site to explain this solution for anyone who encounters an error like "Uncaught SyntaxError: The requested module X does not provide an export named 'Y'". @MatsSundqvist any interest in adding a section to https://github.com/pikapkg/snowpack/blob/master/docs/docs/09-troubleshooting.md ? Would love a PR!

[MatsSundqvist]

Instructions for making a PR?

[FredKSchott]

For a docus update, you can just edit that Markdown file directly inside of GitHub to create a PR.

[MatsSundqvist]

The 'namedExports' didn't fix the problem for snowpack 2.8.0. I just got an error. But an upgrade to 2.9.0 and 'namedExports' did solve the problem. I also noticed some other things after upgrade:

• The handling of default exports changed for two libraries, redux-thunk and redux-undo. Now I had the default exports without the need to do for example 'thunk.default' in the code. This is an improvement and in line with the typescript definitions.
• The dev server doesn't seem to respect the 'open' option, it always opens firefox.

[MatsSundqvist]

But what caused the difference between dev and build? Built version contained more than the dev version.

[FredKSchott]

We made some improvements/fixes to our tree-shaking logic inside of 2.9.0, so that's my guess of why 2.9.0 solved the issue for you. It's hard to say for certain, but you can see the lines of code changed here: #879