Error with latest svelte-grid in Sapper. #56

michaelcuneo · 2020-11-24T04:59:02Z

The new version of svelte-grid is giving me the following error in Sapper.

webpack:///./node_modules/svelte-grid/src/index.svelte?:1
throw new Error("Module parse failed: Unexpected token (134:36)\nFile was processed with these loaders:\n * ./node_modules/svelte-loader/index.js\nYou may need an additional loader to handle the result of these loaders.\n| \t\t\tid: item.id,\n| \t\t\tindex: i,\n> \t\t\tresizable: item[getComputedCols]?.resizable,\n| \t\t\tdraggable: item[getComputedCols]?.draggable,\n| \t\t\txPerPx,");
^

Error: Module parse failed: Unexpected token (134:36)
File was processed with these loaders:
 * ./node_modules/svelte-loader/index.js
You may need an additional loader to handle the result of these loaders.

The text was updated successfully, but these errors were encountered:

vaheqelyan · 2020-11-24T13:35:38Z

Interesting, I built /www with the latest svelte and sapper version.. I see you are using webpack...
Could you show me your configuration (webpack) file please ? I need to reproduce it

michaelcuneo · 2020-11-24T19:39:41Z

const webpack = require('webpack');
const WebpackModules = require('webpack-modules');
const path = require('path');
const config = require('sapper/config/webpack.js');
const pkg = require('./package.json');

const mode = process.env.NODE_ENV;
const dev = mode === 'development';

const alias = { svelte: path.resolve('node_modules', 'svelte') };
const extensions = ['.mjs', '.js', '.json', '.svelte', '.html'];
const mainFields = ['svelte', 'module', 'browser', 'main'];
const fileLoaderRule = {
	test: /\.(png|webp|svg|jpe?g|gif)$/i,
	use: [
		'file-loader',
	]
};

module.exports = {
	client: {
		entry: config.client.entry(),
		output: config.client.output(),
		resolve: { alias, extensions, mainFields },
		module: {
			rules: [
				{
					test: /\.(svelte|html)$/,
					use: {
						loader: 'svelte-loader',
						options: {
							dev,
							hydratable: true,
							hotReload: true // pending https://github.com/sveltejs/svelte/issues/2377
						}
					}
				},
				fileLoaderRule
			]
		},
		mode,
		plugins: [
			// pending https://github.com/sveltejs/svelte/issues/2377
			// dev && new webpack.HotModuleReplacementPlugin(),
			new webpack.DefinePlugin({
				'process.browser': true,
				'process.env.NODE_ENV': JSON.stringify(mode)
			}),
		].filter(Boolean),
		devtool: dev && 'inline-source-map'
	},

	server: {
		entry: config.server.entry(),
		output: config.server.output(),
		target: 'node',
		resolve: { alias, extensions, mainFields },
		externals: Object.keys(pkg.dependencies).concat('encoding'),
		module: {
			rules: [
				{
					test: /\.(svelte|html)$/,
					use: {
						loader: 'svelte-loader',
						options: {
							css: false,
							generate: 'ssr',
							hydratable: true,
							dev
						}
					}
				},
				fileLoaderRule
			]
		},
		mode,
		plugins: [
			new WebpackModules()
		],
		performance: {
			hints: false // it doesn't matter if server.js is large
		}
	},

	serviceworker: {
		entry: config.serviceworker.entry(),
		output: config.serviceworker.output(),
		mode
	}
};

vaheqelyan · 2020-11-26T17:23:01Z

ok, used this template https://github.com/sveltejs/template-webpack,
here is the result

I probably exported my component incorrectly, 🤔

vaheqelyan · 2020-11-26T17:27:01Z

don't know what could be wrong with this line

evdama · 2020-11-26T17:37:40Z

Hi guys, I'm using rollup but then something is off here as well... I'm not entirely sure yet what as I haven't started to dig into it yet but here's what I know so far

local development works as I'm using rollup with my Sapper app
for deployment I'm on firebase, there I use an SSR function that's basically a firebase cloud function which is where my deployemnt breaks with following errors

Note the orange rectangle... this made me look for where this code is within my app and it turns out it's from svelte-grid. No clue yet what's happening and why but I thought I provide the info as this might be related to the OPs issue.

