Develop Reference

Module not found: Error: Can't resolve './components/AllPost.vue' in '/var/www/html/proj/resources/js'

Laravel 8.21
Updated all node_modules using npm
When I do npm run watch
I get below error:
user#user-HVM-domU:/var/www/html/proj$ sudo npm run watch
> watch
> mix watch
glob error [Error: EACCES: permission denied, scandir '/root/.npm/_logs'] {
errno: -13,
code: 'EACCES',
syscall: 'scandir',
path: '/root/.npm/_logs'
}
ERROR in ./resources/js/routes.js 1:0-48
Module not found: Error: Can't resolve './components/AllPost.vue' in '/var/www/html/ginvoice/resources/js'
ERROR in ./resources/js/routes.js 2:0-47
Module not found: Error: Can't resolve './components/AddPost.vue' in '/var/www/html/ginvoice/resources/js'
ERROR in ./resources/js/routes.js 3:0-49
Module not found: Error: Can't resolve './components/EditPost.vue' in '/var/www/html/ginvoice/resources/js'
ERROR in /js/app
Module not found: Error: Can't resolve '/var/www/html/ginvoice/resources/sass/app.scss' in '/var/www/html/ginvoice'
webpack compiled with 4 errors
My sudo nano resources/js/routes.js
import AllPosts from './components/AllPost.vue';
import AddPost from './components/AddPost.vue';
import EditPost from './components/EditPost.vue';
export const routes = [
{
name: 'home',
path: '/',
component: AllPosts
},
{
name: 'add',
path: '/add',
component: AddPost
},
{
name: 'edit',
path: '/edit/:id',
component: EditPost
}
];
sudo nano package.json
{
"private": true,
"scripts": {
"dev": "npm run development",
"development": "mix",
"watch": "mix watch",
"watch-poll": "mix watch -- --watch-options-poll=1000",
"hot": "mix watch --hot",
"prod": "npm run production",
"production": "mix --production"
},
"devDependencies": {
"axios": "^0.21",
"laravel-mix": "^6.0.9",
"lodash": "^4.17.19",
"postcss": "^8.1.14",
"resolve-url-loader": "^3.1.0",
"sass": "^1.32.2",
"sass-loader": "^8.0.2",
"vue-loader": "^15.9.6",
"vue-template-compiler": "^2.6.12"
},
"dependencies": {
"#fortawesome/fontawesome-svg-core": "^1.2.32",
"#fortawesome/free-solid-svg-icons": "^5.15.1",
"#fortawesome/vue-fontawesome": "^2.0.2",
"bootstrap": "^4.5.3",
"bootstrap-vue": "^2.21.2",
"cross-env": "^7.0.3",
"jquery": "^3.5.1",
"moment": "^2.29.1",
"npm-check-updates": "^10.2.5",
"pdfmake": "^0.1.69",
"popper.js": "^1.16.1",
"vue": "^2.6.12",
"vue-axios": "^3.2.2",
"vue-progressbar": "^0.7.5",
"vue-router": "^3.4.9"
}
}

How to add Sapper to existing Svelte project?

