I am starting to learn ReactJS. I have node installed on my computer. I am writing a basic "Hello World" Programming to see if my setup is alright.
The package.json file is:
{
"name": "part1",
"version": "1.0.0",
"description": "",
"main": "index.js",
"type": "module",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"react": "^16.13.1",
"react-dom": "^16.13.1"
}
}
The Javascript and HTML files are as follows-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Part1</title>
<link href="style.css" rel="stylesheet">
</head>
<body>
<div id="root">
</div>
<script src="index.js" ></script>
</body>
</html>
Javascript
import React from "react";
import ReactDOM from "react-dom";
ReactDOM.render(<h1>"Hello world"</h1>,document.getElementById("root"));
However when i run this on the html file on the browser I get an error in the console as:
Uncaught SyntaxError: Cannot use import statement outside a module
and no output is displayed.
I am using VSCode and when i run the script using inbuilt run, i get an error that states that To run ES add type:module in package.json which i understand since the inbuilt run probably runs on node but why is this issue there on the browser and live server also?
Is this a setup issue or a semantic issue or any other technical issue. How do I resolve this?
When I am running using npm start the following is the error log-
0 info it worked if it ends with ok
1 verbose cli [ '/usr/local/bin/node', '/usr/local/bin/npm', 'start' ]
2 info using npm#6.14.6
3 info using node#v12.18.3
4 verbose stack Error: missing script: start
4 verbose stack at run (/usr/local/lib/node_modules/npm/lib/run-script.js:155:19)
4 verbose stack at /usr/local/lib/node_modules/npm/lib/run-script.js:63:5
4 verbose stack at /usr/local/lib/node_modules/npm/node_modules/read-package-json/read-json.js:116:5
4 verbose stack at /usr/local/lib/node_modules/npm/node_modules/read-package-json/read-json.js:436:5
4 verbose stack at checkBinReferences_ (/usr/local/lib/node_modules/npm/node_modules/read-package-json/read-json.js:391:45)
4 verbose stack at final (/usr/local/lib/node_modules/npm/node_modules/read-package-json/read-json.js:434:3)
4 verbose stack at then (/usr/local/lib/node_modules/npm/node_modules/read-package-json/read-json.js:161:5)
4 verbose stack at ReadFileContext.<anonymous> (/usr/local/lib/node_modules/npm/node_modules/read-package-json/read-json.js:350:20)
4 verbose stack at ReadFileContext.callback (/usr/local/lib/node_modules/npm/node_modules/graceful-fs/graceful-fs.js:123:16)
4 verbose stack at FSReqCallback.readFileAfterOpen [as oncomplete] (fs.js:261:13)
5 verbose cwd /Users/pk/Desktop/Learning-react/part1
6 verbose Darwin 19.3.0
7 verbose argv "/usr/local/bin/node" "/usr/local/bin/npm" "start"
8 verbose node v12.18.3
9 verbose npm v6.14.6
10 error missing script: start
11 verbose exit [ 1, true ]
Ciao, try to change your index.html file like this:
<div id="root"></div>
And everything should work.
Check this example.
Related
Following the tutorial Tutorial Create an Excel Addin.
Have completed and tested the first section of the tutorial using the command line.
Trying to use the debugger in vscode to run and debug taskpane.js using Excel Desktop(Edge Legacy).
It fails with below debug error which in short is missing script: start:desktop -- --app excel
This was a closed issue for vscode 1.53.0 Issue 115876. Reading this however I am unsure how to update launch.json to resolve it.
I am using VSCODE 1.64.1
This is my config for Excel Desktop (Edge Legacy)
{
"name": "Excel Desktop (Edge Legacy)",
"type": "office-addin",
"request": "attach",
"url": "https://localhost:3000/taskpane.html?_host_Info=Excel$Win32$16.01$en-US$$$$0",
"port": 9222,
"timeout": 600000,
"webRoot": "${workspaceRoot}",
"preLaunchTask": "Debug: Excel Desktop",
"postDebugTask": "Stop Debug"
},
Debug Output
0 info it worked if it ends with ok
1 verbose cli [
1 verbose cli 'C:\\Program Files\\nodejs\\node.exe',
1 verbose cli 'C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js',
1 verbose cli 'run',
1 verbose cli 'start:desktop -- --app excel'
1 verbose cli ]
2 info using npm#6.14.13
3 info using node#v14.17.3
4 verbose stack Error: missing script: start:desktop -- --app excel
4 verbose stack at run (C:\Program Files\nodejs\node_modules\npm\lib\run-script.js:155:19)
4 verbose stack at C:\Program Files\nodejs\node_modules\npm\lib\run-script.js:63:5
4 verbose stack at C:\Program Files\nodejs\node_modules\npm\node_modules\read-package-json\read-json.js:116:5
4 verbose stack at C:\Program Files\nodejs\node_modules\npm\node_modules\read-package-json\read-json.js:436:5
4 verbose stack at checkBinReferences_ (C:\Program Files\nodejs\node_modules\npm\node_modules\read-package-json\read-json.js:391:45)
4 verbose stack at final (C:\Program Files\nodejs\node_modules\npm\node_modules\read-package-json\read-json.js:434:3)
4 verbose stack at then (C:\Program Files\nodejs\node_modules\npm\node_modules\read-package-json\read-json.js:161:5)
4 verbose stack at ReadFileContext.<anonymous> (C:\Program Files\nodejs\node_modules\npm\node_modules\read-package-json\read-json.js:350:20)
4 verbose stack at ReadFileContext.callback (C:\Program Files\nodejs\node_modules\npm\node_modules\graceful-fs\graceful-fs.js:123:16)
4 verbose stack at FSReqCallback.readFileAfterOpen [as oncomplete] (fs.js:282:13)
5 verbose cwd C:\Users\PC_User\office_projects\My Office Add-in
6 verbose Windows_NT 10.0.19044
7 verbose argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "run" "start:desktop -- --app excel"
8 verbose node v14.17.3
9 verbose npm v6.14.13
10 error missing script: start:desktop -- --app excel
11 verbose exit [ 1, true ]
Edit
Package.json
{
"name": "office-addin-taskpane-js",
"version": "0.0.1",
"repository": {
"type": "git",
"url": "https://github.com/OfficeDev/Office-Addin-TaskPane-JS.git"
},
"license": "MIT",
"config": {
"app_to_debug": "excel",
"app_type_to_debug": "desktop",
"dev_server_port": 3000
},
"scripts": {
"build": "webpack --mode production",
"build:dev": "webpack --mode development",
"dev-server": "webpack serve --mode development",
"lint": "office-addin-lint check",
"lint:fix": "office-addin-lint fix",
"prettier": "office-addin-lint prettier",
"start": "office-addin-debugging start manifest.xml",
"start:desktop": "office-addin-debugging start manifest.xml desktop",
"start:web": "office-addin-debugging start manifest.xml web",
"stop": "office-addin-debugging stop manifest.xml",
"validate": "office-addin-manifest validate manifest.xml",
"watch": "webpack --mode development --watch"
},
"dependencies": {
"core-js": "^3.9.1",
"regenerator-runtime": "^0.13.7"
},
"devDependencies": {
"#babel/core": "^7.13.10",
"#babel/preset-env": "^7.12.11",
"#babel/preset-typescript": "^7.13.0",
"#types/office-js": "^1.0.180",
"#types/office-runtime": "^1.0.17",
"acorn": "^8.5.0",
"babel-loader": "^8.2.2",
"copy-webpack-plugin": "^9.0.1",
"eslint-plugin-office-addins": "^2.0.0",
"file-loader": "^6.2.0",
"html-loader": "^2.1.2",
"html-webpack-plugin": "^5.3.2",
"office-addin-cli": "^1.3.5",
"office-addin-debugging": "^4.3.8",
"office-addin-dev-certs": "^1.7.7",
"office-addin-lint": "^2.0.0",
"office-addin-manifest": "^1.7.7",
"office-addin-prettier-config": "^1.1.4",
"os-browserify": "^0.3.0",
"process": "^0.11.10",
"source-map-loader": "^3.0.0",
"ts-loader": "^9.2.5",
"typescript": "^4.3.5",
"webpack": "^5.50.0",
"webpack-cli": "^4.8.0",
"webpack-dev-server": "4.7.3"
},
"prettier": "office-addin-prettier-config",
"browserslist": [
"ie 11"
]
}
I've just tried to create a new Excel add-in according to your description and run it under the debugger. Everything went well without issues. But I've used the Edge (Chromium) option in the launch section.
It seems the package.json file doesn't contain a corresponding command in the scripts section, the following error message clearly states about that:
4 verbose stack Error: missing script: start:desktop -- --app excel
I'd suggest generating a new add-in project using yeoman generator and checking the scripts section there. Don't forget to update the yeoman itself.
For example, in Outlook add-ins I see the following command in the scripts section:
"start:desktop": "office-addin-debugging start manifest.xml desktop",
In the OP, you have added the config for launch.json but haven't mentioned anything about tasks.json. The preLaunchTask & postDebugTask in your config is looking for config in tasks.json which should look something like below.
Based on the debug output you added, this is the most likely issue, since this is where you need the script start:desktop -- --app excel
{
"label": "Debug: Excel Desktop",
"type": "npm",
"script": "start:desktop -- --app excel",
"presentation": {
"clear": true,
"panel": "dedicated",
},
{
"label": "Stop Debug",
"type": "npm",
"script": "stop",
"presentation": {
"clear": true,
"panel": "shared",
"showReuseMessage": false
},
"problemMatcher": []
},
Alternative reference from OLD version
Found a related GitHub issue which mentions you can use below code. This is a older discussion though.
They also point to a template GitHub Repository for Office-Addin-TaskPane by Microsoft which has the launch.json
{
"name": "Excel Desktop",
"type": "node",
"request": "launch",
"runtimeExecutable": "npm",
"runtimeArgs": ["run", "start", "desktop"],
"args": ["--", "--app", "excel"]
},
I want to get the simplest version of a vuejs Hello World using individual files. I am setting up the project like so: create index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="./src/main.js"></script>
</body>
</html>
create create ./src/main.js:
import { createApp } from 'vue'
import App from './App.vue'
const app = createApp(App)
app.mount("#app")
create ./src/App.vue:
<template>
Hello World
</template>
Run npm init --yes in terminal followed by npm install vue#latest, so package.json:
{
"name": "vueintro",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"vue": "^3.2.31"
}
}
Going to http://localhost, I get a blank page with inspect/console giving the error: Uncaught TypeError: Error resolving module specifier “vue”. Relative module specifiers must start with “./”, “../” or “/”.. I have tried importing ../node_modules/vue and using importmap but they all just throw errors.
That won't work in the browser, since it expects a URL to a file to be able to import a module. You need to either use a bundler/build tool of some kind, I recommend https://vitejs.dev/
Alternatively you can use https://vuejs.org/guide/quick-start.html#without-build-tools , make sure to map to exact file vue.esm-browser.js not just vue
I tried removing spaces in command as suggested in this post. I also tried to reencode mochawesome.json as suggested in this post. But non worked.
You can find my json files here on gdrive.
When I try to merge them, I get following error:
npx mochawesome-merge cypress/reports/test/test/*.json>cypress/reports/test/test/merged_report.json
Debugger attached.
Debugger attached.
ERROR: Failed to merge reports
SyntaxError: cypress/reports/test/test/merged_report.json: Unexpected end of JSON input
at JSON.parse (<anonymous>)
at F:\myproj-testing\node_modules\mochawesome-merge\node_modules\jsonfile\index.js:33:18
at F:\myproj-testing\node_modules\graceful-fs\graceful-fs.js:123:16
at FSReqCallback.readFileAfterClose [as oncomplete] (internal/fs/read_file_context.js:63:3)
Waiting for the debugger to disconnect...
Waiting for the debugger to disconnect...
I am on Windows 10. Following are node related version:
>node --version
v14.16.0
> npm --version
Debugger attached.
6.14.11
package.json
{
"name": "myproj-testing",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"merge":"mochawesome-merge cypress/reports/*.json>cypress/reports/merged_report.json",
"generate_mochawesome_report": "marge cypress/reports/merged_report.json --reportDir ./ --inline",
"final_report": "npm run merge && npm run generate_mochawesome_report",
"generate_report": "python cypress/utils/merge.py && npm run generate_mochawesome_report"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"cypress": "^8.3.0",
"cypress-file-upload": "^5.0.8"
},
"devDependencies": {
"mocha": "^9.1.1",
"mochawesome": "^6.2.2",
"mochawesome-merge": "^4.2.0"
}
}
Update
I tried running just mochawesome-merge cypress/reports/*.json and it printed the merged json on the console. So I tried to first pipe merged json string to .txt file, then renaming .txt file to .json file and finally doing marge. Strangely it started working... So these are my updated package.json scripts:
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"merge":"mochawesome-merge cypress/reports/*.json>cypress/reports/merged_report.json",
"mergetotxt":"mochawesome-merge cypress/reports/*.json > cypress/reports/merged_report.txt",
"generate_mochawesome_report": "marge cypress/reports/merged_report.json --reportDir ./ --inline",
"final_report": "npm run merge && npm run generate_mochawesome_report",
"final_report2": "npm run mergetotxt && rename cypress\\reports\\merged_report.txt merged_report.json && npm run generate_mochawesome_report",
"generate_report": "python cypress/utils/merge.py && npm run generate_mochawesome_report"
}
Notice following two new scripts:
"mergetotxt":"mochawesome-merge cypress/reports/*.json > cypress/reports/merged_report.txt",
"final_report2": "npm run mergetotxt && rename cypress\\reports\\merged_report.txt merged_report.json && npm run generate_mochawesome_report",
Running npm run final_report2 generates the desired report.
The problem is this line :
"merge":"mochawesome-merge cypress/reports/*.json>cypress/reports/merged_report.json"
You cant use an path for the result json.
"merge":"mochawesome-merge cypress/reports/*.json > merged_report.json"
should work
please try this "merge-report":"mochawesome-merge cypress/reports/*.json > merged_report.txt > merged_report.json",
This worked for me.
"merge":"mochawesome-merge cypress/reports/*.json>cypress/reports/output.json",
"generate_mochawesome_report": "marge cypress/reports/output.json --reportDir ./ --inline",
"final_report": "npm run merge && npm run generate_mochawesome_report"
Try it this way, this should work...
Correct command is
yarn run mochawesome-merge cypress/reports/*.json -o cypress/reports/report.json
I am getting the following error:
npm ERR! missing script: start
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\..\AppData\Roaming\npm-cache\_logs\2019-04-27T18_02_39_6
60Z-debug.log
This is what I am doing -
In my package.json I have written the following code:
{
"name":"javaScript-blockchain",
"version":"1.0.0",
"description":"",
"main":"index.js",
"scripts": {
"test":"echo \"Error:no test specified\" && exit 1",
"start":"node dev/api.js"
}
"author":"Samrat Roy Chowdhuri",
"license":"ISC",
"dependencies":{
"express":"^4.16.3",
"nodemon":"^1.17.3",
"sha256":"^0.2.0"
}
}
Then in my Node prompt I run npm start and get the above error
In the log the following is mentioned:
0 info it worked if it ends with ok
1 verbose cli [ 'C:\\Program Files\\nodejs\\node.exe',
1 verbose cli 'C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js',
1 verbose cli 'start' ]
2 info using npm#6.4.1
3 info using node#v10.15.3
4 verbose stack Error: missing script: start
4 verbose stack at run (C:\Program Files\nodejs\node_modules\npm\lib\run-script.js:155:19)
4 verbose stack at C:\Program Files\nodejs\node_modules\npm\lib\run-script.js:63:5
4 verbose stack at C:\Program Files\nodejs\node_modules\npm\node_modules\read-package-json\read-json.js:115:5
4 verbose stack at C:\Program Files\nodejs\node_modules\npm\node_modules\read-package-json\read-json.js:418:5
4 verbose stack at checkBinReferences_ (C:\Program Files\nodejs\node_modules\npm\node_modules\read-package-json\read-json.js:373:45)
4 verbose stack at final (C:\Program Files\nodejs\node_modules\npm\node_modules\read-package-json\read-json.js:416:3)
4 verbose stack at then (C:\Program Files\nodejs\node_modules\npm\node_modules\read-package-json\read-json.js:160:5)
4 verbose stack at ReadFileContext.<anonymous> (C:\Program Files\nodejs\node_modules\npm\node_modules\read-package-json\read-json.js:332:20)
4 verbose stack at ReadFileContext.callback (C:\Program Files\nodejs\node_modules\npm\node_modules\graceful-fs\graceful-fs.js:78:16)
4 verbose stack at FSReqWrap.readFileAfterOpen [as oncomplete] (fs.js:237:13)
5 verbose cwd E:\programs\blockchain
6 verbose Windows_NT 6.1.7601
7 verbose argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "start"
8 verbose node v10.15.3
9 verbose npm v6.4.1
10 error missing script: start
11 verbose exit [ 1, true ]
Please suggest where I am going wrong
Your JSON is invalid. you just need a comma after the script curly bracket which is just after the start script
{
"name":"javaScript-blockchain",
"version":"1.0.0",
"description":"",
"main":"index.js",
"scripts": {
"test":"echo \"Error:no test specified\" && exit 1",
"start":"node dev/api.js"
},
"author":"Samrat Roy Chowdhuri",
"license":"ISC",
"dependencies":{
"express":"^4.16.3",
"nodemon":"^1.17.3",
"sha256":"^0.2.0"
}
}
I have installed webpack for my project. However, when I try to run a command to convert scss in to css i get an error that says "Please include the following file with any support request: C:\wamp\www\chandco\wp-content\themes\chandco\npm-debug.log".
The thing is this file already exists so I;m confused where the problem is.
Any help will be appreciated.
Thanks.
npm-debug-log file
====================
0 info it worked if it ends with ok
1 verbose cli [ 'C:\\Program Files\\nodejs\\node.exe',
1 verbose cli 'C:\\Program
Files\\nodejs\\node_modules\\npm\\bin\\npm-
cli.js',
1 verbose cli 'run',
1 verbose cli 'watch' ]
2 info using npm#3.10.10
3 info using node#v6.11.2
4 verbose run-script [ 'prewatch', 'watch', 'postwatch' ]
5 info lifecycle chandco-group#1.0.0~prewatch: chandco-group#1.0.0
6 silly lifecycle chandco-group#1.0.0~prewatch: no script for prewatch, continuing
7 info lifecycle chandco-group#1.0.0~watch: chandco-group#1.0.0
8 verbose lifecycle chandco-group#1.0.0~watch: unsafe-perm in lifecycle true
9 verbose lifecycle chandco-group#1.0.0~watch: PATH: C:\Program Files\nodejs\node_modules\npm\bin\node-gyp-bin;C:\wamp\www\chandco\wp-content\themes\chandco\node_modules\.bin;C:\Program Files\Docker\Docker\Resources\bin;C:\ProgramData\Oracle\Java\javapath;C:\Program Files (x86)\Intel\iCLS Client\;C:\Program Files\Intel\iCLS Client\;C:\WINDOWS\system32;C:\WINDOWS;C:\WINDOWS\System32\Wbem;C:\WINDOWS\System32\WindowsPowerShell\v1.0\;C:\Program Files\Intel\WiFi\bin\;C:\Program Files\Common Files\Intel\WirelessCommon\;C:\Program Files\Intel\Intel(R) Management Engine Components\DAL;C:\Program Files (x86)\Intel\Intel(R) Management Engine Components\DAL;C:\Program Files\Intel\Intel(R) Management Engine Components\IPT;C:\Program Files (x86)\Intel\Intel(R) Management Engine Components\IPT;C:\Program Files\Git\cmd;C:\Program Files\PuTTY\;C:\Program Files\nodejs\;C:\Users\Raj.Chudasama\AppData\Local\Microsoft\WindowsApps;C:\Users\Raj.Chudasama\AppData\Local\atom\bin;C:\Users\Raj.Chudasama\AppData\Local\Microsoft\WindowsApps;C:\Users\Raj.Chudasama\AppData\Roaming\npm
10 verbose lifecycle chandco-group#1.0.0~watch: CWD: C:\wamp\www\chandco\wp-content\themes\chandco
11 silly lifecycle chandco-group#1.0.0~watch: Args: [ '/d /s /c', 'webpack --watch' ]
12 silly lifecycle chandco-group#1.0.0~watch: Returned: code: 1 signal: null
13 info lifecycle chandco-group#1.0.0~watch: Failed to exec watch script
14 verbose stack Error: chandco-group#1.0.0 watch: `webpack --watch`
14 verbose stack Exit status 1
14 verbose stack at EventEmitter.<anonymous> (C:\Program Files\nodejs\node_modules\npm\lib\utils\lifecycle.js:255:16)
14 verbose stack at emitTwo (events.js:106:13)
14 verbose stack at EventEmitter.emit (events.js:191:7)
14 verbose stack at ChildProcess.<anonymous> (C:\Program Files\nodejs\node_modules\npm\lib\utils\spawn.js:40:14)
14 verbose stack at emitTwo (events.js:106:13)
14 verbose stack at ChildProcess.emit (events.js:191:7)
14 verbose stack at maybeClose (internal/child_process.js:891:16)
14 verbose stack at Process.ChildProcess._handle.onexit (internal/child_process.js:226:5)
15 verbose pkgid chandco-group#1.0.0
16 verbose cwd C:\wamp\www\chandco\wp-content\themes\chandco
17 error Windows_NT 10.0.15063
18 error argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "run" "watch"
19 error node v6.11.2
20 error npm v3.10.10
21 error code ELIFECYCLE
22 error chandco-group#1.0.0 watch: `webpack --watch`
22 error Exit status 1
23 error Failed at the chandco-group#1.0.0 watch script 'webpack --watch'.
23 error Make sure you have the latest version of node.js and npm installed.
23 error If you do, this is most likely a problem with the chandco-group package,
23 error not with npm itself.
23 error Tell the author that this fails on your system:
23 error webpack --watch
23 error You can get information on how to open an issue for this project with:
23 error npm bugs chandco-group
23 error Or if that isn't available, you can get their info via:
23 error npm owner ls chandco-group
23 error There is likely additional logging output above.
24 verbose exit [ 1, true ]
`
package.json file
================
`{
"name": "chandco-group",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"watch": "webpack --watch"
},
"author": "Raj Chudasama",
"license": "ISC",
"devDependencies": {
"css-loader": "^0.28.4",
"extract-text-webpack-plugin": "^3.0.0",
"node-sass": "^4.5.3",
"sass-loader": "^6.0.6",
"style-loader": "^0.18.2",
"webpack": "^3.4.1",
"webpack-dev-server": "^2.6.1"
}
}
`
webpack.confile file
====================
`var webpack = require('webpack');
var path = require('path');
var config = {
entry: './src/index.js',
output: {
path: path.resolve(__dirname, './public'),
filename: 'output.js'
},
module: {
rules: [
{
test: /\.scss$/,
use: ExtractTextWebpackPlugin.extract({
use:['css-loader', 'sass-loader'],
fallback: 'style-loader'
})
}
]
},
plugins: [
new ExtractTextWebpackPlugin('styles.css')
]
}
module.exports = config;
`
I solved this by requiring the webpack text extract plugin at the top of the page.