svelte-grid/src/utils/other.js

Line 13 in 03554d9

return item?.y + item?.h;

I'll start looking at this line first

import gridHelp from 'svelte-grid/build/helper/index.mjs'
const { item } = gridHelp

vaheqelyan · 2020-11-26T17:41:20Z

Oh no

vaheqelyan · 2020-11-26T17:42:24Z

tracking sveltejs/svelte-loader#143

vaheqelyan · 2020-11-26T17:47:40Z

I think the problem comes from svelte-loader. I can create www/ without any errors ( even though i use rollup )

evdama · 2020-11-26T17:49:18Z

Yeah, probably, I'll take a look at the issues there after dinner, maybe I find some infos that could help resolve things because my firebase cloud function logs also mention the loader 😋

But then still, why does it blow with svelte-grid, there must be something in my app code using it or sg itself that triggers that issue no? We'll see... :)

evdama · 2020-11-26T20:21:28Z

It's the optional chaining operator because adding https://babeljs.io/docs/en/babel-plugin-proposal-optional-chaining to my client and server sections of my rollup config made my errors go away

      babel( {
        extensions: [ '.js', '.mjs', '.html', '.svelte' ],
        runtimeHelpers: true,
        exclude: [ 'node_modules/@babel/**' ],
        presets: [
          [
            '@babel/preset-env',
            {
              targets: '> 0.25%, not dead',
            },
          ],
        ],
        plugins: [
          '@babel/plugin-syntax-dynamic-import',
          '@babel/plugin-proposal-optional-chaining',
          [
            '@babel/plugin-transform-runtime',
            {
              useESModules: true,
            },
          ],
        ],
      } ),

It's just so that the sapper template doesn't have babel in it's server section at all so naturally people will have issue with svelte-grid with line 13 from above as long as their SSR runtimes don't support optional chaining natively (I run on node 12 on firebase with my cloud functions which is the most current node google provides).
https://github.com/sveltejs/sapper-template/blob/master/rollup.config.js

@vaheqelyan what do you think, is it better to revert the bits that use optional chaining for now or leave it as is and make a note in the docs that people need to take care of running babel or have their typescript compile targets set correctly for older runtimes?

benwoodward · 2020-11-27T00:04:21Z

I just ran into this running rollup --config:

[!] Error: Unexpected token (Note that you need plugins to import files that are not JavaScript)
node_modules/svelte-grid/src/index.svelte (14:40)
12:       id={item.id}
13:       index={i}
14:       resizable={item[getComputedCols]?.resizable}
                                            ^
15:       draggable={item[getComputedCols]?.draggable}
16:       {xPerPx}
Error: Unexpected token (Note that you need plugins to import files that are not JavaScript)
    at error (/Users/ben/.asdf/installs/nodejs/12.10.0/.npm/lib/node_modules/rollup/dist/shared/rollup.js:10120:30)
    at Module.error (/Users/ben/.asdf/installs/nodejs/12.10.0/.npm/lib/node_modules/rollup/dist/shared/rollup.js:14557:16)
    at tryParse (/Users/ben/.asdf/installs/nodejs/12.10.0/.npm/lib/node_modules/rollup/dist/shared/rollup.js:14450:23)
    at Module.setSource (/Users/ben/.asdf/installs/nodejs/12.10.0/.npm/lib/node_modules/rollup/dist/shared/rollup.js:14839:33)
    at /Users/ben/.asdf/installs/nodejs/12.10.0/.npm/lib/node_modules/rollup/dist/shared/rollup.js:16713:20

I thought importing the .mjs file directly would fix it, but got this:

