Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Following the current quick start in the readme I get a plugin svelte) ParseError: Identifier is expected #53

Open
rmoskal opened this issue Apr 4, 2020 · 11 comments

Comments

@rmoskal
Copy link

rmoskal commented Apr 4, 2020

This is when I try to

import { Button } from 'svelma'

This is the error:

(plugin svelte) ParseError: Identifier is expected
node_modules/svelma/src/components/Field.svelte
 95: <style lang="scss">
 96:   .field {
 97:     &.is-grouped {
         ^
 98:       .field {
 99:         flex-shrink: 0;
ParseError: Identifier is expected
****

This is my enviroment:

Now using node v13.5.0 (npm v6.13.4)

@mihaimiculescu
Copy link

Have you installed and configured sass?

@rmoskal
Copy link
Author

rmoskal commented Apr 5, 2020

Thanks for responding. I get this when I run node-sass -v. Does that seem right?

Now using node v13.5.0 (npm v6.13.4)
 rob  ~  node-sass -v
node-sass 4.13.1 (Wrapper) [JavaScript]
libsass 3.5.4 (Sass Compiler) [C/C++]
 rob  ~  

Another piece of information I can get git@github.com:Kiho/smelte-demo.git to run fine. The setup seems quite different though.

@mihaimiculescu
Copy link

mihaimiculescu commented Apr 6, 2020

Personally, I use dart-sass
My rollup.config.js:

import svelte from 'rollup-plugin-svelte';
import resolve from 'rollup-plugin-node-resolve';
import commonjs from 'rollup-plugin-commonjs';
import autoPreprocess from 'svelte-preprocess';
import postcss from 'rollup-plugin-postcss';
import livereload from 'rollup-plugin-livereload';
import { terser } from 'rollup-plugin-terser';
import rollup_start_dev from './rollup_start_dev';

const production = !process.env.ROLLUP_WATCH;

export default {
	input: 'src/main.js',
	output: {
		sourcemap: true,
		format: 'iife',
		name: 'app',
		file: 'public/bundle.js'
	},
	plugins: [
		svelte({
			// enable run-time checks when not in production
			dev: !production,
			// we'll extract any component CSS out into
			// a separate file — better for performance
			css: css => {
				css.write('public/bundle.css');
			},
			preprocess: autoPreprocess(),
                        emitCss: true
		}),
    		postcss({
      		extract: true,
      		minimize: true,
      		use: [
        		['sass', {
          			includePaths: [
            					'./node_modules',
						'./node_modules/bulma',
	    					'./src'
          				      ]
        			}]
      		     ]
    		}),

		// If you have external dependencies installed from
		// npm, you'll most likely need these plugins. In
		// some cases you'll need additional configuration —
		// consult the documentation for details:
		// https://github.com/rollup/rollup-plugin-commonjs
		resolve({
			browser: true,
			dedupe: importee => importee === 'svelte' || importee.startsWith('svelte/')
		}),
		commonjs(),
		
		// In dev mode, call `npm run start:dev` once
		// the bundle has been generated
		!production && rollup_start_dev,

		// Watch the `public` directory and refresh the
		// browser on changes when not in production
		!production && livereload('public'),

		// If we're building for production (npm run build
		// instead of npm run dev), minify
		production && terser()
	],
	watch: {
		clearScreen: false
	}
};

Also my rollup_start_dev.js :

import * as child_process from 'child_process';

let running_dev_server = false;

export default {
	writeBundle() {
		if (!running_dev_server) {
			running_dev_server = true;
			child_process.spawn('npm', ['run', 'start:dev'], { stdio: ['ignore', 'inherit', 'inherit'], shell: true });
		}
	}
};

You should proceed with caution: add code block by block until you get rid of errors and you get the expected result
You also probably will need to instal more npm modules.
My package.json:

{
  "name": "svelte-app",
  "version": "1.0.0",
  "scripts": {
    "build": "rollup -c",
    "dev": "rollup -c -w",
    "start": "sirv public --single --host 0.0.0.0",
    "start:dev": "sirv public --single --dev --host 0.0.0.0 --port 5000"
  },
  "devDependencies": {
    "rollup": "^1.31.0",
    "rollup-plugin-commonjs": "^10.1.0",
    "rollup-plugin-livereload": "^1.0.4",
    "rollup-plugin-node-resolve": "^5.2.0",
    "rollup-plugin-postcss": "^2.0.6",
    "rollup-plugin-svelte": "^5.1.1",
    "rollup-plugin-terser": "^5.2.0",
    "sass": "^1.25.0",
    "svelte": "^3.18.2",
    "svelte-preprocess": "^3.4.0"
  },
  "dependencies": {
    "bulma": "^0.8.0",
    "sirv-cli": "^0.4.5",
    "svelma": "^0.3.2"
  }
}

Good luck!

@zakaria-chahboun
Copy link

The same issue i have!

@SumitBando
Copy link

Same issue!

@graciasc
Copy link

graciasc commented Apr 12, 2020

npm install import autoPreprocess from 'svelte-preprocess';

import autoPreprocess from 'svelte-preprocess'; for your rollup config

Also add these to the postcss()

      extract: true,
      minimize: true,
      use: [
        [
          "sass",
          {
            includePaths: ["./node_modules", "./node_modules/bulma", "./src"],
          },
        ],
      ],

Should look something like this:

import svelte from "rollup-plugin-svelte";
import resolve from "@rollup/plugin-node-resolve";
import commonjs from "@rollup/plugin-commonjs";
import livereload from "rollup-plugin-livereload";
import autoPreprocess from 'svelte-preprocess';
import { terser } from "rollup-plugin-terser";
import postcss from "rollup-plugin-postcss";
const production = !process.env.ROLLUP_WATCH;

export default {
  input: "src/main.js",
  output: {
    sourcemap: true,
    format: "iife",
    name: "app",
    file: "public/build/bundle.js",
  },
  plugins: [
    svelte({
      // enable run-time checks when not in production
      dev: !production,
      // we'll extract any component CSS out into
      // a separate file - better for performance
      css: (css) => {
        css.write("public/build/bundle.css");
      },
      preprocess: autoPreprocess(),
      emitCss: true,
    }),
    postcss({
      extract: true,
      minimize: true,
      use: [
        [
          "sass",
          {
            includePaths: ["./node_modules", "./node_modules/bulma", "./src"],
          },
        ],
      ],
    }),

    // If you have external dependencies installed from
    // npm, you'll most likely need these plugins. In
    // some cases you'll need additional configuration -
    // consult the documentation for details:
    // https://github.com/rollup/plugins/tree/master/packages/commonjs
    resolve({
      browser: true,
      dedupe: ["svelte"],
    }),
    commonjs(),

    // In dev mode, call `npm run start` once
    // the bundle has been generated
    !production && serve(),

    // Watch the `public` directory and refresh the
    // browser on changes when not in production
    !production && livereload("public"),

    // If we're building for production (npm run build
    // instead of npm run dev), minify
    production && terser(),
  ],
  watch: {
    clearScreen: false,
  },
};

function serve() {
  let started = false;

  return {
    writeBundle() {
      if (!started) {
        started = true;

        require("child_process").spawn("npm", ["run", "start", "--", "--dev"], {
          stdio: ["ignore", "inherit", "inherit"],
          shell: true,
        });
      }
    },
  };
}

@hefeust
Copy link

hefeust commented May 10, 2020

Hi, there !
In a Sapper context, following the Svelma README didn't work properly for me..
I used: { scss } from '@kazzkiq/svelte-preprocess-scss'
and then I get a lot of warnings, especially from code inside Svelma components...

// root folder is /home/fe/chifoomix/site/web
/home/fe/chifoomix/site/web/node_modules/svelma/src/components    /Dialog/Dialog.svelte
Dialog has unused export property 'promise'. If it is for external reference only, please consider using `export const promise`
85:   // export let showClose = true
86:   let resolve
87:   export let promise = new Promise((fulfil) => (resolve = fulfil))
                 ^
88:   
89:   // TODO: programmatic subcomponents

here's my rollup config
rollup.config.txt

@zoulja
Copy link

zoulja commented Apr 10, 2021

Any chance to get correct, complete and properly tested Installation guide for beginners?

@abbychau
Copy link
Collaborator

@zoulja
this thread is quite old. could you post the specific error message during usage?

@RichyHBM
Copy link

@abbychau I think the issue is that with a fresh svelte setup, there is no sass support: https://github.com/sveltejs/template/blob/master/rollup.config.js yet by the looks of the above comments, sass is a requirement. It would be good for the setup guide was going from the above rollup config to a working svelma rollout config

@webdev23
Copy link

webdev23 commented Mar 21, 2022

The install leads to many errors with Svelte": "^3.0.0, like (!) Plugin svelte: A11y: <a> element should have an href attribute (...).


Svelte": "^3.0.0, rollup.config.js that works for me.

import svelte from 'rollup-plugin-svelte';
import commonjs from '@rollup/plugin-commonjs';
import resolve from '@rollup/plugin-node-resolve';
import livereload from 'rollup-plugin-livereload';
import { terser } from 'rollup-plugin-terser';
//import css from 'rollup-plugin-css-only';
import autoPreprocess from 'svelte-preprocess';
import postcss from 'rollup-plugin-postcss'
import preprocess from 'svelte-preprocess'

const production = !process.env.ROLLUP_WATCH;

function serve() {
  let server;

  function toExit() {
    if (server) server.kill(0);
  }

  return {
    writeBundle() {
      if (server) return;
      server = require('child_process').spawn('npm', ['run', 'start', '--', '--dev'], {
        stdio: ['ignore', 'inherit', 'inherit'],
        shell: true
      });

      process.on('SIGTERM', toExit);
      process.on('exit', toExit);
    }
  };
}

export default {
  input: 'src/main.js',
  output: {
    sourcemap: true,
    format: 'iife',
    name: 'app',
    file: 'public/build/bundle.js'
  },
  plugins: [
    svelte({
      compilerOptions: {
        // enable run-time checks when not in production
        dev: !production
      },
      preprocess: autoPreprocess(),
      emitCss: true,

    }),
    postcss({
      extract: true,
      minimize: true,
      use: [
        [
          "sass",
          {
            includePaths: ["./node_modules", "./node_modules/bulma", "./src"],
          },
        ],
      ],
    }),
    //css({ output: 'bundle.css' }),
    resolve({
      browser: true,
      dedupe: ['svelte']
    }),
    commonjs(),
    !production && serve(),
    !production && livereload('public'),
    production && terser()
  ],
  watch: {
    clearScreen: false
  }
};

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

10 participants