I'm trying to use vue.js and vue-loader in my Phoenix Framework app with default brunch asset manager. Of course - I can switch to webpack, but I'd like to solve this issue under brunch.
I have following app.js
import App from './App.vue'
new Vue({
el: 'body',
components: { App }
})
App.vue
<template>
<div id="app">
<h1>{{ msg }}</h1>
<p>hot reloading</p>
</div>
</template>
<script>
export default {
data () {
return {
msg: 'Hello Vue!'
}
}
}
</script>
<style>
body {
font-family: Helvetica, sans-serif;
}
</style>
and brunch-config.js
exports.config = {
// See http://brunch.io/#documentation for docs.
files: {
javascripts: {
joinTo: "js/app.js"
},
stylesheets: {
joinTo: "css/app.css",
order: {
after: ["web/static/css/app.css"] // concat app.css last
}
},
templates: {
joinTo: "js/app.js"
}
},
conventions: {
// This option sets where we should place non-css and non-js assets in.
// By default, we set this to "/web/static/assets". Files in this directory
// will be copied to `paths.public`, which is "priv/static" by default.
assets: /^(web\/static\/assets)/
},
// Phoenix paths configuration
paths: {
// Dependencies and current project directories to watch
watched: [
"web/static",
"test/static"
],
// Where to compile files to
public: "priv/static"
},
// Configure your plugins
plugins: {
babel: {
// Do not use ES6 compiler in vendor code
ignore: [/web\/static\/vendor/]
},
vue: {
extractCSS: true,
out: 'priv/static/css/components.css'
}
},
modules: {
autoRequire: {
"js/app.js": ["web/static/js/app"]
}
},
npm: {
enabled: true,
whitelist: ["phoenix", "phoenix_html", "vue"],
globals: {
Vue: "vue/dist/vue.common.js",
Vuex: "vuex/dist/vuex.min.js",
Axios: "axios/dist/axios.min.js",
VueAxios: "vue-axios/dist/vue-axios.min.js"
},
}
};
and package.json
{
"repository": {},
"license": "MIT",
"scripts": {
"deploy": "brunch build --production",
"watch": "brunch watch --stdin"
},
"dependencies": {
"axios": "^0.16.2",
"phoenix": "file:deps/phoenix",
"phoenix_html": "file:deps/phoenix_html",
"postcss-brunch": "^2.0.5",
"vue": "^2.3.4",
"vue-axios": "^2.0.2",
"vueify": "^9.4.1",
"vuex": "^2.3.1"
},
"devDependencies": {
"babel-brunch": "~6.0.0",
"brunch": "2.7.4",
"clean-css-brunch": "~2.0.0",
"css-brunch": "~2.0.0",
"javascript-brunch": "~2.0.0",
"uglify-js-brunch": "~2.0.1",
"vue-loader": "^13.0.0"
}
}
but after running phoenix server I see error message in browser's console
app.js:62 Uncaught Error: Cannot find module 'web/static/js/App.vue' from 'web/static/js/app.js'
at require (app.js:62)
at expanded (app.js:34)
at app.js:36
at initModule (app.js:43)
at require (app.js:60)
at app.js:11539
Whats wrong and how to solve this issue? Of course - nothing applied in my browser :(
I have a similar set up, using Phoenix 1.3.
app.js:
import "phoenix_html"
import Vue from 'vue'
import App from "../vue/components/MyApp.vue"
Vue.component('my-app', MyApp);
import Test from "../vue/components/Test.vue"
Vue.component('test', Test);
import axios from 'axios';
var vm = new Vue({
el: '#app',
render: h => h(MyApp)
})
brunch-config.js
exports.config = {
// See http://brunch.io/#documentation for docs.
files: {
javascripts: {
joinTo: "js/app.js"
},
stylesheets: {
joinTo: "css/app.css",
order: {
after: ["priv/static/css/app.scss"] // concat app.css last
}
},
templates: {
joinTo: "js/app.js"
}
},
conventions: {
// This option sets where we should place non-css and non-js assets in.
// By default, we set this to "/assets/static". Files in this directory
// will be copied to `paths.public`, which is "priv/static" by default.
assets: /^(static)/
},
// Phoenix paths configuration
paths: {
// Dependencies and current project directories to watch
watched: ["static", "css", "js", "vendor", "vue"],
// Where to compile files to
public: "../priv/static"
},
// Configure your plugins
plugins: {
babel: {
// Do not use ES6 compiler in vendor code
ignore: [/vendor/]
},
copycat: {
"fonts": ["node_modules/font-awesome/fonts"] // copy node_modules/font-awesome/fonts/* to priv/static/fonts/
},
sass: {
options: {
includePaths: ["node_modules/bootstrap/scss", "node_modules/font-awesome/scss"], // tell sass-brunch where to look for files to #import
precision: 8 // minimum precision required by bootstrap
}
},
vue: {
extractCSS: true,
out: '../priv/static/css/components.css'
}
},
modules: {
autoRequire: {
"js/app.js": ["js/app"]
}
},
npm: {
enabled: true,
globals: { // Bootstrap JavaScript requires both '$', 'jQuery', and Tether in global scope
$: 'jquery',
jQuery: 'jquery',
Tether: 'tether',
bootstrap: 'bootstrap' // require Bootstrap JavaScript globally too
}
}
};
package.json
{
"repository": {},
"license": "MIT",
"scripts": {
"deploy": "brunch build --production",
"watch": "brunch watch --stdin"
},
"dependencies": {
"axios": "^0.16.2",
"bootstrap": "^4.0.0-alpha.6",
"eslint-plugin-vue": "^2.1.0",
"font-awesome": "^4.7.0",
"phoenix": "file:../deps/phoenix",
"phoenix_html": "file:../deps/phoenix_html",
"vue": "^2.3.4",
"vue-brunch": "^2.0.1"
},
"devDependencies": {
"babel-brunch": "6.0.6",
"babel-plugin-transform-runtime": "^6.23.0",
"brunch": "2.10.7",
"clean-css-brunch": "2.10.0",
"copycat-brunch": "^1.1.0",
"eslint": "^3.19.0",
"eslint-config-airbnb-base": "^11.2.0",
"eslint-plugin-import": "^2.7.0",
"holderjs": "^2.9.4",
"node-sass": "^4.5.3",
"sass-brunch": "^2.10.4",
"uglify-js-brunch": "2.1.1"
}
}
I created a directory at assets/vue/components, which is where I put MyApp.vue and Test.vue
If things go right, your JS files should be compiled and be in priv/static/js/app.js
The problem with this setup is you will pull in these components in every page, if you are using a MPA. Brunch's entryPoint (instead of joinTo) looks like it could help with this, but still have problems getting that set up right.
Related
I am trying to bundle vue app using rollup. When calling the rollup command I get a pretty strange error:
[!] (plugin vue) TypeError: Cannot read property 'reactivityTransform' of undefined
src/scripts/modules/app.vue
TypeError: Cannot read property 'reactivityTransform' of undefined
at Object.compileScript (/home/kabira/SkunkWorks/rollup/atoz_again/node_modules/#vue/compiler-sfc/dist/compiler-sfc.cjs.js:3300:49)
at getScriptCode (/home/kabira/SkunkWorks/rollup/atoz_again/node_modules/rollup-plugin-vue/dist/index.js:326:48)
at transformVueSFC (/home/kabira/SkunkWorks/rollup/atoz_again/node_modules/rollup-plugin-vue/dist/index.js:285:26)
at Object.transform (/home/kabira/SkunkWorks/rollup/atoz_again/node_modules/rollup-plugin-vue/dist/index.js:212:32)
at /home/kabira/SkunkWorks/rollup/atoz_again/node_modules/rollup/dist/shared/rollup.js:22779:37
Not sure if I am missing crucial plugins or have installed wrong versions of the dependencies. Any help would be great.
Below is my package.json
{
"name": "atoz_again",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"rollup:help": "rollup --help",
"rollup": "rollup -c -w --environment BUILD:development"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"#rollup/plugin-commonjs": "^21.0.3",
"#rollup/plugin-inject": "^4.0.4",
"#rollup/plugin-json": "^4.1.0",
"#rollup/plugin-node-resolve": "^13.1.3",
"#rollup/plugin-replace": "^4.0.0",
"autoprefixer": "^10.4.4",
"postcss": "^8.4.12",
"rollup": "^2.70.1",
"rollup-plugin-cleaner": "^1.0.0",
"rollup-plugin-node-polyfills": "^0.2.1",
"rollup-plugin-postcss": "^4.0.2",
"rollup-plugin-purgecss": "^4.1.3",
"rollup-plugin-terser": "^7.0.2",
"rollup-plugin-vue-inline-svg": "^1.1.2",
"tailwindcss": "^3.0.23"
},
"dependencies": {
"rollup-plugin-vue": "^6.0.0-beta.10",
"vue": "^3.2.31"
}
}
and rollup.config.js
import postcss from 'rollup-plugin-postcss';
import { terser } from 'rollup-plugin-terser';
import json from '#rollup/plugin-json';
import resolve from '#rollup/plugin-node-resolve';
import commonjs from '#rollup/plugin-commonjs';
import replace from '#rollup/plugin-replace';
import autoprefixer from 'autoprefixer';
import tailwind from 'tailwindcss';
//import svg from 'rollup-plugin-vue-inline-svg';
import builtins from 'rollup-plugin-node-polyfills';
import purgecss from 'rollup-plugin-purgecss';
import vue from 'rollup-plugin-vue';
const production = !process.env.ROLLUP_WATCH;
const NODE_ENV = process.env.NODE_ENV || 'development';
module.exports = {
input: 'src/main.js',
output: {
file: 'build/dist.js',
name: 'app',
format: 'iife',
sourcemap: process.env.BUILD === 'development',
},
plugins: [
builtins(),
replace({
'process.env.NODE_ENV': JSON.stringify(NODE_ENV)
}),
postcss({
extract: true,
plugins: [
autoprefixer(),
tailwind(),
production && purgecss({
content: ['./static/index.html', './src/**/*.vue'],
defaultExtractor: content => content.match(/[\w-/:]+(?<!:)/g) || []
}),
]
}),
//svg(),
vue({
css: false
}),
json(),
resolve(),
commonjs(),
production && terser()
]
};
I have a class View that I am importing and then extending it with galleryView .. Then I import the final galleryView into controller.js.. Somewhere along this path I am doing something wrong as I get this error..
Uncaught TypeError: Super expression must either be null or a function
But I can't figure out what I am doing wrong.. is it babel or webpack or my code?
Here's my webpack config file for development..
// SOURCE OF TUTORIAL
// https://www.youtube.com/watch?v=MpGLUVbqoYQ&t=1205s
const HtmlWebpackPlugin = require("html-webpack-plugin");
const path = require("path");
module.exports = {
mode: "development",
devtool: false,
entry: {
main: "./src/js/controller.js",
model: "./src/js/model.js",
},
plugins: [
new HtmlWebpackPlugin({
template: "./src/main.html",
}),
],
module: {
rules: [
{
test: /\.scss$/,
use: [
"style-loader", // injects STYLES into DOM
"css-loader", // turns CSS into commonjs
"sass-loader", // turns SASS into CSS
],
},
{
test: /\.html$/,
use: ["html-loader"],
},
{
test: /\.(png|gif|svg|jpe?g)$/,
type: "asset/resource",
},
{
test: /\.m?js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: "babel-loader",
options: {
presets: ["#babel/preset-env"],
},
},
},
],
},
};
Here's the View Class
class View {
// _data;
constructor() {
this.data;
}
// UPDATED for ELEMENT
render(data) {
if (!data) return console.log("No data!!");
this.data = data;
const markup = this.generateMarkup();
this.parentElement.insertAdjacentElement("afterbegin", markup);
}
}
export default new View();
Here's the extended galleryView
import View from "./view.js";
class galleryView extends View {
constructor() {
super();
this.parentElement = document.getElementById("gallery");
this.errorMessage = "some error message";
this.message = "some other message";
}
generateMarkup() {
return `
<section id="gallery" class="gallery-content">
<p>some text here</p>
</section>
`;
}
}
export default new galleryView();
Here's the opening lines for controller.js where I think the problem occurs (I could be wrong)
import "./../css/main.scss";
import galleryView from "./view/galleryView.js";
// GALLERY AND MORE ....
And here's my package.json
{
"name": "brahma-gallery",
"version": "1.0.0",
"description": "The frontend views for Brahma's Gallery",
"scripts": {
"start": "webpack serve --open --config webpack.dev.js ",
"build": "webpack --config webpack.prod.js"
},
"author": "Alim Bolar",
"license": "ISC",
"devDependencies": {
"#babel/core": "^7.14.3",
"#babel/preset-env": "^7.14.4",
"babel-loader": "^8.2.2",
"css-loader": "^5.2.6",
"file-loader": "^6.2.0",
"html-loader": "^2.1.2",
"html-webpack-plugin": "^5.3.1",
"mini-css-extract-plugin": "^1.6.0",
"node-sass": "^6.0.0",
"optimize-css-assets-webpack-plugin": "^6.0.0",
"sass-loader": "^11.1.1",
"style-loader": "^2.0.0",
"webpack": "^5.38.1",
"webpack-cli": "^4.7.0",
"webpack-dev-server": "^3.11.2"
},
"dependencies": {
"clean-webpack-plugin": "^4.0.0-alpha.0"
}
}
Please advise if you can figure out what I could be doing wrong.. I've googled and searched for related issues and read up some confusing stuff on babel not allowing some sort of exports etc.. but I am very new to babel and don't really know which of the related posts to follow..
Any help or guidance would be appreciated.
export default new View();
should be
export default View;
or you can directly do
export default class View {
When you make a class and extend a class, you extend the class itself, e.g.
class View {}
class galleryView extends View {}
but right now you are incorrectly doing
class View {}
class galleryView extends (new View()) {}
where you extend an instance of the class, which does not make sense.
I'm working on a Vue/Vuetify project for quite some time now. It all worked fine until yesterday. I had problems with using the <v-simple-table> vuetify component, so I decided to run npm install and re-install vuetify: bad idea.
The problem is that I get the following error multiple times when running npm run serve:
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
ValidationError: Invalid options object. Sass Loader has been initialised using an options object that does not match the API schema.
- options has an unknown property 'indentedSyntax'. These properties are valid:
object { implementation?, sassOptions?, prependData?, sourceMap?, webpackImporter? }
at validate (C:\Users\Jeroen\Documents\favourite_xi\node_modules\sass-loader\node_modules\schema-utils\dist\validate.js:49:11)
at Object.loader (C:\Users\Jeroen\Documents\favourite_xi\node_modules\sass-loader\dist\index.js:36:28)
# ./node_modules/vuetify/src/components/VCalendar/mixins/calendar-with-events.sass 4:14-225 14:3-18:5 15:22-233
# ./node_modules/vuetify/lib/components/VCalendar/mixins/calendar-with-events.js
# ./node_modules/vuetify/lib/components/VCalendar/VCalendar.js
# ./node_modules/vuetify/lib/components/VCalendar/index.js
# ./node_modules/vuetify/lib/components/index.js
# ./node_modules/vuetify/lib/index.js
# ./src/main.js
# multi (webpack)-dev-server/client?http://192.168.178.115:8080/sockjs-node ./node_modules/#vue/cli-service/node_modules/webpack/hot/dev-server.js ./src/main.js
My main.js file:
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import Vuetify from 'vuetify/lib'
import 'vuetify/dist/vuetify.min.css'
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'
Vue.use(BootstrapVue)
Vue.use(Vuetify, {
theme: {
"primary": "#FFCA28",
"secondary": "#1976D2",
"accent": "#82B1FF",
"error": "#FF5252",
"info": "#2196F3",
"success": "#4CAF50",
"warning": "#FB8C00"
}
})
Vue.config.productionTip = false
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')
I've already looked at multiple posts and they all advise to run npm rebuild node-sass (both regularly as in admin-mode), delete the node-modules folder, re-install sass-loader, but nothing worked so far.
Is there something wrong in my main.js maybe?
Thanks in advance! Let me know if I need to post more of my code or additional information.
Edit: added package.json
{
"name": "favourite_xi",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"bootstrap": "^4.3.1",
"bootstrap-vue": "^2.0.0-rc.22",
"core-js": "^2.6.5",
"node-sass": "^4.12.0",
"stylus": "^0.54.7",
"stylus-loader": "^3.0.2",
"uuid": "^3.3.3",
"vue": "^2.6.10",
"vue-cool-select": "^2.10.2",
"vue-flip": "^0.3.0",
"vue-responsive-text": "^0.1.4",
"vue-router": "^3.0.3",
"vuetify": "^2.0.16",
"vuex": "^3.1.1"
},
"devDependencies": {
"#fortawesome/fontawesome-free": "^5.10.1",
"#vue/cli-plugin-babel": "^3.8.0",
"#vue/cli-plugin-eslint": "^3.8.0",
"#vue/cli-service": "^3.8.0",
"#vue/eslint-config-standard": "^4.0.0",
"babel-eslint": "^10.0.1",
"eslint": "^5.16.0",
"eslint-plugin-vue": "^5.0.0",
"sass-loader": "^8.0.0",
"vue-template-compiler": "^2.6.10",
"webpack": "^4.39.3"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"#vue/standard"
],
"rules": {},
"parserOptions": {
"parser": "babel-eslint"
}
},
"postcss": {
"plugins": {
"autoprefixer": {}
}
},
"browserslist": [
"> 1%",
"last 2 versions"
]
}
This could be result of upgrading sass-loader from v7.x to v8.x
As stated in release notes, they'v made significant changes to configuration
Check your vue.config.js - if you find something like this:
module.exports = {
css: {
loaderOptions: {
sass: {
....some options here...
}
}
}
}
change it to:
module.exports = {
css: {
loaderOptions: {
sass: {
sassOptions: {
....some options here...
}
}
}
}
}
I am not sure if it's of any use but my npm run build errors at the color codes in theme. When I comment out the color code lines it builds without error:
Vue.use(Vuetify, {
theme: {
"primary": "#FFCA28",
"secondary": "#1976D2",
"accent": "#82B1FF",
"error": "#FF5252",
"info": "#2196F3",
"success": "#4CAF50",
"warning": "#FB8C00"
}
})
I'm encountering an error while trying to setup scss in a vue project using single-file components. I currently encounter this error when I try to use a <style lang="scss"> block, but otherwise my project works as expected.
ERROR in ./src/App.vue?vue&type=style&index=0&lang=scss& (./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/sass-loader/lib/loader.js??ref--4-2!./node_modules/vue-loader/lib??vue-loader-options!./src/App.vue?vue&type=style&index=0&lang=scss&)
Module build failed (from ./node_modules/sass-loader/lib/loader.js):
<template>
^
Invalid operator in attribute selector for object
in C:\Users\yanch\OneDrive\Desktop\virtualenvs\agg_site\client\src\App.vue (line 1, column 2)
# ./src/App.vue?vue&type=style&index=0&lang=scss& (./node_modules/vue-style-loader!./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/sass-loader/lib/loader.js??ref--4-2!./node_modules/vue-loader/lib??vue-loader-options!./src/App.vue?vue&type=style&index=0&lang=scss&) 4:14-279
# ./src/App.vue?vue&type=style&index=0&lang=scss&
# ./src/App.vue
# ./src/main.js
# multi (webpack)-dev-server/client?http://localhost:8080 ./src/main.js
I'm not an expert but this error makes me think that there is an issue with my vue-loader rules. It seems like it's trying to compile the template as a style block (though I could be wrong). This is my webpack config:
const HtmlWebpackPlugin = require('html-webpack-plugin');
const VueLoaderPlugin = require('vue-loader/lib/plugin');
const path = require('path');
module.exports = {
entry: './src/main.js',
module: {
rules: [
{ test: /\.js$/, use: 'babel-loader'},
{ test: /\.vue$/, use: 'vue-loader'},
{ test: /\.css$/, use: ['vue-style-loader', 'css-loader']},
{ test: /\.(png|jpg|gif)$/, use: 'file-loader' },
{ test: /\.scss$/, use: ['vue-style-loader','css-loader', 'sass-loader']},
]
},
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html',
}),
new VueLoaderPlugin(),
],
devServer: {
historyApiFallback: true,
},
resolve: {
alias: {
'#': path.resolve(__dirname, './src'),
'~': path.resolve(__dirname, './src/style'),
}
},
};
And I have these packages installed:
"devDependencies": {
"#babel/core": "^7.2.2",
"#babel/preset-env": "^7.3.1",
"axios": "^0.18.0",
"babel-loader": "^8.0.5",
"babel-plugin-root-import": "^6.1.0",
"css-loader": "^2.1.0",
"file-loader": "^3.0.1",
"html-webpack-plugin": "^3.2.0",
"node-sass": "^4.12.0",
"path": "^0.12.7",
"rimraf": "^2.6.3",
"sass-loader": "^7.1.0",
"vue": "^2.6.10",
"vue-loader": "^15.7.0",
"vue-style-loader": "^4.1.2",
"vue-template-compiler": "^2.6.10",
"vuex": "^3.1.0",
"webpack": "^4.29.3",
"webpack-cli": "^3.2.3",
"webpack-dev-server": "^3.1.14"
},
I followed the vue-loader setup instructions and I believe I have all the necessary loaders installed along with the proper rules, so I'm unsure why I'm getting this error. Any help would be appreciated.
**Edit - Added App.vue below:
<template>
<div id="app-container">
<NavBanner class="nav-banner"/>
<ProfileBanner/>
<router-view></router-view>
</div>
</template>
<script>
import ProfileBanner from '#/components/ProfileBanner.vue';
import NavBanner from '#/components/NavBanner.vue';
export default {
data() {
return {
message: 'Welcome to Leddit',
};
},
components: {
ProfileBanner,
NavBanner,
}
};
</script>
<style lang="scss">
#app-container {
font-family: 'Roboto', sans-serif;
color: blue;
height: 100%;
width: 100%;
}
.nav-banner {
height: 10%;
}
</style>
I am trying to provide some sort of cross compatibility with IE 10. I have used the Babel Polyfill to get past a Promise exception for IE 11, but for IE 10 I am getting exceptions for Set and Weakmap which babel polyfill should correct as it was my understanding that these were included as well.
This was my first React/React-static project, so flying by the seat of my pants to be honest so hope someone can help/explain things in a simple clear fashion.
FYI: Set is undefined in the main.js file produced by react-static build. And Weakmap is found in the hot-reloader module which is only a problem in dev mode.
My App.js file:
import "babel-polyfill";
import React from "react";
import { Router, Link } from "react-static";
import { hot } from "react-hot-loader";
import Routes from "react-static-routes";
import "./sass/app.scss";
import "./sass/_base.scss";
import "./sass/_layout.scss";
import "./sass/_utilities.scss";
import "./sass/main.scss";
import "./sass/_components.scss";
const App = () => (
<Router>
<div>
<Routes />
</div>
</Router>
);
export default hot(module)(App);
My static.config.js file:
import ExtractTextPlugin from "extract-text-webpack-plugin";
export default {
getSiteData: () => ({
title: "React Static"
}),
getRoutes: async () => {
// const { data: posts } = await axios.get(
// "https://jsonplaceholder.typicode.com/posts"
// );
return [
{
path: "/",
component: "src/containers/Home"
},
{
path: "/about",
component: "src/containers/About"
},
{
path: "/services",
component: "src/containers/Services"
},
{
path: "/cases",
component: "src/containers/Cases"
},
{
path: "/process",
component: "src/containers/Process"
},
{
path: "/contact",
component: "src/containers/Contact"
},
{
path: "/contactsent",
component: "src/containers/Contactsent"
},
{
is404: true,
component: "src/containers/404"
}
];
},
webpack: (config, { defaultLoaders, stage }) => {
let loaders = [];
if (stage === "dev") {
loaders = [
{ loader: "style-loader" },
{ loader: "css-loader" },
{ loader: "sass-loader" }
];
} else {
loaders = [
{
loader: "css-loader",
options: {
importLoaders: 1,
minimize: stage === "prod",
sourceMap: false
}
},
{
loader: "sass-loader",
options: { includePaths: ["src/", "src/sass/"] }
}
];
// Don't extract css to file during node build process
if (stage !== "node") {
loaders = ExtractTextPlugin.extract({
fallback: {
loader: "style-loader",
options: {
sourceMap: false,
hmr: false
}
},
use: loaders
});
}
}
config.module.rules = [
{
oneOf: [
{
test: /\.s(a|c)ss$/,
use: loaders
},
defaultLoaders.cssLoader,
defaultLoaders.jsLoader,
defaultLoaders.fileLoader
]
}
];
return config;
}
};
My package.json:
{
"name": "react-static-example-basic",
"version": "1.0.1",
"main": "index.js",
"license": "MIT",
"scripts": {
"start": "react-static start",
"stage": "react-static build --staging",
"build": "react-static build",
"serve": "serve dist -p 3000"
},
"dependencies": {
"axios": "^0.16.2",
"core-js": "^3.0.1",
"es6-promise": "^4.2.6",
"promise-polyfill": "8.1.0",
"raf": "^3.4.1",
"react": "^16.0.0",
"react-dom": "^16.0.0",
"react-router": "^4.2.0",
"react-spring": "^8.0.5",
"react-static": "^5.9.7"
},
"devDependencies": {
"babel-polyfill": "^6.26.0",
"eslint-config-react-tools": "1.x.x",
"extract-text-webpack-plugin": "^3.0.2",
"node-sass": "^4.7.2",
"sass-loader": "^6.0.6",
"serve": "^6.1.0"
}
}
It may be worth trying to separately instal core-js include such modules in the assembly:
npm i --save core-js
import "core-js/es/set";
import "core-js/es/weak-map";
If that doesn't help try use polyfill.io:
Add yor html it:
<script crossorigin="anonymous" src="https://polyfill.io/v3/polyfill.min.js?features=WeakMap%2CWeakSet%2CSet"></script>
Not familiar with react-static as such, but from what I experienced with my projects with react and webpack:
the babel polyfill needs to go into the html page as a first script tag, and could not be packaged as part of webpack (I do not recall the exact reasons)
On projects not involving babel I had success convincing IE10 to play ball using: https://github.com/paulmillr/es6-shim