[!] Error: Unexpected token (Note that you need plugins to import files that are not JavaScript)
node_modules/svelte-grid/build/index.mjs (453:18)
451:     ...items.map((val) => {
452:       const item = val[cols];
453:       return item?.y + item?.h;
                       ^
454:     }),
455:     1,
Error: Unexpected token (Note that you need plugins to import files that are not JavaScript)
    at error (/Users/ben/.asdf/installs/nodejs/12.10.0/.npm/lib/node_modules/rollup/dist/shared/rollup.js:10120:30)
    at Module.error (/Users/ben/.asdf/installs/nodejs/12.10.0/.npm/lib/node_modules/rollup/dist/shared/rollup.js:14557:16)
    at tryParse (/Users/ben/.asdf/installs/nodejs/12.10.0/.npm/lib/node_modules/rollup/dist/shared/rollup.js:14450:23)
    at Module.setSource (/Users/ben/.asdf/installs/nodejs/12.10.0/.npm/lib/node_modules/rollup/dist/shared/rollup.js:14839:33)
    at /Users/ben/.asdf/installs/nodejs/12.10.0/.npm/lib/node_modules/rollup/dist/shared/rollup.js:16713:20

EDIT: For reference, this issue was resolved for me by upgrading Rollup, see here: rollup/rollup#3469

evdama · 2020-11-27T07:26:50Z

EDIT: For reference, this issue was resolved for me by upgrading Rollup, see here: rollup/rollup#3469

That link says rollup 2.11 and above should have support for optional chaining but then I'm on latest 2.33.3 and still, without the babel snippet from above, it breaks my app deployment... hm... 🤔

evdama · 2020-11-27T11:41:30Z

Also, even with my added code snippet to rollup conf for optional chaining as seen above, the inital errors are back 🤷

Ok, reverted my rollup.conf to not use the babel optional chaining plugin but went ahead and tested what would happen if I replace all return item?.y + item?.h with return item && item.y + item && item.h i.e. everyting below

sa@m1-mini: ~/0/edm/node_modules/svelte-grid  |master U:1 ✗| gr item?\.y *
build/index.js:459:          return item?.y + item?.h;
build/index.js:875:    		y: item?.y,
build/index.js:903:    				y: item?.y,
build/index.mjs:453:      return item?.y + item?.h;
build/index.mjs:869:		y: item?.y,
build/index.mjs:897:				y: item?.y,
build/helper/index.js:11:        return item?.y + item?.h;
build/helper/index.mjs:5:      return item?.y + item?.h;
src/utils/other.js:13:      return item?.y + item?.h;
src/MoveResize/index.svelte:112:  let shadow = { x: item?.x, y: item?.y, w: item?.w, h: item?.h };
src/MoveResize/index.svelte:144:      shadow = { x: item?.x, y: item?.y, w: item?.w, h: item?.h };
sa@m1-mini: ~/0/edm/node_modules/svelte-grid  |master U:1 ✗|

and now the deploy dosn't break with return item?.y + item?.h anymore so that's fixed but now it breaks with yet another optional chaining x: item?.x this time

vaheqelyan · 2020-11-27T12:14:28Z

@michaelcuneo For the webpack sveltejs/svelte-loader#137 (comment), this may be the solution to the problem (it works at least for me)

For rollup everything works fine

vaheqelyan · 2020-11-27T12:21:03Z

EDIT: For reference, this issue was resolved for me by upgrading Rollup, see here: rollup/rollup#3469
That link says rollup 2.11 and above should have support for optional chaining but then I'm on latest 2.33.3 and still, without the babel snippet from above, it breaks my app deployment... hm... 🤔

this is taken from https://github.com/vaheqelyan/svelte-grid/blob/master/www/package.json

rollup

    "@rollup/plugin-babel": "^5.2.1",
    "@rollup/plugin-commonjs": "^16.0.0",
    "@rollup/plugin-node-resolve": "^10.0.0",
    "@rollup/plugin-replace": "^2.3.4",
    "rollup": "^2.33.3",
    "rollup-plugin-glob": "^1.0.2",
    "rollup-plugin-svelte": "^6.1.1",
    "rollup-plugin-terser": "^7.0.2",

babel

    "@babel/core": "^7.12.8",
    "@babel/plugin-syntax-dynamic-import": "^7.0.0",
    "@babel/plugin-transform-runtime": "^7.12.1",
    "@babel/preset-env": "^7.12.7",
    "@babel/runtime": "^7.12.5",

evdama · 2020-11-27T15:44:39Z

svelte-grid with rollup doesn't work for me atm, fails with afore mentioned erros shown in the screenshots above. Here is my relevant rollup and babel packages