I have extensive applications in svelte, later I need to attach a sapper to it for further work, it is possibly? I try do it via:
npm i #sapper
but when I try to import something from this package e.q.:
import { goto } from '#sapper/app';
compiler throw me that i have no dependency to this sapper methods :(
I have no idea how to attach sapper to my project
my rollup
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 { terser } from "rollup-plugin-terser";
// library that helps you import in svelte with
// absolute paths, instead of
// import Component from "../../../../components/Component.svelte";
// we will be able to say
// import Component from "components/Component.svelte";
import alias from "#rollup/plugin-alias";
const production = !process.env.ROLLUP_WATCH;
// configure aliases for absolute imports
const aliases = alias({
resolve: [".svelte", ".js"], //optional, by default this will just look for .js files or folders
entries: [
{ find: "components", replacement: "src/components" },
{ find: "views", replacement: "src/views" },
{ find: "assets", replacement: "src/assets" },
],
});
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({
// 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("bundle.css");
},
}),
// 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(),
// for absolut imports
// i.e., instead of
// import Component from "../../../../components/Component.svelte";
// we will be able to say
// import Component from "components/Component.svelte";
aliases,
],
watch: {
clearScreen: false,
},
};
my package.json:
{
"name": "svelte-app",
"version": "1.0.0",
"scripts": {
"build": "rollup -c",
"dev": "rollup -c -w",
"start": "sirv public -s",
"build:tailwind": "tailwind build public/assets/styles/index.css -o public/assets/styles/tailwind.css",
"build:fontawesome": "mkdir -p public/assets/vendor/#fortawesome/fontawesome-free/webfonts && mkdir -p public/assets/vendor/#fortawesome/fontawesome-free/css && cp -a ./node_modules/#fortawesome/fontawesome-free/webfonts public/assets/vendor/#fortawesome/fontawesome-free/ && cp ./node_modules/#fortawesome/fontawesome-free/css/all.min.css public/assets/vendor/#fortawesome/fontawesome-free/css/all.min.css",
"install:clean": "rm -rf node_modules/ && rm -rf package-lock.json && rm -rf public/build && npm install && npm run build:tailwind && npm run build:fontawesome && npm run dev"
},
"devDependencies": {
"#rollup/plugin-commonjs": "^16.0.0",
"#rollup/plugin-node-resolve": "^10.0.0",
"rollup": "^2.3.4",
"rollup-plugin-commonjs": "^10.1.0",
"rollup-plugin-css-only": "^3.1.0",
"rollup-plugin-livereload": "^2.0.0",
"rollup-plugin-node-polyfills": "^0.2.1",
"rollup-plugin-svelte": "^7.0.0",
"rollup-plugin-terser": "^7.0.0",
"svelte": "^3.0.0",
"webpack": "^5.11.1",
"webpack-cli": "^4.3.1"
},
"dependencies": {
"#fortawesome/fontawesome-free": "5.14.0",
"#popperjs/core": "2.5.1",
"#rollup/plugin-alias": "3.1.1",
"#rollup/plugin-replace": "^2.3.4",
"#tailwindcss/custom-forms": "0.2.1",
"body-parser": "^1.19.0",
"chart.js": "2.9.3",
"compression": "^1.7.4",
"express": "^4.17.1",
"express-session": "^1.17.1",
"fontawesome-svelte": "^2.0.1",
"node-fetch": "^2.6.1",
"node-sass": "^5.0.0",
"page": "^1.11.6",
"polka": "^0.5.2",
"rollup-plugin-scss": "^2.6.1",
"session-file-store": "^1.5.0",
"sirv": "^1.0.10",
"sirv-cli": "1.0.6",
"svelte-routing": "1.4.2",
"tailwindcss": "1.8.10"
}
}

I was looking for this answer, I think the #Romain Durand answer is the closest, I don't think we can add ssaper to an existing svelte project. I would have to initialize project in ssaper and use svelte.

SyntaxError: Unexpected token 'export' in Nodejs project with Typescript and Webpack

