I'm a junior front-end, and trying to learn Storybook for work.
I just created new react app with create-react-app and run npm start.
And it failed just in the screenshot below.
npm start failed error
But I just solved it after seeing an answer from stack-overflow just like in the screenshot below.
solved error of react-scripts#4.0.3
And I initiated storybook in my new react project with npx sb init just like the documentation says. It is succeed by creating .storybook folder and some example stories under src folder. Then, I run npm run storybook, and so many error appears in the console.
$ npm run storybook
> learn-storybook-5#0.1.0 storybook
> start-storybook -p 6006 -s public
info #storybook/react v6.4.9
info
(node:15528) DeprecationWarning: --static-dir CLI flag is deprecated, see:
https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#deprecated---static-dir-cli-flag
(Use `node --trace-deprecation ...` to show where the warning was created)
info => Loading presets
info Found existing addon "#storybook/addon-docs", skipping.
info Found existing addon "#storybook/addon-actions", skipping.
info => Serving static files from ./public at /
info => Loading Webpack configuration from `node_modules\react-scripts`
info => Removing existing JavaScript and TypeScript rules.
info => Modifying Create React App rules.
info => Using default Webpack4 setup
10% building 1/1 modules 0 activeWARN Expected '#storybook/addon-docs' (or '#storybook/addon-essentials') to be listed before '#storybook/addon-controls' (or '#storybook/addon-essentials') in main Storybook config.
13% building 27/33 modules 6 active D:\311's learning\learn-storybook-5\node_modules\#pmmmwh\react-refresh-webpack-plugin\client\utils\safeThis.js
info => Using cached manager
webpack built preview d035dbd78ee6247b1305 in 9381ms
× ｢wdm｣: Hash: d035dbd78ee6247b1305
Version: webpack 4.44.2
Time: 9381ms
Built at: 12/10/2021 3:29:06 PM
Asset Size Chunks Chunk Names
0.iframe.bundle.js 226 KiB 0 [emitted]
0.iframe.bundle.js.map 215 KiB 0 [emitted] [dev]
1.iframe.bundle.js 206 KiB 1 [emitted]
1.iframe.bundle.js.map 145 KiB 1 [emitted] [dev]
2.iframe.bundle.js 9.15 KiB 2 [emitted]
2.iframe.bundle.js.map 6.47 KiB 2 [emitted] [dev]
3.iframe.bundle.js 92.4 KiB 3 [emitted]
3.iframe.bundle.js.map 84.3 KiB 3 [emitted] [dev]
4.iframe.bundle.js 372 KiB 4 [emitted] [big]
4.iframe.bundle.js.map 412 KiB 4 [emitted] [dev]
5.iframe.bundle.js 15.7 KiB 5 [emitted]
5.iframe.bundle.js.map 16.6 KiB 5 [emitted] [dev]
asset-manifest.json 1.67 KiB [emitted]
iframe.html 11.4 KiB [emitted]
main.iframe.bundle.js 111 KiB main [emitted] main
main.iframe.bundle.js.map 43 KiB main [emitted] [dev] main
runtime~main.iframe.bundle.js 37.9 KiB runtime~main [emitted] runtime~main
runtime~main.iframe.bundle.js.map 39.2 KiB runtime~main [emitted] [dev] runtime~main
static/media/code-brackets.2e1112d7.svg 1.42 KiB [emitted] [immutable]
static/media/colors.a4bd0486.svg 8.31 KiB [emitted] [immutable]
static/media/comments.a3859089.svg 1.49 KiB [emitted] [immutable]
static/media/direction.b770f9af.svg 1.25 KiB [emitted] [immutable]
static/media/flow.edad2ac1.svg 1.36 KiB [emitted] [immutable]
static/media/plugin.d494b228.svg 2.12 KiB [emitted] [immutable]
static/media/repo.6d496322.svg 1.6 KiB [emitted] [immutable]
static/media/stackalt.dba9fbb3.svg 2.49 KiB [emitted] [immutable]
vendors~main.iframe.bundle.js 4.64 MiB vendors~main [emitted] [big] vendors~main
vendors~main.iframe.bundle.js.map 4.16 MiB vendors~main [emitted] [dev] vendors~main
Entrypoint main [big] = runtime~main.iframe.bundle.js runtime~main.iframe.bundle.js.map vendors~main.iframe.bundle.js vendors~main.iframe.bundle.js.map main.iframe.bundle.js main.iframe.bundle.js.map
[0] multi ./node_modules/#pmmmwh/react-refresh-webpack-plugin/client/ReactRefreshEntry.js ./node_modules/#pmmmwh/react-refresh-webpack-plugin/client/ErrorOverlayEntry.js ./node_modules/#storybook/core-client/dist/esm/globals/polyfills.js ./node_modules/#storybook/core-client/dist/esm/globals/globals.js (webpack)-hot-middleware/client.js?reload=true&quiet=false&noInfo=undefined ./storybook-init-framework-entry.js ./node_modules/#storybook/addon-docs/dist/esm/frameworks/common/config.js-generated-config-entry.js ./node_modules/#storybook/addon-docs/dist/esm/frameworks/react/config.js-generated-config-entry.js ./node_modules/#storybook/react/dist/esm/client/preview/config-generated-config-entry.js ./node_modules/#storybook/addon-links/dist/esm/preset/addDecorator.js-generated-config-entry.js ./node_modules/#storybook/addon-backgrounds/dist/esm/preset/addDecorator.js-generated-config-entry.js ./node_modules/#storybook/addon-backgrounds/dist/esm/preset/addParameter.js-generated-config-entry.js ./node_modules/#storybook/addon-measure/dist/esm/preset/addDecorator.js-generated-config-entry.js ./node_modules/#storybook/addon-outline/dist/esm/preset/addDecorator.js-generated-config-entry.js ./node_modules/#storybook/addon-actions/dist/esm/preset/addDecorator.js-generated-config-entry.js ./node_modules/#storybook/addon-actions/dist/esm/preset/addArgs.js-generated-config-entry.js ./.storybook/preview.js-generated-config-entry.js ./generated-stories-entry.js 232 bytes {main} [built]
[./.storybook/preview.js-generated-config-entry.js] 3.91 KiB {main} [built] [failed] [1 error]
[./generated-stories-entry.js] 2.95 KiB {main} [built]
[./node_modules/#pmmmwh/react-refresh-webpack-plugin/client/ErrorOverlayEntry.js] 2.38 KiB {vendors~main} [built]
[./node_modules/#pmmmwh/react-refresh-webpack-plugin/client/ReactRefreshEntry.js] 500 bytes {vendors~main} [built]
[./node_modules/#storybook/addon-actions/dist/esm/preset/addArgs.js-generated-config-entry.js] 699 bytes {vendors~main} [built] [failed] [1 error]
[./node_modules/#storybook/addon-actions/dist/esm/preset/addDecorator.js-generated-config-entry.js] 704 bytes {vendors~main} [built] [failed] [1 error]
[./node_modules/#storybook/addon-backgrounds/dist/esm/preset/addDecorator.js-generated-config-entry.js] 708 bytes {vendors~main} [built] [failed] [1 error]
[./node_modules/#storybook/addon-backgrounds/dist/esm/preset/addParameter.js-generated-config-entry.js] 708 bytes {vendors~main} [built] [failed] [1 error]
[./node_modules/#storybook/addon-docs/dist/esm/frameworks/common/config.js-generated-config-entry.js] 706 bytes {vendors~main} [built] [failed] [1 error][./node_modules/#storybook/addon-docs/dist/esm/frameworks/react/config.js-generated-config-entry.js] 705 bytes {vendors~main} [built] [failed] [1 error]
[./node_modules/#storybook/addon-links/dist/esm/preset/addDecorator.js-generated-config-entry.js] 702 bytes {vendors~main} [built] [failed] [1 error]
[./node_modules/#storybook/addon-measure/dist/esm/preset/addDecorator.js-generated-config-entry.js] 704 bytes {vendors~main} [built] [failed] [1 error]
[./node_modules/#storybook/addon-outline/dist/esm/preset/addDecorator.js-generated-config-entry.js] 704 bytes {vendors~main} [built] [failed] [1 error]
[./node_modules/#storybook/core-client/dist/esm/globals/globals.js] 105 bytes {vendors~main} [built]
+ 1184 hidden modules
ERROR in ./.storybook/preview.js-generated-config-entry.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: D:\311's learning\learn-storybook-5\.storybook\preview.js-generated-config-entry.js: Missing semicolon. (8:118)
6 |
7 | /* eslint-disable import/no-unresolved */
> 8 | import { addDecorator, addParameters, addLoader, addArgsEnhancer, addArgTypesEnhancer, setGlobalRender } from 'D:/311's learning/learn-storybook-5/node_modules/#storybook/client-api';
| ^
9 | import { logger } from 'D:/311's learning/learn-storybook-5/node_modules/#storybook/client-logger';
10 | import * as config from 'D:/311's learning/learn-storybook-5/.storybook/preview.js';
11 | Object.keys(config).forEach(function (key) {
at Object._raise (D:\311's learning\learn-storybook-5\node_modules\#babel\parser\lib\index.js:541:17)
at Object.raiseWithData (D:\311's learning\learn-storybook-5\node_modules\#babel\parser\lib\index.js:534:17)
at Object.raise (D:\311's learning\learn-storybook-5\node_modules\#babel\parser\lib\index.js:495:17)
at Object.semicolon (D:\311's learning\learn-storybook-5\node_modules\#babel\parser\lib\index.js:3550:10)
at Object.parseImport (D:\311's learning\learn-storybook-5\node_modules\#babel\parser\lib\index.js:14831:10)
at Object.parseStatementContent (D:\311's learning\learn-storybook-5\node_modules\#babel\parser\lib\index.js:13454:27)
at Object.parseStatement (D:\311's learning\learn-storybook-5\node_modules\#babel\parser\lib\index.js:13352:17)
at Object.parseStatement (D:\311's learning\learn-storybook-5\node_modules\#babel\parser\lib\index.js:5307:24)
at Object.parseBlockOrModuleBlockBody (D:\311's learning\learn-storybook-5\node_modules\#babel\parser\lib\index.js:13941:25)
at Object.parseBlockBody (D:\311's learning\learn-storybook-5\node_modules\#babel\parser\lib\index.js:13932:10)
at Object.parseProgram (D:\311's learning\learn-storybook-5\node_modules\#babel\parser\lib\index.js:13272:10)
at Object.parseTopLevel (D:\311's learning\learn-storybook-5\node_modules\#babel\parser\lib\index.js:13263:25)
at Object.parseTopLevel (D:\311's learning\learn-storybook-5\node_modules\#babel\parser\lib\index.js:6273:28)
at Object.parse (D:\311's learning\learn-storybook-5\node_modules\#babel\parser\lib\index.js:15037:10)
at parse (D:\311's learning\learn-storybook-5\node_modules\#babel\parser\lib\index.js:15089:38)
at parser (D:\311's learning\learn-storybook-5\node_modules\#babel\core\lib\parser\index.js:52:34)
# multi ./node_modules/#pmmmwh/react-refresh-webpack-plugin/client/ReactRefreshEntry.js ./node_modules/#pmmmwh/react-refresh-webpack-plugin/client/ErrorOverlayEntry.js ./node_modules/#storybook/core-client/dist/esm/globals/polyfills.js ./node_modules/#storybook/core-client/dist/esm/globals/globals.js (webpack)-hot-middleware/client.js?reload=true&quiet=false&noInfo=undefined ./storybook-init-framework-entry.js ./node_modules/#storybook/addon-docs/dist/esm/frameworks/common/config.js-generated-config-entry.js ./node_modules/#storybook/addon-docs/dist/esm/frameworks/react/config.js-generated-config-entry.js ./node_modules/#storybook/react/dist/esm/client/preview/config-generated-config-entry.js ./node_modules/#storybook/addon-links/dist/esm/preset/addDecorator.js-generated-config-entry.js ./node_modules/#storybook/addon-backgrounds/dist/esm/preset/addDecorator.js-generated-config-entry.js ./node_modules/#storybook/addon-backgrounds/dist/esm/preset/addParameter.js-generated-config-entry.js ./node_modules/#storybook/addon-measure/dist/esm/preset/addDecorator.js-generated-config-entry.js ./node_modules/#storybook/addon-outline/dist/esm/preset/addDecorator.js-generated-config-entry.js ./node_modules/#storybook/addon-actions/dist/esm/preset/addDecorator.js-generated-config-entry.js ./node_modules/#storybook/addon-actions/dist/esm/preset/addArgs.js-generated-config-entry.js ./.storybook/preview.js-generated-config-entry.js ./generated-stories-entry.js main[16]
ERROR in ./node_modules/#storybook/addon-actions/dist/esm/preset/addArgs.js-generated-config-entry.js 8:118
Module parse failed: Unexpected token (8:118)
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
|
| /* eslint-disable import/no-unresolved */
> import { addDecorator, addParameters, addLoader, addArgsEnhancer, addArgTypesEnhancer, setGlobalRender } from 'D:/311's learning/learn-storybook-5/node_modules/#storybook/client-api';
| import { logger } from 'D:/311's learning/learn-storybook-5/node_modules/#storybook/client-logger';
| import * as config from 'D:/311's learning/learn-storybook-5/node_modules/#storybook/addon-actions/dist/esm/preset/addArgs.js';
# multi ./node_modules/#pmmmwh/react-refresh-webpack-plugin/client/ReactRefreshEntry.js ./node_modules/#pmmmwh/react-refresh-webpack-plugin/client/ErrorOverlayEntry.js ./node_modules/#storybook/core-client/dist/esm/globals/polyfills.js ./node_modules/#storybook/core-client/dist/esm/globals/globals.js (webpack)-hot-middleware/client.js?reload=true&quiet=false&noInfo=undefined ./storybook-init-framework-entry.js ./node_modules/#storybook/addon-docs/dist/esm/frameworks/common/config.js-generated-config-entry.js ./node_modules/#storybook/addon-docs/dist/esm/frameworks/react/config.js-generated-config-entry.js ./node_modules/#storybook/react/dist/esm/client/preview/config-generated-config-entry.js ./node_modules/#storybook/addon-links/dist/esm/preset/addDecorator.js-generated-config-entry.js ./node_modules/#storybook/addon-backgrounds/dist/esm/preset/addDecorator.js-generated-config-entry.js ./node_modules/#storybook/addon-backgrounds/dist/esm/preset/addParameter.js-generated-config-entry.js ./node_modules/#storybook/addon-measure/dist/esm/preset/addDecorator.js-generated-config-entry.js ./node_modules/#storybook/addon-outline/dist/esm/preset/addDecorator.js-generated-config-entry.js ./node_modules/#storybook/addon-actions/dist/esm/preset/addDecorator.js-generated-config-entry.js ./node_modules/#storybook/addon-actions/dist/esm/preset/addArgs.js-generated-config-entry.js ./.storybook/preview.js-generated-config-entry.js ./generated-stories-entry.js main[15]
Child HtmlWebpackCompiler:
Asset Size Chunks Chunk Names
__child-HtmlWebpackPlugin_0 6.28 KiB HtmlWebpackPlugin_0 HtmlWebpackPlugin_0
Entrypoint HtmlWebpackPlugin_0 = __child-HtmlWebpackPlugin_0
[./node_modules/html-webpack-plugin/lib/loader.js!./node_modules/#storybook/core-common/dist/cjs/templates/index.ejs] 2.03 KiB {HtmlWebpackPlugin_0}
[built]
ModuleBuildError: Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: D:\311's learning\learn-storybook-5\.storybook\preview.js-generated-config-entry.js: Missing semicolon. (8:118)
6 |
7 | /* eslint-disable import/no-unresolved */
> 8 | import { addDecorator, addParameters, addLoader, addArgsEnhancer, addArgTypesEnhancer, setGlobalRender } from 'D:/311's learning/learn-storybook-5/node_modules/#storybook/client-api';
| ^
9 | import { logger } from 'D:/311's learning/learn-storybook-5/node_modules/#storybook/client-logger';
10 | import * as config from 'D:/311's learning/learn-storybook-5/.storybook/preview.js';
11 | Object.keys(config).forEach(function (key) {
at Object._raise (D:\311's learning\learn-storybook-5\node_modules\#babel\parser\lib\index.js:541:17)
at Object.raiseWithData (D:\311's learning\learn-storybook-5\node_modules\#babel\parser\lib\index.js:534:17)
at Object.raise (D:\311's learning\learn-storybook-5\node_modules\#babel\parser\lib\index.js:495:17)
at Object.semicolon (D:\311's learning\learn-storybook-5\node_modules\#babel\parser\lib\index.js:3550:10)
at Object.parseImport (D:\311's learning\learn-storybook-5\node_modules\#babel\parser\lib\index.js:14831:10)
at Object.parseStatementContent (D:\311's learning\learn-storybook-5\node_modules\#babel\parser\lib\index.js:13454:27)
at Object.parseStatement (D:\311's learning\learn-storybook-5\node_modules\#babel\parser\lib\index.js:13352:17)
at Object.parseStatement (D:\311's learning\learn-storybook-5\node_modules\#babel\parser\lib\index.js:5307:24)
at Object.parseBlockOrModuleBlockBody (D:\311's learning\learn-storybook-5\node_modules\#babel\parser\lib\index.js:13941:25)
at Object.parseBlockBody (D:\311's learning\learn-storybook-5\node_modules\#babel\parser\lib\index.js:13932:10)
at Object.parseProgram (D:\311's learning\learn-storybook-5\node_modules\#babel\parser\lib\index.js:13272:10)
at Object.parseTopLevel (D:\311's learning\learn-storybook-5\node_modules\#babel\parser\lib\index.js:13263:25)
at Object.parseTopLevel (D:\311's learning\learn-storybook-5\node_modules\#babel\parser\lib\index.js:6273:28)
at Object.parse (D:\311's learning\learn-storybook-5\node_modules\#babel\parser\lib\index.js:15037:10)
at parse (D:\311's learning\learn-storybook-5\node_modules\#babel\parser\lib\index.js:15089:38)
at parser (D:\311's learning\learn-storybook-5\node_modules\#babel\core\lib\parser\index.js:52:34)
at D:\311's learning\learn-storybook-5\node_modules\webpack\lib\NormalModule.js:316:20
at D:\311's learning\learn-storybook-5\node_modules\loader-runner\lib\LoaderRunner.js:367:11
at D:\311's learning\learn-storybook-5\node_modules\loader-runner\lib\LoaderRunner.js:233:18
at context.callback (D:\311's learning\learn-storybook-5\node_modules\loader-runner\lib\LoaderRunner.js:111:13)
at D:\311's learning\learn-storybook-5\node_modules\babel-loader\lib\index.js:59:103
ModuleParseError: Module parse failed: Unexpected token (8:118)
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
|
| /* eslint-disable import/no-unresolved */
> import { addDecorator, addParameters, addLoader, addArgsEnhancer, addArgTypesEnhancer, setGlobalRender } from 'D:/311's learning/learn-storybook-5/node_modules/#storybook/client-api';
| import { logger } from 'D:/311's learning/learn-storybook-5/node_modules/#storybook/client-logger';
| import * as config from 'D:/311's learning/learn-storybook-5/node_modules/#storybook/addon-actions/dist/esm/preset/addArgs.js';
at handleParseError (D:\311's learning\learn-storybook-5\node_modules\webpack\lib\NormalModule.js:469:19)
at D:\311's learning\learn-storybook-5\node_modules\webpack\lib\NormalModule.js:503:5
at D:\311's learning\learn-storybook-5\node_modules\webpack\lib\NormalModule.js:358:12
at D:\311's learning\learn-storybook-5\node_modules\loader-runner\lib\LoaderRunner.js:373:3
at iterateNormalLoaders (D:\311's learning\learn-storybook-5\node_modules\loader-runner\lib\LoaderRunner.js:214:10)
at D:\311's learning\learn-storybook-5\node_modules\loader-runner\lib\LoaderRunner.js:205:4
at D:\311's learning\learn-storybook-5\node_modules\enhanced-resolve\lib\CachedInputFileSystem.js:85:15
at processTicksAndRejections (node:internal/process/task_queues:78:11)
WARN Broken build, fix the error above.
WARN You may need to refresh the browser.
I searched with possible keywords from the error on google and in-and-out stack-overflow links. I installed some addon in .storybook/main.js file. But nothing works. Below are my package.json file and two config file of storybook.
//package.json
{
"name": "learn-storybook-5",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^5.16.1",
"#testing-library/react": "^11.2.7",
"#testing-library/user-event": "^12.8.3",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-scripts": "^4.0.3",
"web-vitals": "^1.1.2"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"storybook": "start-storybook -p 6006 -s public",
"build-storybook": "build-storybook -s public"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
],
"overrides": [
{
"files": [
"**/*.stories.*"
],
"rules": {
"import/no-anonymous-default-export": "off"
}
}
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"#storybook/addon-actions": "^6.4.9",
"#storybook/addon-docs": "^6.4.9",
"#storybook/addon-essentials": "^6.4.9",
"#storybook/addon-links": "^6.4.9",
"#storybook/node-logger": "^6.4.9",
"#storybook/preset-create-react-app": "^3.2.0",
"#storybook/react": "^6.4.9"
}
}
//.storybook/main.js
module.exports = {
stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.#(js|jsx|ts|tsx)'],
addons: [
'#storybook/addon-links',
'#storybook/addon-essentials',
'#storybook/preset-create-react-app',
'#storybook/addon-actions',
'#storybook/node-logger',
'#storybook/addon-docs',
],
framework: '#storybook/react',
}
//.storybook/preview.js
export const parameters = {
actions: { argTypesRegex: '^on[A-Z].*' },
controls: {
matchers: {
color: /(background|color)$/i,
date: /Date$/,
},
},
}
It has been two days that I can't even boost up stroybook :))
I hope someone could guide me.
The problem was my folder name 3ll's learning.
The single quote from my folder name conflicts with paths used in Stroybook's modules. That's it. Admin from Storybook discord server pointed out that to me.
Related
I'm working on a web pack based project. I use npm runto check my interface.
Below is my package.json file content.
"scripts": {
"build": "webpack --config webpack.config.prod.js",
"start": "webpack --config webpack.config.dev.js"
},
"devDependencies": {
"clean-webpack-plugin": "^3.0.0",
"css-loader": "^5.0.1",
"html-webpack-plugin": "^4.5.0",
"mini-css-extract-plugin": "^1.3.1",
"raw-loader": "^0.5.1",
"sass": "^1.29.0",
"sass-loader": "^10.1.0",
"script-loader": "^0.7.2",
"style-loader": "^2.0.0",
"webpack": "^5.9.0",
"webpack-cli": "^4.2.0",
"webpack-dev-server": "^3.11.0",
"webpack-merge": "^5.4.0"
}
below is my webpack.config.dev.js file content.
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const { default: merge } = require("webpack-merge")
const superConfig = require('./webpack.config');
module.exports=merge(superConfig,{
devServer:{
port: 3000
},
devtool: false,
mode:'development',
plugins:[new MiniCssExtractPlugin({
filename: 'main.css'
})]
})
In here I have mentioned the port 3000 for npm run.
But
the terminal shows
(node:11002) [DEP_WEBPACK_COMPILATION_ASSETS] DeprecationWarning: Compilation.assets will be frozen in future, all modifications are deprecated.
BREAKING CHANGE: No more changes should happen to Compilation.assets after sealing the Compilation.
Do changes to assets earlier, e. g. in Compilation.hooks.processAssets.
Make sure to select an appropriate stage from Compilation.PROCESS_ASSETS_STAGE_*.
(Use `node --trace-deprecation ...` to show where the warning was created)
[webpack-cli] Compilation finished
assets by status 2.81 MiB [cached] 15 assets
assets by path . 1.28 MiB
asset main.css 751 KiB [compared for emit] (name: main)
asset main.bundle.js 542 KiB [compared for emit] (name: main)
asset index.html 14.4 KiB [compared for emit]
Entrypoint main 1.26 MiB (2.81 MiB) = main.css 751 KiB main.bundle.js 542 KiB 15 auxiliary assets
runtime modules 931 bytes 4 modules
cacheable modules 530 KiB
modules by path ./node_modules/ 529 KiB
modules by path ./node_modules/admin-lte/plugins/ 472 KiB 8 modules
2 modules
modules by path ./src/ 971 bytes
./src/index.js 465 bytes [built] [code generated]
./src/js/menu.js 456 bytes [built] [code generated]
./src/scss/style.scss 50 bytes [built] [code generated]
css modules 751 KiB
modules by path ./node_modules/admin-lte/plugins/ 77.5 KiB
css ./node_modules/css-loader/dist/cjs.js!./node_modules/admin-lte/plugins/fontawesome-free/css/all.min.css 58 KiB [code generated]
css ./node_modules/css-loader/dist/cjs.js!./node_modules/admin-lte/plugins/overlayScrollbars/css/OverlayScrollbars.min.css 19.5 KiB [code generated]
css ./node_modules/css-loader/dist/cjs.js!./node_modules/admin-lte/dist/css/adminlte.min.css 673 KiB [code generated]
css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/scss/style.scss 0 bytes [code generated]
webpack 5.9.0 compiled successfully in 5050 ms
and 3000 port doesn't support. But when I open the index.html file in the dist folder it opens very well without any issue.
OK, I got the answer. The solution is to change
"start": "webpack --config webpack.config.dev.js"
to
"start": "webpack serve --config webpack.config.dev.js"
in the package.json file.
My files show as being emitted but they are not actually being copied to dist folder.
Excerpt of compilation log:
Version: webpack 4.15.1 Time: 1824ms Built at: 01/29/2020 3:51:51 PM
Asset Size Chunks Chunk Names
main.js 116 KiB 0 [emitted] main
CSS/main.css 76 bytes [emitted] Images/Uplink_Logo_Horiz.jpg 651 KiB [emitted] [big]
CSS/adminlte.css 708 KiB [emitted] [big]
index.html 6.7 KiB [emitted]
And my webpack config plugin looks like this:
plugins: [
new CopyWebpackPlugin([
{
from: './Images/**',
to: path.join(__dirname, 'dist'),
logLevel: 'trace'
},
{
from: './CSS/**',
to: path.join(__dirname, 'dist'),
logLevel: 'trace'
}
]),
new HtmlWebpackPlugin({
template: './src/index.html'
})
],
I tried changing the order of CopyWebpackPlugin & HtmlWebpackPlugin to no luck. Did you do any other thing to solve this other than just changing the order.
Versions:
"vue": "^2.6.11", "webpack": "^4.15.0", "webpack-cli": "^3.0.8",
"copy-webpack-plugin": "^5.1.1", "html-webpack-plugin": "^3.2.0",
Updated Image:
Full project structure:
Found out the issue. The static files were not included in the VS project. Once I included them it started working. Thanks, for the help :)
Operating System: Mac OSX High Sierra
Node Version: v10.15.0
NPM Version: 6.13.6
webpack Version:
webpack-dev-server Version:
Browser: Chrome
my virtual server is http://lab.local this point to xampp/htdocs/lab
i have the project in xampp/htdocs/lab/vue/
when i tried to run npm run dev, this is my log
test-vue-project#1.0.0 dev /Applications/XAMPP/xamppfiles/htdocs/lab/vue/
cross-env NODE_ENV=development webpack-dev-server --open --hot
{ parser: "babylon" } is deprecated; we now treat it as { parser: "babel" }.
Hash: 263046f8f5530a383160
Version: webpack 3.12.0
Time: 2140ms
Asset Size Chunks Chunk Names
build.js 1.9 MB 0 [emitted] [big] main
[1] (webpack)/hot/log.js 1.04 kB {0} [built]
[4] (webpack)/hot/emitter.js 77 bytes {0} [built]
[5] ./node_modules/vue/dist/vue.esm.js 326 kB {0} [built]
[9] multi (webpack)-dev-server/client?http://lab.local:80 webpack/hot/dev-server ./src/main.js 52 bytes {0} [built]
[10] (webpack)-dev-server/client?http://lab.local:80 7.93 kB {0} [built]
[11] ./node_modules/url/url.js 23.3 kB {0} [built]
[18] ./node_modules/strip-ansi/index.js 161 bytes {0} [built]
[20] ./node_modules/loglevel/lib/loglevel.js 8.56 kB {0} [built]
[21] (webpack)-dev-server/client/socket.js 1.08 kB {0} [built]
[23] (webpack)-dev-server/client/overlay.js 3.67 kB {0} [built]
[28] (webpack)/hot nonrecursive ^./log$ 170 bytes {0} [built]
[30] (webpack)/hot/dev-server.js 1.61 kB {0} [built]
[31] (webpack)/hot/log-apply-result.js 1.31 kB {0} [built]
[32] ./src/main.js 134 bytes {0} [built]
[35] ./src/App.vue 1.81 kB {0} [built]
+ 27 hidden modules
webpack: Compiled successfully.
events.js:167
throw er; // Unhandled 'error' event
^
Error: listen EACCES: permission denied 127.0.0.1:80
at Server.setupListenHandle [as _listen2] (net.js:1273:19)
at listenInCluster (net.js:1338:12)
at GetAddrInfoReqWrap.doListen [as callback] (net.js:1471:7)
at GetAddrInfoReqWrap.onlookup [as oncomplete] (dns.js:62:10)
Emitted 'error' event at:
at emitErrorNT (net.js:1317:8)
at process._tickCallback (internal/process/next_tick.js:63:19)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! test-vue-project#1.0.0 dev: cross-env NODE_ENV=development webpack-dev-server --open --hot
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the test-vue-project#1.0.0 dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
My-iMac:lesson22 my-user $ npm run dev
i have this in webpack.config.js
devServer: {
contentBase: 'dist',
host: 'lab.local',
port: 80,
overlay:{
warnings: true,
errors: true
},
proxy: {
'/vue': {
target: 'http://lab.local',
pathRewrite: {'^/vue/' : ''}
}
},
},
any help ?
how i can configure webpack in my localhost (virtual server http://lab.local) for work ?
i want execute npm run build and npm run dev and this allow to browser show http://lab.local/vue/ optional (port: 8080)
Open /Applications/XAMPP/xamppfiles/etc/httpd.conf file in any editor and look for the following lines.
# Virtual hosts
# Include /Applications/XAMPP/etc/extra/httpd-vhosts.conf
Remove # from second line to enable virtual host
Open /Applications/XAMPP/xamppfiles/etc/extra/httpd-vhosts.conf file, remove everything and write below code.
<VirtualHost *:8080>
ServerName myweb.site
ServerAlias myweb.site
<Location />
ProxyPass "/" "http://localhost:3000/"
ProxyPassReverse "/" "http://localhost:3000/"
</Location>
</VirtualHost>
Open /etc/hosts and add 127.0.0.1 myweb.site to bottom
Restart Apache Server from XAMPP Control Panel
myweb.site should be same in both file, this will be your URL for your Vue app and http://localhost:3000 is your app url, port should be same with port of your development server
Open any browser and enter http://localhost:8080 or http://myweb.site
I am experimenting with webpack and wanted to use, among others, the bootstrap4 and font-awesome. All modules are recognized except these two.
The package.json created after npm install <module>:
{
"name": "blog",
"version": "1.0.0",
"description": "my site",
"main": "index.html",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"devDependencies": {
"babel-core": "^6.25.0",
"babel-loader": "^7.0.0",
"bootstrap4": "0.0.1-security",
"css-loader": "^0.28.4",
"font-awesome": "^4.7.0",
"less": "^2.7.2",
"less-loader": "^4.0.4",
"lodash": "^4.17.4",
"moment": "^2.18.1",
"style-loader": "^0.18.2",
"vue": "^2.3.4"
}
}
The webpack.config.js file I use:
const path = require('path');
module.exports = {
entry: path.join(__dirname, 'entry.js'),
output: {
path: path.join(__dirname, 'src'),
filename: 'build.js'
},
module: {
rules: [{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/
},
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
},
{
test: /\.less$/,
use: ['style-loader', 'css-loader', 'less-loader']
}
]
}
}
Running webpack generates errors for bootstrap4 and font-awesome:
D:\Dropbox\dev\jekyll\blog\webpack>webpack
Hash: 2501a45f8eacb5b3fdac
Version: webpack 2.7.0
Time: 3028ms
Asset Size Chunks Chunk Names
build.js 1.24 MB 0 [emitted] [big] main
[0] ./~/moment/moment.js 129 kB {0} [built]
[14] ./~/moment/locale/bo.js 3.47 kB {0} [optional] [built]
[117] ./~/style-loader/lib/addStyles.js 8.7 kB {0} [built]
[118] (webpack)/buildin/global.js 509 bytes {0} [built]
[119] (webpack)/buildin/module.js 517 bytes {0} [built]
[120] ./js/explorer.js 1.35 kB {0} [built]
[121] ./~/lodash/lodash.js 540 kB {0} [built]
[122] ./less/navbar.less 1.13 kB {0} [built]
[123] ./less/style.less 1.12 kB {0} [built]
[124] ./~/vue/dist/vue.runtime.esm.js 195 kB {0} [built]
[125] ./entry.js 572 bytes {0} [built]
[126] ./~/css-loader!./~/less-loader/dist/cjs.js!./less/navbar.less 2.8 kB {0} [built]
[127] ./~/css-loader!./~/less-loader/dist/cjs.js!./less/style.less 7.67 kB {0} [built]
[128] ./~/moment/locale ^\.\/.*$ 2.79 kB {0} [optional] [built]
[129] ./~/process/browser.js 5.42 kB {0} [built]
+ 116 hidden modules
ERROR in ./entry.js
Module not found: Error: Can't resolve 'font-awesome' in 'D:\Dropbox\dev\jekyll\blog\webpack'
# ./entry.js 16:0-39
ERROR in ./entry.js
Module not found: Error: Can't resolve 'bootstrap4' in 'D:\Dropbox\dev\jekyll\blog\webpack'
# ./entry.js 15:0-36
The referenced entry.js:
import Vue from 'vue'
import bootstrap4 from 'bootstrap4'
import fontawesome from 'font-awesome'
import _ from 'lodash'
import moment from 'moment'
require('./less/style.less')
require('./less/navbar.less')
//require('./js/posts.js')
require('./js/explorer.js')
console.log('hello')
Why are these two modules a problem?
The complete error log from webpack, for completeness:
D:\Dropbox\dev\jekyll\blog\webpack>webpack --display-error-details
Hash: 2501a45f8eacb5b3fdac
Version: webpack 2.7.0
Time: 2952ms
Asset Size Chunks Chunk Names
build.js 1.24 MB 0 [emitted] [big] main
[0] ./~/moment/moment.js 129 kB {0} [built]
[14] ./~/moment/locale/bo.js 3.47 kB {0} [optional] [built]
[117] ./~/style-loader/lib/addStyles.js 8.7 kB {0} [built]
[118] (webpack)/buildin/global.js 509 bytes {0} [built]
[119] (webpack)/buildin/module.js 517 bytes {0} [built]
[120] ./js/explorer.js 1.35 kB {0} [built]
[121] ./~/lodash/lodash.js 540 kB {0} [built]
[122] ./less/navbar.less 1.13 kB {0} [built]
[123] ./less/style.less 1.12 kB {0} [built]
[124] ./~/vue/dist/vue.runtime.esm.js 195 kB {0} [built]
[125] ./entry.js 572 bytes {0} [built]
[126] ./~/css-loader!./~/less-loader/dist/cjs.js!./less/navbar.less 2.8 kB {0} [built]
[127] ./~/css-loader!./~/less-loader/dist/cjs.js!./less/style.less 7.67 kB {0} [built]
[128] ./~/moment/locale ^\.\/.*$ 2.79 kB {0} [optional] [built]
[129] ./~/process/browser.js 5.42 kB {0} [built]
+ 116 hidden modules
ERROR in ./entry.js
Module not found: Error: Can't resolve 'font-awesome' in 'D:\Dropbox\dev\jekyll\blog\webpack'
resolve 'font-awesome' in 'D:\Dropbox\dev\jekyll\blog\webpack'
Parsed request is a module
using description file: D:\Dropbox\dev\jekyll\blog\webpack\package.json (relative path: .)
Field 'browser' doesn't contain a valid alias configuration
after using description file: D:\Dropbox\dev\jekyll\blog\webpack\package.json (relative path: .)
resolve as module
D:\Dropbox\dev\jekyll\blog\node_modules doesn't exist or is not a directory
D:\Dropbox\dev\jekyll\node_modules doesn't exist or is not a directory
D:\Dropbox\dev\node_modules doesn't exist or is not a directory
D:\Dropbox\node_modules doesn't exist or is not a directory
D:\node_modules doesn't exist or is not a directory
looking for modules in D:\Dropbox\dev\jekyll\blog\webpack\node_modules
using description file: D:\Dropbox\dev\jekyll\blog\webpack\package.json (relative path: ./node_modules)
Field 'browser' doesn't contain a valid alias configuration
after using description file: D:\Dropbox\dev\jekyll\blog\webpack\package.json (relative path: ./node_modules)
using description file: D:\Dropbox\dev\jekyll\blog\webpack\node_modules\font-awesome\package.json (relative path: .)
no extension
Field 'browser' doesn't contain a valid alias configuration
D:\Dropbox\dev\jekyll\blog\webpack\node_modules\font-awesome is not a file
.js
Field 'browser' doesn't contain a valid alias configuration
D:\Dropbox\dev\jekyll\blog\webpack\node_modules\font-awesome.js doesn't exist
.json
Field 'browser' doesn't contain a valid alias configuration
D:\Dropbox\dev\jekyll\blog\webpack\node_modules\font-awesome.json doesn't exist
as directory
existing directory
using path: D:\Dropbox\dev\jekyll\blog\webpack\node_modules\font-awesome\index
using description file: D:\Dropbox\dev\jekyll\blog\webpack\node_modules\font-awesome\package.json (relative path: ./index)
no extension
Field 'browser' doesn't contain a valid alias configuration
D:\Dropbox\dev\jekyll\blog\webpack\node_modules\font-awesome\index doesn't exist
.js
Field 'browser' doesn't contain a valid alias configuration
D:\Dropbox\dev\jekyll\blog\webpack\node_modules\font-awesome\index.js doesn't exist
.json
Field 'browser' doesn't contain a valid alias configuration
D:\Dropbox\dev\jekyll\blog\webpack\node_modules\font-awesome\index.json doesn't exist
[D:\Dropbox\dev\jekyll\blog\node_modules]
[D:\Dropbox\dev\jekyll\node_modules]
[D:\Dropbox\dev\node_modules]
[D:\Dropbox\node_modules]
[D:\node_modules]
[D:\Dropbox\dev\jekyll\blog\webpack\node_modules\font-awesome]
[D:\Dropbox\dev\jekyll\blog\webpack\node_modules\font-awesome.js]
[D:\Dropbox\dev\jekyll\blog\webpack\node_modules\font-awesome.json]
[D:\Dropbox\dev\jekyll\blog\webpack\node_modules\font-awesome\index]
[D:\Dropbox\dev\jekyll\blog\webpack\node_modules\font-awesome\index.js]
[D:\Dropbox\dev\jekyll\blog\webpack\node_modules\font-awesome\index.json]
# ./entry.js 16:0-39
ERROR in ./entry.js
Module not found: Error: Can't resolve 'bootstrap4' in 'D:\Dropbox\dev\jekyll\blog\webpack'
resolve 'bootstrap4' in 'D:\Dropbox\dev\jekyll\blog\webpack'
Parsed request is a module
using description file: D:\Dropbox\dev\jekyll\blog\webpack\package.json (relative path: .)
Field 'browser' doesn't contain a valid alias configuration
after using description file: D:\Dropbox\dev\jekyll\blog\webpack\package.json (relative path: .)
resolve as module
D:\Dropbox\dev\jekyll\blog\node_modules doesn't exist or is not a directory
D:\Dropbox\dev\jekyll\node_modules doesn't exist or is not a directory
D:\Dropbox\dev\node_modules doesn't exist or is not a directory
D:\Dropbox\node_modules doesn't exist or is not a directory
D:\node_modules doesn't exist or is not a directory
looking for modules in D:\Dropbox\dev\jekyll\blog\webpack\node_modules
using description file: D:\Dropbox\dev\jekyll\blog\webpack\package.json (relative path: ./node_modules)
Field 'browser' doesn't contain a valid alias configuration
after using description file: D:\Dropbox\dev\jekyll\blog\webpack\package.json (relative path: ./node_modules)
using description file: D:\Dropbox\dev\jekyll\blog\webpack\node_modules\bootstrap4\package.json (relative path: .)
no extension
Field 'browser' doesn't contain a valid alias configuration
D:\Dropbox\dev\jekyll\blog\webpack\node_modules\bootstrap4 is not a file
.js
Field 'browser' doesn't contain a valid alias configuration
D:\Dropbox\dev\jekyll\blog\webpack\node_modules\bootstrap4.js doesn't exist
.json
Field 'browser' doesn't contain a valid alias configuration
D:\Dropbox\dev\jekyll\blog\webpack\node_modules\bootstrap4.json doesn't exist
as directory
existing directory
use ./index.js from main in package.json
using description file: D:\Dropbox\dev\jekyll\blog\webpack\node_modules\bootstrap4\package.json (relative path: .)
Field 'browser' doesn't contain a valid alias configuration
after using description file: D:\Dropbox\dev\jekyll\blog\webpack\node_modules\bootstrap4\package.json (relative path: .)
using description file: D:\Dropbox\dev\jekyll\blog\webpack\node_modules\bootstrap4\package.json (relative path: ./index.js)
no extension
Field 'browser' doesn't contain a valid alias configuration
D:\Dropbox\dev\jekyll\blog\webpack\node_modules\bootstrap4\index.js doesn't exist
.js
Field 'browser' doesn't contain a valid alias configuration
D:\Dropbox\dev\jekyll\blog\webpack\node_modules\bootstrap4\index.js.js doesn't exist
.json
Field 'browser' doesn't contain a valid alias configuration
D:\Dropbox\dev\jekyll\blog\webpack\node_modules\bootstrap4\index.js.json doesn't exist
as directory
D:\Dropbox\dev\jekyll\blog\webpack\node_modules\bootstrap4\index.js doesn't exist
using path: D:\Dropbox\dev\jekyll\blog\webpack\node_modules\bootstrap4\index
using description file: D:\Dropbox\dev\jekyll\blog\webpack\node_modules\bootstrap4\package.json (relative path: ./index)
no extension
Field 'browser' doesn't contain a valid alias configuration
D:\Dropbox\dev\jekyll\blog\webpack\node_modules\bootstrap4\index doesn't exist
.js
Field 'browser' doesn't contain a valid alias configuration
D:\Dropbox\dev\jekyll\blog\webpack\node_modules\bootstrap4\index.js doesn't exist
.json
Field 'browser' doesn't contain a valid alias configuration
D:\Dropbox\dev\jekyll\blog\webpack\node_modules\bootstrap4\index.json doesn't exist
[D:\Dropbox\dev\jekyll\blog\node_modules]
[D:\Dropbox\dev\jekyll\node_modules]
[D:\Dropbox\dev\node_modules]
[D:\Dropbox\node_modules]
[D:\node_modules]
[D:\Dropbox\dev\jekyll\blog\webpack\node_modules\bootstrap4]
[D:\Dropbox\dev\jekyll\blog\webpack\node_modules\bootstrap4.js]
[D:\Dropbox\dev\jekyll\blog\webpack\node_modules\bootstrap4.json]
[D:\Dropbox\dev\jekyll\blog\webpack\node_modules\bootstrap4\index.js]
[D:\Dropbox\dev\jekyll\blog\webpack\node_modules\bootstrap4\index.js.js]
[D:\Dropbox\dev\jekyll\blog\webpack\node_modules\bootstrap4\index.js.json]
[D:\Dropbox\dev\jekyll\blog\webpack\node_modules\bootstrap4\index.js]
[D:\Dropbox\dev\jekyll\blog\webpack\node_modules\bootstrap4\index]
[D:\Dropbox\dev\jekyll\blog\webpack\node_modules\bootstrap4\index.js]
[D:\Dropbox\dev\jekyll\blog\webpack\node_modules\bootstrap4\index.json]
# ./entry.js 15:0-36
font-awesome does not have any fields in package.json that are recognised by webpack and there is also no index.js in the package, therefore it can't be imported as usual. Presumably you want to use the CSS file, so you could import it like this.
import 'font-awesome/css/font-awesome.css';
bootstrap4 is not a real package. From the npm registry - bootstrap4:
Security holding package
This package name is not currently in use, but was formerly occupied by another package. To avoid malicious use, npm is hanging on to the package name, but loosely, and we'll probably give it to you if you want it.
You may adopt this package by contacting support#npmjs.com and requesting the name.
You need the actual boostrap package. The stable version is currently 3.3.7, but the v4 alpha is available on npm. You can install it with:
npm install --save bootstrap#next
You can indeed make font-awesome work nicely with webpack. Add the element "style" to resolve.mainFields:
module.exports = {
...
resolve: {
...
mainFields: ["browser", "module", "main", "style"]
...
}
...
}
The first three values come from the docs, and the last one comes from the font-awesome package.json field:
{
...
"style": "css/font-awesome.css",
...
}
Now webpack knows where font-awesome keeps its CSS! Do keep in mind that webpack will set a default value for resolve.mainFields based on the webpack config field target; This change negates this behavior, so you'll have to read the docs for the correct resolve.mainField values.
I'm using vue-cli with webpack template, and when I split templates file in different files, and run npm run unit or yarn run unit, I get this error:
$ yarn run unit
yarn run v0.21.3
$ cross-env BABEL_ENV=test karma start test/unit/karma.conf.js --single-run
Hash: a52075458d6736c6b5a6
Version: webpack 2.4.1
Time: 2543ms
Asset Size Chunks Chunk Names
index.js 1.05 MB 0 [emitted] [big] index.js
chunk {0} index.js (index.js) 396 kB [entry] [rendered]
[0] ./src/components/Hello.vue 1.63 kB {0} [built]
[1] ./~/vue/dist/vue.esm.js 247 kB {0} [built]
[2] ./src/router/index.js 1.51 kB {0} [optional] [built]
[4] ./src/assets/logo.png 9.17 kB {0} [built]
[5] ./src/App.vue 1.56 kB {0} [optional] [built]
[8] (webpack)/buildin/global.js 509 bytes {0} [built]
[9] ./src ^\.\/(?!main(\.js)?$) 324 bytes {0} [built]
[10] ./test/unit/specs \.spec$ 177 bytes {0} [built]
[11] ./test/unit/index.js 452 bytes {0} [built]
[12] ./test/unit/specs/Hello.spec.js 573 bytes {0} [optional] [built]
[13] ./~/babel-loader/lib!./~/vue-loader/lib/selector.js?type=script&index=0!./src/App.vue 1.39 kB {0} [built]
[14] ./~/babel-loader/lib!./~/vue-loader/lib/selector.js?type=script&index=0!./src/components/Hello.vue 1.79 kB {0} [built]
[24] ./~/vue-style-loader!./~/css-loader?{"minimize":false,"sourceMap":false}!./~/vue-loader/lib/style-compiler?{"id":"data-v-01ff506a","scoped":true,"hasInlineConfig":false}!./~/vue-loader/lib/selector.js?type=styles&index=0!./src/components/Hello.vue 1.66 kB {0} [built]
[25] ./~/vue-style-loader!./~/css-loader?{"minimize":false,"sourceMap":false}!./~/vue-loader/lib/style-compiler?{"id":"data-v-bef6f4c0","scoped":false,"hasInlineConfig":false}!./~/vue-loader/lib/selector.js?type=styles&index=0!./src/App.vue 1.62 kB {0} [built]
[27] ./src/components/Hello.pug 239 bytes {0} [optional] [built] [failed] [1 error]
+ 13 hidden modules
WARNING in ./src/components/Hello.pug Module parse failed:
/home/jmanuelrosa/Developer/test-vue/src/components/Hello.pug
Unexpected token (1:0) You may need an appropriate loader to handle
this file type. | .hello | h1 {{ msg }} | h2 Essential Links #
./src ^./(?!main(.js)?$) # ./test/unit/index.js
I try it with the basic Hello example, and I get the same error. This is my component with pug template (I have pug installed too):
<template lang='pug' src='./Hello.pug'></template>
<script>
export default {
name: 'hello',
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
font-weight: normal;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>
And pug template:
.hello
h1 {{ msg }}
h2 Essential Links
ul
li
a(href='https://vuejs.org', target='_blank') Core Docs
li
a(href='https://forum.vuejs.org', target='_blank') Forum
li
a(href='https://gitter.im/vuejs/vue', target='_blank') Gitter Chat
li
a(href='https://twitter.com/vuejs', target='_blank') Twitter
br
li
a(href='http://vuejs-templates.github.io/webpack/', target='_blank') Docs for This Template
h2 Ecosystem
ul
li
a(href='http://router.vuejs.org/', target='_blank') vue-router
li
a(href='http://vuex.vuejs.org/', target='_blank') vuex
li
a(href='http://vue-loader.vuejs.org/', target='_blank') vue-loader
li
a(href='https://github.com/vuejs/awesome-vue', target='_blank') awesome-vue
This issue it's related with #531
In this issue, the user say that solution is change extension, and use tpp.html, but, what is the difference with dev or environment? I'll need to install another plugin for karma?
Thanks !
I solve it adding more loaders :D
module: {
rules: [
{
test: /\.pug/,
use: [
'html-loader',
'pug-loader?sourceMap'
]
},
{
test: /\.css$/,
use: [
'style-loader',
{
loader: 'css-loader',
options: {
importLoaders: 1
}
},
'postcss-loader'
]
}
}