sa@m1-mini: ~/0/edm  |master U:3 ✗| alias gr; gr rollup package.json
alias gr='grep -rni --color'
package.json:20:    "@rollup/plugin-babel": "^5.2.1",
package.json:21:    "@rollup/plugin-commonjs": "^16.0.0",
package.json:22:    "@rollup/plugin-json": "^4.1.0",
package.json:23:    "@rollup/plugin-node-resolve": "^10.0.0",
package.json:24:    "@rollup/plugin-replace": "^2.3.4",
package.json:25:    "@rollup/plugin-typescript": "^6.1.0",
package.json:73:    "rollup": "^2.33.3",
package.json:74:    "rollup-plugin-auto-external": "^2.0.0",
package.json:75:    "rollup-plugin-json": "^4.0.0",
package.json:76:    "rollup-plugin-node-builtins": "^2.1.2",
package.json:77:    "rollup-plugin-node-globals": "^1.4.0",
package.json:78:    "rollup-plugin-postcss": "^3.1.8",
package.json:79:    "rollup-plugin-svelte": "^7.0.0",
package.json:80:    "rollup-plugin-terser": "^7.0.2",
package.json:81:    "rollup-plugin-visualizer": "^4.2.0",
sa@m1-mini: ~/0/edm  |master U:4 ✗| gr babel package.json
package.json:12:    "@babel/core": "^7.12.9",
package.json:13:    "@babel/plugin-syntax-dynamic-import": "^7.8.3",
package.json:14:    "@babel/plugin-transform-runtime": "^7.12.1",
package.json:15:    "@babel/preset-env": "^7.12.7",
package.json:16:    "@babel/runtime": "^7.12.5",
package.json:20:    "@rollup/plugin-babel": "^5.2.1",
package.json:42:    "babel-eslint": "^10.1.0",
sa@m1-mini: ~/0/edm  |master U:3 ✗|

I'm running out of ideas what might cause that, except of course for the error message shown that mentions return item?.y + item?.h;

vaheqelyan · 2020-11-27T16:14:02Z

You get something like this ?

TypeError: App.render is not a function
    at /home/vahe/Desktop/svelte-grid/www/__sapper__/dev/server/server.js:10871:49
    at Generator.next (<anonymous>)
    at fulfilled (/home/vahe/Desktop/svelte-grid/www/__sapper__/dev/server/server.js:6314:58)
    at processTicksAndRejections (internal/process/task_queues.js:93:5)

evdama · 2020-11-27T17:01:17Z

No, my error messages when I run my deploy command are as in the screenshot above on the server side (read firebase deploy) and on the local shell I get this output:

=== Deploying to 'foo-dt3d0'...