I have tried to find an answer to this solution but the answers I have found are usually to do with adding 'module' to a script tag (which doesnt apply in my case since I'm not writing browser code) or using import/export in a javascript file (which is not currently supported by Node) which means the need to use babel or typescript. Since I am seeing this error in a typescript project, I don't expect to see this error.
Actually, I have 2 typescript/webpack projects (with near identical setup, project A depends on project B) 1 importing definitions from the other.
In project B, I have several classes, 2 of which are exported, plus some other definitions. In project B's index.ts:
export * from './types';
export * from './specService/spec-option-service.class';
export * from './converter/xpath-converter.class';
and those are exported like so:
// types.ts
//
export interface IElementInfo {
readonly id?: string;
readonly recurse?: string;
readonly discards?: ReadonlyArray<string>;
readonly descendants?: {
readonly by?: string;
readonly throwIfCollision?: boolean;
readonly throwIfMissing?: boolean;
};
}
// ... plus other similarly defined exports
// specService/spec-option-service.class.ts
//
export class SpecOptionService { ...
// converter/xpath-converter.class.ts
//
export class XpathConverter { ...
And then in project B's index.ts, I export all the definitions (export * from blah) for use by the client as shown at the top of this post.
When I build project B, there is no such issues with the export.
After installing project B into project A
from a typescript file I am importing using:
import * as ProjectB from 'projectb';
Webpack successfully even builds project A's bundle, with no error. The error occurs at runtime, in this case when I go to run the tests at which point I see the following:
/Users/User/dev/github/js/projecta/node_modules/projectb/lib/index.ts:2
export * from './types';
^^^^^^
SyntaxError: Unexpected token 'export'
at Module._compile (internal/modules/cjs/loader.js:892:18)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:973:10)
at Module.load (internal/modules/cjs/loader.js:812:32)
at Function.Module._load (internal/modules/cjs/loader.js:724:14)
at Module.require (internal/modules/cjs/loader.js:849:19)
at require (internal/modules/cjs/helpers.js:74:18)
at Object.projectb (/Users/User/dev/github/js/projecta/dist/projecta-test-bundle.js:292:18)
At the end of projectb's webpack bundle, I found the following:
module.exports = webpack_require(/*! ./lib */"./lib/index.ts");
which I believe is at fault. Why does the bundle built by webpack for an "es5" target contain references to typescript? Isn't this bound to fail? I would have expected a require on the generated index.js file (not index.ts).
This is the first time I've done import/export across project boundaries in typescript so I know that I doing something wrong but what?
The tsconfig.json file in both projects are the same:
{
"compilerOptions": {
"allowJs": true,
"alwaysStrict": true,
"esModuleInterop": true,
"module": "commonjs",
"moduleResolution": "Node",
"noImplicitAny": true,
"sourceMap": true,
"strictNullChecks": true,
"target": "es5",
"types": [
"mocha", "node"
],
"lib": [
"es5",
"es2015",
"es6",
"dom"
]
},
"include": [
"lib/**/*"
],
"exclude": [
"node_modules",
"**/*.spec.ts"
]
}
And the webpack config:
{
devtool: 'source-map',
entry: {
index: './lib/index.ts'
},
target: 'node',
mode: mode,
externals: [nodeExternals()],
module: {
rules: [
{
test: /\.ts(x?)$/,
use: 'ts-loader'
},
{
test: /\.json$/,
use: 'json-loader'
}
]
},
plugins: [
new webpack.DefinePlugin({ 'process.env.NODE_ENV': '"production"' }),
new webpack.BannerPlugin({
banner: '#!/usr/bin/env node',
raw: true
})
],
resolve: {
extensions: ['.ts', '.js', '.json']
},
watchOptions: {
ignored: /node_modules/
},
output: {
filename: 'projecta-bundle.js',
sourceMapFilename: 'projecta-bundle.js.map',
path: path.join(__dirname, 'dist'),
libraryTarget: 'commonjs'
}
}
Project A and B are plastikfan/jaxom and plastikfan/zenobia respectively. Before publishing the latest version of jaxom to npm, I am performing pre-npm-publish check (learnt that this is a wise thing to do with early npm packages) to check that clients can use the package as expected. (I've had problems in tha past where I've made a mistake in exporting something, but this does not become apparent until a client tries to use it. It's not somthing you can check for as far as I know before you publish. The advised way to to do this is to pack up your package using nom pack then install it into the client).
fyi, zenobia package.json is (cutdown version):
{
"name": "zenobia",
"version": "0.0.1",
"main": "lib/index.ts",
"scripts": {
"t": "mocha ./dist/zenobia-test-bundle.js",
"test": "npm audit --skip-unused && npm run t",
"build": "npm run build:d",
"build:d": "webpack -d --env.mode development",
"build:p": "webpack -p --env.mode production",
"build:t": "webpack --config webpack.config.test.js"
},
"repository": {
"type": "git",
"url": "git+https://github.com/plastikfan/zenobia.git"
},
"dependencies": {
"#types/node": "^12.12.14",
"#types/ramda": "^0.26.36",
"jaxine": "^2.0.1",
"jaxom": "file:../NPM-LOCAL/jaxom-0.0.1.tgz",
"ramda": "^0.26.1",
"xmldom": "^0.1.27",
"xpath": "0.0.27"
},
"devDependencies": {
"#commitlint/cli": "^8.3.3",
"#commitlint/config-conventional": "^8.2.0",
"#types/chai": "^4.2.5",
"#types/dirty-chai": "^2.0.2",
"#types/mocha": "^5.2.7",
"#types/sinon": "^7.5.1",
"#types/sinon-chai": "^3.2.3",
"chai": "^4.2.0",
"commitizen": "^4.0.3",
"cz-conventional-changelog": "^3.0.2",
"depcheck": "^0.9.1",
"dirty-chai": "^2.0.1",
"mocha": "^6.2.2",
"nyc": "^14.1.1",
"precommit-hook": "^3.0.0",
"raw-loader": "^4.0.0",
"rimraf": "^3.0.0",
"semistandard": "^14.2.0",
"shebang-loader": "0.0.1",
"sinon": "^7.5.0",
"snazzy": "^8.0.0",
"ts-loader": "^6.2.1",
"tslint": "^5.20.1",
"tslint-config-semistandard": "^8.0.1",
"typescript": "^3.7.2",
"webpack": "^4.41.2",
"webpack-cli": "^3.3.10",
"webpack-config-utils": "^2.3.1",
"webpack-node-externals": "^1.7.2"
}
}
And jaxom's cutdown package.json:
{
"name": "jaxom",
"main": "./lib/index.ts",
"scripts": {
"clean": "rimraf dist && rimraf decl",
"t": "mocha ./dist/jaxom-test-bundle.js",
"test": "npm audit --skip-unused && npm run t",
"build": "npm run build:d",
"build:d": "webpack -d --env.mode development",
"build:p": "webpack -p --env.mode production",
"build:t": "webpack --config webpack.config.test.js"
},
"dependencies": {
"#types/ramda": "^0.26.36",
"#types/xregexp": "^3.0.30",
"jinxed": "0.0.2",
"moment": "^2.24.0",
"ramda": "^0.26.1",
"xmldom-ts": "^0.3.1",
"xpath-ts": "^1.3.13",
"xregexp": "^4.2.4"
},
"devDependencies": {
"#commitlint/cli": "^8.2.0",
"#commitlint/config-conventional": "^8.2.0",
"#types/chai": "^4.2.5",
"#types/dirty-chai": "^2.0.2",
"#types/mocha": "^5.2.7",
"#types/sinon": "^7.5.1",
"#types/sinon-chai": "^3.2.3",
"chai": "^4.2.0",
"commitizen": "^4.0.3",
"cz-conventional-changelog": "^3.0.2",
"depcheck": "^0.9.1",
"dirty-chai": "^2.0.1",
"json-loader": "^0.5.7",
"mocha": "^6.2.2",
"precommit-hook": "^3.0.0",
"raw-loader": "^4.0.0",
"rimraf": "^3.0.0",
"sinon": "^7.5.0",
"sinon-chai": "^3.3.0",
"snazzy": "^8.0.0",
"ts-loader": "^6.2.1",
"tslint": "^5.20.1",
"tslint-config-semistandard": "^8.0.1",
"typescript": "^3.7.2",
"webpack": "^4.41.2",
"webpack-cli": "^3.3.10",
"webpack-config-utils": "^2.3.1",
"webpack-node-externals": "^1.7.2"
}
}

For me, it was the module key in tsconfig.json.
I changed it from this:
"module": "esnext"
to this:
"module": "commonjs"

I think tsconfig can be a problem here.
Because when you are importing import * as ProjectB from 'projectb'; your projectB files will not be transpiled by typescript because of include and exclude properties of projectA tsconfig. Try add projectB to the compilation process of projectA.
Something like include: [ "lib/**/*", "my/path/to/projectB/**"] in projectA tsconfig.

Make sure you're running .js file not .ts.

Try adding "type":"module" to the package.json.

throw new Error(`Deprecation notice: CommonsChunkPlugin now only takes a single argument

i ma trying to build my angular application using webpack.
so I referred this link http://blog.teamtreehouse.com/26017-2
i created a webpack.config.js at package.json level and in package.json I included this line "bundle": "webpack"
when I run npm run bundle I am facing an error npm ERR! Failed at the sleeping#1.0.0 bundle script 'webpack'.
can you tell me how to fix it.
providing my code and eror below
folder structure
- webapp
- app
- app.module.ts
- package.json
-webpack.config.js
app.module.ts
import './rxjs-extensions';
import { NgModule } from '#angular/core';
import { BrowserModule } from '#angular/platform-browser';
import { FormsModule,ReactiveFormsModule } from '#angular/forms';
import { HttpModule } from '#angular/http';
import { AppComponent } from './app.component';
import {Base} from './components/base/base';
import {players} from './components/jumping/user';
require('./directives/yep-nope.controller');
require('./services/github-status.service');
require('./controllers/dashboard.controller');
import {
Routes,
RouterModule,
Router,
ActivatedRoute,
CanActivateChild,
CanDeactivate,
ActivatedRouteSnapshot,
RouterStateSnapshot
} from "#angular/router";
#NgModule({
imports: [
BrowserModule,
FormsModule,
ReactiveFormsModule,
HttpModule,
routing,
MultiselectDropdownModule,
AccordionModule
],
declarations: [
AppComponent,
Base,
jumping,
players
],
providers: [
SPORTSService],
bootstrap: [ AppComponent ]
})
export class AppModule {
}
package.json
{
"name": "SPORTS",
"version": "1.0.0",
"scripts": {
"start": "tsc && concurrently \"npm run tsc:w\" \"npm run lite\" ",
"lite": "lite-server",
"postinstall": "typings install",
"tsc": "tsc",
"tsc:w": "tsc -w",
"typings": "typings",
"test": "tsc && concurrently \"karma start karma.conf.js\"",
"bundle": "webpack"
},
"license": "ISC",
"dependencies": {
"#angular/common": "2.0.0",
"#angular/compiler": "2.0.0",
"#angular/core": "2.0.0",
"#angular/forms": "2.0.0",
"#angular/http": "2.0.0",
"#angular/platform-browser": "2.0.0",
"#angular/platform-browser-dynamic": "2.0.0",
"#angular/router": "3.0.0",
"#angular/upgrade": "2.0.0",
"#types/underscore": "^1.8.1",
"angular2-in-memory-web-api": "0.0.20",
"bootstrap": "^3.3.6",
"core-js": "^2.4.1",
"jquery": "^3.1.1",
"latest-version": "^2.0.0",
"reflect-metadata": "^0.1.3",
"rxjs": "5.0.0-beta.12",
"systemjs": "0.19.27",
"zone.js": "^0.6.23"
},
"devDependencies": {
"concurrently": "^2.2.0",
"jasmine-core": "~2.4.1",
"jasmine-expect": "^3.0.1",
"jasmine-jquery": "^2.1.1",
"karma": "^1.2.0",
"karma-chrome-launcher": "^0.2.3",
"karma-cli": "^0.1.2",
"karma-coverage": "^1.1.1",
"karma-htmlfile-reporter": "^0.2.2",
"karma-jasmine": "^0.3.8",
"karma-jquery": "^0.1.0",
"karma-sourcemap-loader": "^0.3.7",
"karma-typescript": "^2.1.4",
"karma-typescript-preprocessor": "^0.3.0",
"lite-server": "^2.2.2",
"typescript": "^2.0.2",
"typings": "^1.3.2",
"webpack": "^3.7.1"
}
}
webpack.config.js
var webpack = require('webpack');
module.exports = {
context: __dirname + '/app',
entry: {
app: './app.js',
vendor: ['angular']
},
output: {
path: __dirname + '/js',
filename: 'app.bundle.js'
},
plugins: [
new webpack.optimize.CommonsChunkPlugin(/* chunkName= */"vendor", /* filename= */"vendor.bundle.js")
]
};
error
$ npm run bundle
$ npm run bundle
> sports#1.0.0 bundle C:\Users\webcomponent\src\main\webapp
> webpack
C:\Users\webcomponent\src\main\webapp\node_modules\webpack\lib\optimize\CommonsChunkPlugin.js:11
throw new Error(`Deprecation notice: CommonsChunkPlugin now only takes a single argument. Either an options
^
Error: Deprecation notice: CommonsChunkPlugin now only takes a single argument. Either an options
object *or* the name of the chunk.
Example: if your old code looked like this:
new webpack.optimize.CommonsChunkPlugin('vendor', 'vendor.bundle.js')
You would change it to:
new webpack.optimize.CommonsChunkPlugin({ name: 'vendor', filename: 'vendor.bundle.js' })
The available options are:
name: string
names: string[]
filename: string
minChunks: number
chunks: string[]
children: boolean
async: boolean
minSize: number
at new CommonsChunkPlugin (C:\Users\webcomponent\src\main\webapp\node_modules\webpack\lib\optimize\CommonsChunkPlugin.js:11:10)
at Object.<anonymous> (C:\Users\webcomponent\src\main\webapp\webpack.config.js:13:13)
at Module._compile (module.js:570:32)
at Object.Module._extensions..js (module.js:579:10)
at Module.load (module.js:487:32)
at tryModuleLoad (module.js:446:12)
at Function.Module._load (module.js:438:3)
at Module.require (module.js:497:17)
at require (internal/module.js:20:19)
at requireConfig (C:\Users\webcomponent\src\main\webapp\node_modules\webpack\bin\convert-argv.js:97:18)
npm ERR! Windows_NT 10.0.14393
npm ERR! argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "run" "bundle"
npm ERR! node v6.11.2
npm ERR! npm v3.10.10
npm ERR! code ELIFECYCLE
npm ERR! sports#1.0.0 bundle: `webpack`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the sports#1.0.0 bundle script 'webpack'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the sports package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! webpack
npm ERR! You can get information on how to open an issue for this project with:
npm ERR! npm bugs sports
npm ERR! Or if that isn't available, you can get their info via:
npm ERR! npm owner ls sports
npm ERR! There is likely additional logging output above.
npm ERR! Please include the following file with any support request:
npm ERR! C:\Users\webcomponent\src\main\webapp\npm-debug.log

In webpack.config.js, you should change this:
new webpack.optimize.CommonsChunkPlugin(
/* chunkName= */"vendor", /* filename= */"vendor.bundle.js")
to:
new webpack.optimize.CommonsChunkPlugin(
{name:"vendor", filename:"vendor.bundle.js",})
and that should work.

How to include jQuery UI into my project using Webpack?

I started a new project using React Slingshot and am trying to use jQuery UI accordions. I have installed the jQuery UI plugin with NPM using npm install --save jquery-ui. As far as I understand, Webpack automatically bundles my Javascript into a bundles.js based on my Webpack config, and is included on my index.ejs page. However, I'm getting this error, which tells me that the jQuery UI plugin is not being loaded to the page:
Uncaught TypeError: $(...).accordion is not a function
How can I include this plugin? Below I have included my code - let me know if there are any other files you'd like to see.
index.ejs:
<!DOCTYPE html>
<html lang="en">
<!--
**NOTE:** This is a template for index.html. It uses ejs and htmlWebpackPlugin to generate a different index.html for each environment. htmlWebpackPlugin will dynamically add references to the scripts and styles that it bundles to this file. The generated bundles have hash-based filenames, so it's necessary to add the references dynamically.
For more info on ejs, see http://www.embeddedjs.com/. For examples of using it with htmlWebpackPlugin, see https://github.com/jaketrent/html-webpack-template/blob/master/index.ejs
-->
<head>
<% if (htmlWebpackPlugin.options.trackJSToken) { %>
<script>window._trackJs = {token: '<%= htmlWebpackPlugin.options.trackJSToken %>'};</script>
<script src="https://d2zah9y47r7bi2.cloudfront.net/releases/current/tracker.js"></script>
<% } %>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta charset="utf-8"/>
<title>Fusion Starter</title>
</head>
<body>
<div id="app"></div>
</body>
</html>
index.js:
import React from 'react';
import {render} from 'react-dom';
import { Provider } from 'react-redux';
import configureStore from './store/configureStore';
import App from './components/App';
require('./favicon.ico'); // Tell webpack to load favicon.ico
import './styles/styles.scss'; // Yep, that's right. You can import SASS/CSS files too! Webpack will run the associated loader and plug this into the page.
import './styles/spa.less';
import './styles/jquery-ui.min.css';
import './styles/jquery-ui.structure.min.css';
import './styles/jquery-ui.theme.min.css';
const store = configureStore();
render(
<Provider store={store}>
<App />
</Provider>, document.getElementById('app')
);
App.js:
import React, { PropTypes } from 'react';
import Header from './common/Header';
const App = () => {
return (
<div>
<Header />
<div id="content" className="ui-front">
<div id="appContainer">
<div id="accordionContainer">
<div id="accordion">
<h3 id="accountDetailsPanel">SELECT STATE AND ACCOUNT TYPE</h3>
<div id="accountDetailsContainer" className="inner-content"></div>
</div>
</div>
</div>
</div>
</div>
);
};
$(document).ready(function () {
$("#accordion").accordion({ header: "h3",
autoheight: false,
active: false,
alwaysOpen: false,
fillspace: false,
collapsible: true,
//heightStyle: 'content' //auto, fill, content
});
});
export default App;
package.json:
{
"name": "practice",
"version": "0.1.0",
"description": "",
"engines": {
"npm": ">=3"
},
"scripts": {
"preinstall": "node tools/nodeVersionCheck.js",
"setup": "node tools/setup/setupMessage.js && npm install && node tools/setup/setup.js",
"remove-demo": "babel-node tools/removeDemo.js",
"start-message": "babel-node tools/startMessage.js",
"prestart": "npm-run-all --parallel start-message remove-dist",
"start": "npm-run-all --parallel test:watch open:src lint:watch",
"open:src": "babel-node tools/srcServer.js",
"open:dist": "babel-node tools/distServer.js",
"lint": "esw webpack.config.* src tools --color",
"lint:watch": "npm run lint -- --watch",
"clean-dist": "npm run remove-dist && mkdir dist",
"remove-dist": "rimraf ./dist",
"prebuild": "npm run clean-dist && npm run lint && npm run test",
"build": "babel-node tools/build.js && npm run open:dist",
"test": "mocha tools/testSetup.js \"src/**/*.spec.js\" --reporter progress",
"test:cover": "babel-node node_modules/isparta/bin/isparta cover --root src --report html node_modules/mocha/bin/_mocha -- --require ./tools/testSetup.js \"src/**/*.spec.js\" --reporter progress",
"test:cover:travis": "babel-node node_modules/isparta/bin/isparta cover --root src --report lcovonly _mocha -- --require ./tools/testSetup.js \"src/**/*.spec.js\" && cat ./coverage/lcov.info | node_modules/coveralls/bin/coveralls.js",
"test:watch": "npm run test -- --watch",
"open:cover": "npm run test:cover && open coverage/index.html"
},
"author": "",
"license": "MIT",
"dependencies": {
"jquery": "3.1.0",
"jquery-ui": "1.12.0",
"object-assign": "4.1.0",
"react": "15.2.0",
"react-dom": "15.2.0",
"react-redux": "4.4.5",
"react-router-redux": "4.0.5",
"redux": "3.5.2"
},
"devDependencies": {
"babel-cli": "6.10.1",
"babel-core": "6.10.4",
"babel-loader": "6.2.4",
"babel-plugin-react-display-name": "2.0.0",
"babel-preset-es2015": "6.9.0",
"babel-preset-react": "6.11.1",
"babel-preset-react-hmre": "1.1.1",
"babel-preset-stage-1": "6.5.0",
"babel-register": "6.9.0",
"browser-sync": "2.13.0",
"chai": "3.5.0",
"chalk": "1.1.3",
"coveralls": "2.11.11",
"cross-env": "1.0.8",
"css-loader": "0.23.1",
"enzyme": "2.4.1",
"eslint": "3.0.1",
"eslint-plugin-import": "1.10.2",
"eslint-plugin-jsx-a11y": "1.5.5",
"eslint-plugin-react": "5.2.2",
"eslint-watch": "2.1.13",
"extract-text-webpack-plugin": "1.0.1",
"file-loader": "0.9.0",
"html-webpack-plugin": "2.22.0",
"isparta": "4.0.0",
"less": "2.7.1",
"less-loader": "2.2.3",
"mocha": "2.5.3",
"node-sass": "3.8.0",
"npm-run-all": "2.3.0",
"open": "0.0.5",
"prompt": "1.0.0",
"react-addons-test-utils": "15.2.0",
"redux-immutable-state-invariant": "1.2.3",
"replace": "0.3.0",
"rimraf": "2.5.3",
"sass-loader": "4.0.0",
"sinon": "1.17.4",
"sinon-chai": "2.8.0",
"style-loader": "0.13.1",
"url-loader": "0.5.7",
"webpack": "1.13.1",
"webpack-dev-middleware": "1.6.1",
"webpack-hot-middleware": "2.12.1",
"webpack-md5-hash": "0.0.5"
},
"keywords": [],
"repository": {
"type": "git",
"url": ""
}
}
webpack.config.dev.js:
import webpack from 'webpack';
import path from 'path';
import HtmlWebpackPlugin from 'html-webpack-plugin';
export default {
debug: true,
devtool: 'cheap-module-eval-source-map', // more info:https://webpack.github.io/docs/build-performance.html#sourcemaps and https://webpack.github.io/docs/configuration.html#devtool
noInfo: true, // set to false to see a list of every file being bundled.
entry: [
'webpack-hot-middleware/client?reload=true',
'./src/index'
],
target: 'web', // necessary per https://webpack.github.io/docs/testing.html#compile-and-test
output: {
path: `${__dirname}/src`, // Note: Physical files are only output by the production build task `npm run build`.
publicPath: 'http://localhost:3000/', // Use absolute paths to avoid the way that URLs are resolved by Chrome when they're parsed from a dynamically loaded CSS blob. Note: Only necessary in Dev.
filename: 'bundle.js'
},
plugins: [
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify('development'), // Tells React to build in either dev or prod modes. https://facebook.github.io/react/downloads.html (See bottom)
__DEV__: true
}),
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery",
"window.jQuery": "jquery"
}),
new webpack.HotModuleReplacementPlugin(),
new webpack.NoErrorsPlugin(),
new HtmlWebpackPlugin({ // Create HTML file that includes references to bundled CSS and JS.
template: 'src/index.ejs',
minify: {
removeComments: true,
collapseWhitespace: true
},
inject: true
})
],
module: {
loaders: [
{test: /\.js$/, include: path.join(__dirname, 'src'), loaders: ['babel']},
{test: /\.eot(\?v=\d+.\d+.\d+)?$/, loader: 'file'},
{test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "url-loader?limit=10000&mimetype=application/font-woff"},
{test: /\.ttf(\?v=\d+.\d+.\d+)?$/, loader: 'file-loader?limit=10000&mimetype=application/octet-stream'},
{test: /\.svg(\?v=\d+.\d+.\d+)?$/, loader: 'file-loader?limit=10000&mimetype=image/svg+xml'},
{test: /\.(jpe?g|png|gif)$/i, loaders: ['file']},
{test: /\.ico$/, loader: 'file-loader?name=[name].[ext]'},
{test: /\.css$/, loaders: ['style', 'css?sourceMap']},
{test: /\.scss$/, loaders: ['style', 'css?sourceMap', 'sass?sourceMap']},
{test: /\.less$/, loaders: ['style', 'css?sourceMap', 'less?sourceMap']}
]
}
};

