baileyherbert / svelte-webpack-starter Goto Github PK
View Code? Open in Web Editor NEW🔥 Svelte starter with Webpack 5, TypeScript, SCSS, Babel, and HMR.
🔥 Svelte starter with Webpack 5, TypeScript, SCSS, Babel, and HMR.
When attempting to run either dev
or build
npm scripts, webpack complains:
[webpack-cli] Failed to load '/home/luis/tmp/webpack5-svelte/webpack.config.ts' config
[webpack-cli] webpack.config.ts:198:4 - error TS2345: Argument of type '{ sourceMap: boolean | { inline: boolean; annotation: boolean; }; parallel: true; minimizerOptions: { preset: [string, { discardComments: { removeAll: boolean; }; }]; }; }' is not assignable to parameter of type 'BasePluginOptions & { minify?: BasicMinimizerImplementation<CssNanoOptionsExtended>; minimizerOptions?: CssNanoOptionsExtended; }'.
Object literal may only specify known properties, and 'sourceMap' does not exist in type 'BasePluginOptions & { minify?: BasicMinimizerImplementation<CssNanoOptionsExtended>; minimizerOptions?: CssNanoOptionsExtended; }'.
198 sourceMap: sourceMapsInProduction ? {inline: false, annotation: true, }: false,
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
It doesn't look like this project has had as much attention as it deserves--so, THANK YOU for putting out there, and providing nice documentation and options. This is a really nice starter for svelte, webpack, and typescript.
When I do a clean checkout & run yarn && yarn dev
(after workaround #4), I get the following error:
$ yarn dev
yarn run v1.23.0-0
$ webpack serve
ℹ 「wds」: Project is running at http://localhost:8080/
ℹ 「wds」: webpack output is served from /build/
ℹ 「wds」: Content not from webpack is served from public
ℹ 「wdm」: Failed to compile.
TypeError [ERR_INVALID_ARG_TYPE]: The "path" argument must be of type string. Received undefined
at validateString (internal/validators.js:124:11)
at Object.dirname (path.js:1128:5)
at WatcherManager.watchFile (/Users/duane/Relm/relm-wp5/node_modules/watchpack/lib/getWatcherManager.js:30:26)
at /Users/duane/Relm/relm-wp5/node_modules/watchpack/lib/watchpack.js:231:41
at Object.exports.batch (/Users/duane/Relm/relm-wp5/node_modules/watchpack/lib/watchEventSource.js:326:3)
at Watchpack.watch (/Users/duane/Relm/relm-wp5/node_modules/watchpack/lib/watchpack.js:229:20)
at NodeWatchFileSystem.watch (/Users/duane/Relm/relm-wp5/node_modules/webpack/lib/node/NodeWatchFileSystem.js:84:16)
at Watching.watch (/Users/duane/Relm/relm-wp5/node_modules/webpack/lib/Watching.js:238:48)
at /Users/duane/Relm/relm-wp5/node_modules/webpack/lib/Watching.js:215:13
at processTicksAndRejections (internal/process/task_queues.js:75:11)
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
I'm not sure what to check for here. It seems the watcher is being passed an undefined path?
When I use any external svelte components like @sveltejs/svelte-virtual-list
or svelte-carousel
I get the error:
ERROR in ./node_modules/@sveltejs/svelte-virtual-list/VirtualList.svelte 1:0
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> <script>
| import { onMount, tick } from 'svelte';
|
webpack 5.67.0 compiled with 1 error in 8086 ms
If I get rid of the exclude part in
test: /\.svelte$/,
exclude: /node_modules/,
The build works but the component does not actually work.
yarn dev
yarn run v1.22.10
$ webpack serve
[webpack-cli] Failed to load '/home/soshi/project/test/webpack.config.ts' config
[webpack-cli] webpack.config.ts:98:10 - error TS2322: Type 'typeof autoprefixer' is not assignable to type 'AcceptedPlugin'.
Property 'process' is missing in type 'typeof autoprefixer' but required in type 'Plugin<any>'.
98 Autoprefixer
~~~~~~~~~~~~
node_modules/postcss/lib/postcss.d.ts:24:5
24 process: (css: string | {
~~~~~~~
'process' is declared here.
error Command failed with exit code 2.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
Hello, I am a Japanese student engineers.
When I downloaded this template and tried to start development, I got an error in webpack.
It looks like a postcss error.
Sorry for my poor English
Hey,
I cannot figure out what went wrong, but I receive an error when importing any file.
this is what I get:
Failed to init component
<App>
ReferenceError: Auth is not defined
at create_fragment (http://localhost:8080/build/bundle.js:11463:2)
at init (http://localhost:8080/build/bundle.js:13891:37)
at new App (http://localhost:8080/build/bundle.js:11550:56)
at createProxiedComponent (http://localhost:8080/build/bundle.js:11420:9)
at new ProxyComponent (http://localhost:8080/build/bundle.js:10985:92)
at new Proxy<App> (http://localhost:8080/build/bundle.js:11085:11)
at Object../src/main.ts (http://localhost:8080/build/bundle.js:14146:13)
at __webpack_require__ (http://localhost:8080/build/bundle.js:14213:33)
at http://localhost:8080/build/bundle.js:15355:11
at http://localhost:8080/build/bundle.js:15359:12
Maybe you have an idea of what went wrong?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.