i  deploying storage, firestore, functions, hosting
Running command: node predeploy.js
✔  functions: Finished running predeploy script.
i  firebase.storage: checking config/storage.rules for compilation errors...
⚠  [W] 40:10 - Unused function: lessThanOrEqualToNMegaBytes.
⚠  [W] 40:50 - Invalid variable name: request.
⚠  [W] 41:10 - Unused function: lessThanOrEqualToNGigaBytes.
⚠  [W] 41:50 - Invalid variable name: request.
⚠  [W] 45:10 - Unused function: isImage.
⚠  [W] 45:30 - Invalid variable name: request.
✔  firebase.storage: rules file config/storage.rules compiled successfully
i  firestore: reading indexes from config/firestore.indexes.json...
i  cloud.firestore: checking config/firestore.rules for compilation errors...
✔  cloud.firestore: rules file config/firestore.rules compiled successfully
i  functions: ensuring required API cloudfunctions.googleapis.com is enabled...
i  functions: ensuring required API cloudbuild.googleapis.com is enabled...
✔  functions: required API cloudfunctions.googleapis.com is enabled
✔  functions: required API cloudbuild.googleapis.com is enabled
i  storage: uploading rules config/storage.rules...
i  firestore: latest version of config/firestore.rules already up to date, skipping upload...
✔  firestore: deployed indexes in config/firestore.indexes.json successfully
i  functions: preparing functions directory for uploading...
i  functions: packaged functions (5.44 MB) for uploading
✔  functions: functions folder uploaded successfully
i  hosting[foo]: beginning deploy...
i  hosting[foo]: found 11 files in static
✔  hosting[foo]: file upload complete
✔  storage: released rules config/storage.rules to firebase.storage
✔  storage: released rules config/storage.rules to firebase.storage
✔  storage: released rules config/storage.rules to firebase.storage
✔  firestore: released rules config/firestore.rules to cloud.firestore
i  functions: updating Node.js 12 function setCustomClaimsOnEDMSignUp(us-central1)...
i  functions: updating Node.js 12 function setUserPropertiesOnEDMSignUp(us-central1)...
i  functions: updating Node.js 12 function ssr(us-central1)...
⚠  functions[setCustomClaimsOnEDMSignUp(us-central1)]: Deployment error.
Function failed on loading user code. Error message: Error: please examine your function logs to see the error cause: https://cloud.google.com/functions/docs/monitoring/logging#viewing_logs. Additional troubleshooting documentation can be found at https://cloud.google.com/functions/docs/troubleshooting#logging
⚠  functions[setUserPropertiesOnEDMSignUp(us-central1)]: Deployment error.
Function failed on loading user code. Error message: Error: please examine your function logs to see the error cause: https://cloud.google.com/functions/docs/monitoring/logging#viewing_logs. Additional troubleshooting documentation can be found at https://cloud.google.com/functions/docs/troubleshooting#logging
⚠  functions[ssr(us-central1)]: Deployment error.
Function failed on loading user code. Error message: Error: please examine your function logs to see the error cause: https://cloud.google.com/functions/docs/monitoring/logging#viewing_logs. Additional troubleshooting documentation can be found at https://cloud.google.com/functions/docs/troubleshooting#logging


Functions deploy had errors with the following functions:
	setCustomClaimsOnEDMSignUp
	setUserPropertiesOnEDMSignUp
	ssr


To try redeploying those functions, run:
    firebase deploy --only "functions:setCustomClaimsOnEDMSignUp,functions:setUserPropertiesOnEDMSignUp,functions:ssr"


To continue deploying other features (such as database), run:
    firebase deploy --except functions

Error: Functions did not deploy properly.
npm ERR! code 1
npm ERR! path /Users/sa/0/edm
npm ERR! command failed
npm ERR! command sh -c firebase deploy

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/sa/.npm/_logs/2020-11-27T16_49_29_030Z-debug.log

> [email protected] bar:dev
> export GOOGLE_APPLICATION_CREDENTIALS="config/serviceAccount.js"; sapper dev

✔ server (24.2s)
✔ client (25.9s)
> Listening on http://localhost:3000
✔ service worker (603ms)

So as you can see, up until the point where firebase deploy would redeploy my cloud functions all is well, then it breaks (local error above), remote errors see screenshots above.

Here's the output from the firebase cloud error logger

For me this issue started when I gladly upgraded to the new version you did about 9 days ago, the one that introduced code that used optional chaining 😃

Replacing occurances of optional chaining with old-school versions like this makes the issue go away e.g. replacing return item?.y + item?.h with return item && item.y + item && item.h 🤓

At least for google cloud functions and therefore also firebase cloud functions, the highest node version you can run atm is node 12, which is what I'm running, but optional chaining is only natively supported from node 14 onwards https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining

vaheqelyan · 2020-11-27T19:28:32Z

svelte-grid/src/utils/other.js

Line 13 in 37e842e

return item?.y + item?.h;

This line causes the pain ? but why,, 🤔 i downgraded node to 10.x but the deployment does not fail

vaheqelyan · 2020-11-27T19:36:52Z

Well, I'll try to transpile correctly, after which you'll try it again.

evdama · 2020-11-27T19:37:53Z

No idea either but the usual suspects come to mind... different module formats and different ES versions in various combinations, layerd on top we have individal app setups with all kinds of bunder magic... one can only look forward to times when things will be more unified... Sveltekit and Snowpack I assume will already help in shrinking complexity on that part of our work 😇

For the particular issue I'm seeing with the combination of: Sapper, svelte-grid, firebase cloud functions... I've today spend around 4 hours looking around and trying various things... all in vain... the only thing I can say for sure is that replacing return item?.y + item?.h with return item && item.y + item && item.h fixes things on my end 😋