I had a similar problem and it worked for me:
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
}),
// ...
alias: {
jquery: 'jquery/src/jquery',
'jquery-ui': 'jquery-ui/ui',
},

I'm still new to webpack, but https://stackoverflow.com/a/39230057/1798643 worked for me:
npm i -S jquery-ui-bundle
Then use:
require("jquery-ui-bundle");
If you try to alias jquery-ui module, you're in for trouble since its in:
./build/release.js
Which you can alias in webpack config:
alias: {
"jquery-ui": "jquery-ui/build/release.js",
...
But that will lead to more trouble since its inner requires will not be resolved:
Module not found: Error: Cannot resolve module 'shelljs'
Module not found: Error: Cannot resolve module 'download.jqueryui.com/lib/jquery-ui'
Module not found: Error: Cannot resolve module 'node-packager'
And so on...

I solved this issue by setting gloabl variables window.$ and window.jQuery after plugin functions were imported:
import $ from 'jquery';
import 'webpack-jquery-ui'
import 'webpack-jquery-ui/css'
//console.log($.ui.dialog) //check new plugin function
window.$ = window.jQuery = $;
It also works when you need more jQuery plugin, such as jstree, datatables, e.g.
import $ from 'jquery';
import 'webpack-jquery-ui'
import 'jstree'
//console.log($.fn.jstree) //check new plugin function
window.$ = window.jQuery = $;
The tip is window.$ = window.jQuery = $; after plugin were imported. Otherwise you would see $.ui.dialog is defined in main.js, but it is undefined in other script files