evdama · 2020-11-27T19:38:58Z

Well, I'll try to transpile correctly, after which you'll try it again.

I'm at a point where I'll try whatever you provide... except for the first generation/round of Covid-19 vaxines 🤣

vaheqelyan · 2020-11-27T20:49:17Z

Patch version released, v3.1.1 i hope it won't throw an error

evdama · 2020-11-27T21:07:40Z

Patch version released, v3.1.1 i hope it won't throw an error

same exact error with 3.1.1

change that fixed things

but what I did then fixed it... I took the babel snippet from the client section of my rolllup.config and copied it as is to the server section of my rollup.config i.e. exact same code twice:

  server: {
    input: config.server.input(),
    output: config.server.output(),
    plugins: [
      visualizer({ filename: 'visualizer_stats/server.json', title: 'Server Bundle', json: true }),
      replace({
        'process.browser': false,
        'process.env.NODE_ENV': JSON.stringify( mode ),
        ROLLUP_DEV_OR_PROD_URL_DEPLOYMENT: ( dev ? 'http://localhost:3000' : appConfig.EDM_URL ),
        ROLLUP_DEV_OR_PROD_URL_STATIC_FOLDER: ( dev ? '.' : appConfig.EDM_URL ),
        ROLLUP_EDM_UPDATE_TIMESTAMP: getTime( new Date() ),
        ROLLUP_EXPRESS_SESSION_COOKIE_SIGNING_SECRET: appConfig.EXPRESS_SESSION_COOKIE_SIGNING_SECRET,
        ROLLUP_IPREGISTRY_KEY: appConfig.IPREGISTRY_KEY,
        ROLLUP_IPREGISTRY_URL: appConfig.IPREGISTRY_URL,
        ROLLUP_RECAPTCHA_SCORE_IS_BOT: appConfig.RECAPTCHA_SCORE_IS_BOT,
        ROLLUP_RECAPTCHA_SCORE_IS_HUMAN: appConfig.RECAPTCHA_SCORE_IS_HUMAN,
        ROLLUP_RECAPTCHA_SECRET_KEY: appConfig.RECAPTCHA_SECRET_KEY,
        ROLLUP_RECAPTCHA_VERIFY_URL: appConfig.RECAPTCHA_VERIFY_URL,
      }),
      svelte({
        compilerOptions: {
          dev,
          generate: 'ssr',
          hydratable: true,
        },
        preprocess: sveltePreprocess(),
      }),
      // typescript({ sourceMap: dev, inlineSources: dev }),
      resolve({
        dedupe: ['svelte'],
      }),
      commonjs(),

// added start (the server section of the sapper rollup conf usually doesn't have a babel section at all but it seems it's needed for any node version smaller 14 and when you run your app code that has optional chaining in it)
      babel({
        extensions: [ '.js', '.mjs', '.html', '.svelte' ],
        babelHelpers: 'runtime',
        exclude: [ 'node_modules/@babel/**' ],
        presets: [
          [
            '@babel/preset-env',
            {
              targets: '> 0.25%, not dead',
            },
          ],
        ],
        plugins: [
          '@babel/plugin-syntax-dynamic-import',
          [
            '@babel/plugin-transform-runtime',
            {
              useESModules: true,
            },
          ],
        ],
      }),
// added end

      postcss({
        plugins: postcssPlugins(!dev),
        extract: 'global.css',
      }),
      json()
    ],
    external: Object.keys(pkg.dependencies).concat(
      require('module').builtinModules ||
        Object.keys(process.binding('natives'))
    ),
    preserveEntrySignatures: 'strict',
    onwarn,
  },

My entire rollup.config.js as gist here https://gist.github.com/6b7232b265075f3e90310c26eff1585f

I'll revert to v3.1.0 and see if it works as well, because then you might want to revert sg to 3.1.0 thus get rid of all the babel crap again :)
yes, with the change to my rollup.config.js as described above i.e. having an exact copy of the babel snippet in my server section, v3.1.0 works just fine 👍

vaheqelyan · 2020-11-28T07:52:57Z

Can I see your full stack trace ?

vaheqelyan · 2020-11-28T07:55:13Z

I thought that the problems arise because of this issue sveltejs/svelte#4701

evdama · 2020-11-28T07:55:21Z

Can I see your full stack trace ?

No, that's just about all the information I can see resp. that I found even when I went into the cloud logger and looked at what the cloud function deployments spit out.

evdama · 2020-11-28T08:10:24Z

I thought that the problems arise because of this issue sveltejs/svelte#4701

Ok, hm... I understood this is mainly about using modern JS syntax in Svelte markup, which is something I don't do with optional chaining, that really, at least in my app, is only used in svelte-grid code at this point, hence the entire dance I'm having/had... which is not to say I'm not super happy with this great great package and will of course continue to use it 😃

Overall, it's just interesting to me that since my app isn't that small i.e. is using quite a few packages, that it's the first time such deployment issue came to light... but then as I said, over time, once JS runtimes like node support more and more modern language artefacts and once the entire bundler chain gets less complex using things like Snowpack, I do hope that such issues will be a thing of the past.

vaheqelyan · 2020-11-28T10:00:25Z

try to update the svelte-grid version.. v3.3.1 (latest)

evdama · 2020-11-28T10:31:08Z

v3.3.1 with my babel addition to the server section of the rollup.config.js file works (which is expected); this includes the entire CI chain including depoyment to live firebase site
v3.3.1 without my babel addition to the server section (and therefore back to the original rollup.config.js version) of the rollup.config.js file works as well (which didn't work as seen above); this includes the entire CI chain including depoyment to live firebase site

vaheqelyan · 2020-11-28T10:34:28Z

tried this template https://github.com/sveltejs/sapper-template-webpack ([email protected] works),
so it looks like it works for both webpack and rollup

vaheqelyan · 2020-11-28T10:39:58Z

Optional chaining' has been replaced. in addition, you no longer need to access the element using the optional chain operator

// no need
<Grid let:item>{item?.fixed}</Grid>
// ok
<Grid let:item>{item.fixed}</Grid>

evdama · 2020-11-28T10:41:14Z

excellent, thanks again a lot for your time and effort 👍

michaelcuneo · 2020-11-30T02:33:43Z

For some reason, this issue isn't solve for me ...

I updated svelte-grid to the latest. 3.1.1.

Because I'm using npm, I added

    "preinstall": "npx npm-force-resolutions" // added to scripts.

and

"resolutions": {
    "acorn": "8.0.1"
  },

I remove node_modules.
Ran npx npm-force-resolutions, and npx npm-force-resolutions -g just to be sure...

I then ran npm install

Got back into my project and it's identical.

webpack:///./node_modules/svelte-grid/src/index.svelte?:1
throw new Error("Module parse failed: Unexpected token (133:36)\nFile was processed with these loaders:\n * ./node_modules/svelte-loader/index.js\nYou may need an additional loader to handle the result of these loaders.\n| \t\t{\n| \t\t\tid: item.id,\n> \t\t\tresizable: item[getComputedCols]?.resizable,\n| \t\t\tdraggable: item[getComputedCols]?.draggable,\n| \t\t\txPerPx,");
^

Error: Module parse failed: Unexpected token (133:36)
File was processed with these loaders:
 * ./node_modules/svelte-loader/index.js
You may need an additional loader to handle the result of these loaders.
|               {
|                       id: item.id,
>                       resizable: item[getComputedCols]?.resizable,
|                       draggable: item[getComputedCols]?.draggable,
|                       xPerPx,
    at eval (webpack:///./node_modules/svelte-grid/src/index.svelte?:1:7)
    at Object../node_modules/svelte-grid/src/index.svelte (/mnt/store/share/thealbion.com.au/__sapper__/dev/server/server.js:16884:1)
    at __webpack_require__ (/mnt/store/share/thealbion.com.au/__sapper__/dev/server/server.js:27:30)
    at eval (webpack:///./src/routes/gallery.svelte?:4:69)
    at Module../src/routes/gallery.svelte (/mnt/store/share/thealbion.com.au/__sapper__/dev/server/server.js:17752:1)
    at __webpack_require__ (/mnt/store/share/thealbion.com.au/__sapper__/dev/server/server.js:27:30)
    at eval (webpack:///./src/node_modules/@sapper/internal/manifest-server.mjs?:12:80)
    at Module../src/node_modules/@sapper/internal/manifest-server.mjs (/mnt/store/share/thealbion.com.au/__sapper__/dev/server/server.js:17584:1)
    at __webpack_require__ (/mnt/store/share/thealbion.com.au/__sapper__/dev/server/server.js:27:30)
    at eval (webpack:///./src/node_modules/@sapper/server.mjs?:7:83)

michaelcuneo · 2020-11-30T02:39:05Z

Ahh my mistake, I upgraded to the wrong version. I have now upgraded to Svelte-Grid 3.3.1.

And now I am further into a new error.

500 - Failed to Fetch dynamically imported module: http://192.168.0.10:3000/routes/index.svelte

Hmmm, at least Svelte-Grid is working fine now. haha

michaelcuneo · 2020-11-30T02:50:56Z

100% fine now. I forgot to remove packacge-lock.

vaheqelyan · 2020-11-30T08:14:55Z

nice 👍

vaheqelyan closed this as completed Nov 29, 2020

Error with latest svelte-grid in Sapper. #56

Error with latest svelte-grid in Sapper. #56

Comments

michaelcuneo commented Nov 24, 2020

vaheqelyan commented Nov 24, 2020

michaelcuneo commented Nov 24, 2020

vaheqelyan commented Nov 26, 2020

vaheqelyan commented Nov 26, 2020

evdama commented Nov 26, 2020 • edited Loading

vaheqelyan commented Nov 26, 2020

vaheqelyan commented Nov 26, 2020

vaheqelyan commented Nov 26, 2020

evdama commented Nov 26, 2020 • edited Loading

evdama commented Nov 26, 2020 • edited Loading

benwoodward commented Nov 27, 2020 • edited Loading

evdama commented Nov 27, 2020

evdama commented Nov 27, 2020 • edited Loading

vaheqelyan commented Nov 27, 2020

vaheqelyan commented Nov 27, 2020

evdama commented Nov 27, 2020 • edited Loading

vaheqelyan commented Nov 27, 2020

evdama commented Nov 27, 2020 • edited Loading

vaheqelyan commented Nov 27, 2020

vaheqelyan commented Nov 27, 2020

evdama commented Nov 27, 2020 • edited Loading

evdama commented Nov 27, 2020 • edited Loading

vaheqelyan commented Nov 27, 2020

evdama commented Nov 27, 2020 • edited Loading

same exact error with 3.1.1

change that fixed things

vaheqelyan commented Nov 28, 2020

vaheqelyan commented Nov 28, 2020

evdama commented Nov 28, 2020 • edited Loading

evdama commented Nov 28, 2020 • edited Loading

vaheqelyan commented Nov 28, 2020

evdama commented Nov 28, 2020 • edited Loading

vaheqelyan commented Nov 28, 2020

vaheqelyan commented Nov 28, 2020

evdama commented Nov 28, 2020

michaelcuneo commented Nov 30, 2020

michaelcuneo commented Nov 30, 2020 • edited Loading

michaelcuneo commented Nov 30, 2020

vaheqelyan commented Nov 30, 2020

evdama commented Nov 26, 2020 •

edited

Loading

evdama commented Nov 26, 2020 •

edited

Loading

evdama commented Nov 26, 2020 •

edited

Loading

benwoodward commented Nov 27, 2020 •

edited

Loading

evdama commented Nov 27, 2020 •

edited

Loading

evdama commented Nov 27, 2020 •

edited

Loading

evdama commented Nov 27, 2020 •

edited

Loading

evdama commented Nov 27, 2020 •

edited

Loading

evdama commented Nov 27, 2020 •

edited

Loading

evdama commented Nov 27, 2020 •

edited

Loading

evdama commented Nov 28, 2020 •

edited

Loading

evdama commented Nov 28, 2020 •

edited

Loading

evdama commented Nov 28, 2020 •

edited

Loading

michaelcuneo commented Nov 30, 2020 •

edited

Loading