Importing CSS from node_modules into a Create React App

2018-07-11 03:38 user5839 imported from Stackoverflow

I've found loads of questions on this, but none of the answers are working..

I'm trying to import a font from node modules from this package into a Create React app

I've managed to get it compile with

@import './../node_modules/roboto-fontface/css/roboto/sass/roboto-fontface.scss';

however as soon as I run it I get

Module not found: You attempted to import ../../../fonts/roboto/Roboto-Black.eot
 which falls outside of the project src/ directory. Relative imports outside of
src/ are not supported. You can either move it inside src/, or add a symlink to
it from project's node_modules/.

I've tried with ~, node_modules and various other ways of getting it into the project. Any clues?

2 answers

answered 2018-07-11 03:43 Luis Gurmendez
I would create a assets/fonts/ directory inside src/ and put the fonts there :). Give it a try!

answered 2018-07-11 04:20 dysfunc

You'll need to do a couple things. Try this:

$roboto-font-path: '../../node_modules/roboto-fontface/fonts';

@import "../../node_modules/roboto-fontface/css/roboto/sass/roboto-fontface";

Make sure to update your loaders to support fonts inside webpack.config.js

{
  test: /\.(ttf|eot|woff|woff2)$/,
  use: {
    loader: 'file-loader',
    options: {
      name: 'fonts/[name].[ext]',
    },
  },
}

You'll also need to include an SVG loader

npm install svg-loader --save-dev

Add loader config inside webpack.config.js

{
  test: /\.svg$/,
  use: {
    loader: 'svg-loader'
  }
}

See also questions close to this topic

webpack4: React babel - You may need an appropriate loader to handle this file type

I'm new to webpack 4/react/babel, and i am getting the error below:

ERROR in ./src/index.js 7:4
Module parse failed: Unexpected token (7:4)
You may need an appropriate loader to handle this file type.
|
| ReactDOM.render(
>     <Hello compiler="TypeScript" framework="React" />,
|     document.getElementById("example")
| );

i tried this soluction:link from stack overflow but also didn't work.

So i am stuck, the main difference is that i am using webpack 4 (remarks that i didn't made it work with webpack 3)

My enviroment is:

windows:10
nodejs:6.9.5

Below are the files with the relative path of them

./package.json

{
  "name": "using-webpack",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "react": "^16.4.1",
    "react-dom": "^16.4.1"
  },
  "devDependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.5",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "file-loader": "^1.1.11",
    "webpack": "^4.16.1"
  }
}

./.babelrc

{
    "presets":[
        "es2015", "react"
    ]
}

./webpack.config.js

    module.exports = {
        mode:"development",
    entry: {
        javascript: "./src/index.js",
        html: "./src/index.html",
    },
    output: {
        filename: "bundle.js",
        path: __dirname + "/dist"
    },

    resolve: {
        // Add '.ts' and '.tsx' as resolvable extensions.
        extensions: [".js"]
    },

    module: {
        rules: [
            { 
                test:"/\.js$/",
                exclude:"/node_modules/",
                loader:"babel-loader",
            },
        ]
    },////

    externals: {
        "react": "React",
        "react-dom": "ReactDOM"
    }
};

./index.js

import * as React from "react";
import * as ReactDOM from "react-dom";

import { Hello } from "./components/hello";

ReactDOM.render(
    <Hello compiler="TypeScript" framework="React" />,
    document.getElementById("example")
);

./components/hello.js

import * as React from "react";


// 'HelloProps' describes the shape of props.
// State is never set so we use the '{}' type.
export class Hello extends React.Component {
    render() {
        return <h1>Hello from {this.props.compiler} and {this.props.framework}!</h1>;
    }
}

Using Webpack when extending a JavaScript class with a browser-native object

I am using Webpack with React and Typescript and I'm trying to create a wrapper class for WebSocket, a browser native class.

The class is in a file webSocketConnection.ts and looks something like this:

export default class WebSocketConnection extends WebSocket {
    constructor(url: string, protocols?: string | string[]) {
        super(url, protocols);
    }
}

A separate file imports and uses it

import WebSocketConnection from './webSocketConnection';

export function Connect() {
    return new WebSocketConnection("<<someUrl>>");
}

It builds fine, but then on running the site I get NodeInvocationException: Prerendering failed because of error: ReferenceError: WebSocket is not defined.

From my understanding, this is a server side error due to node not finding the WebSocket object, even though it works fine on the client. This works perfectly fine when just using new Websocket("<<someUrl>>").

My expectation is that this could be solved by excluding that specific file from being bundled, or from the server seeing it.

My webpack.config.js is

const path = require('path');
const webpack = require('webpack');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const CheckerPlugin = require('awesome-typescript-loader').CheckerPlugin;
const merge = require('webpack-merge');

module.exports = (env) => {
    const isDevBuild = !(env && env.prod);

    // Configuration in common to both client-side and server-side bundles
    const sharedConfig = () => ({
        stats: { modules: false },
        resolve: {
            extensions: ['.js', '.jsx', '.ts', '.tsx'],
            alias: {
                ["~"]: path.resolve(__dirname, "ClientApp"),
            }
        },
        output: {
            filename: '[name].js',
            publicPath: 'dist/' // Webpack dev middleware, if enabled, handles requests for this URL prefix
        },
        module: {
            rules: [
                { test: /\.tsx?$/, include: /ClientApp/, use: 'awesome-typescript-loader?silent=true' },
                { test: /\.(png|jpg|jpeg|gif|svg)$/, use: 'url-loader?limit=25000' }
            ]
        },
        plugins: [new CheckerPlugin()]
    });

    // Configuration for client-side bundle suitable for running in browsers
    const clientBundleOutputDir = './wwwroot/dist';
    const clientBundleConfig = merge(sharedConfig(), {
        entry: { 'main-client': './ClientApp/boot-client.tsx' },
        module: {
            rules: [
                {
                    test: /\.css$/,
                    oneOf: [
                        {
                            resourceQuery: /raw/,
                            use: ['style-loader', 'css-loader']
                        },
                        {
                            use: ExtractTextPlugin.extract({ use: isDevBuild ? 'css-loader' : 'css-loader?minimize' })
                        }
                    ]
                },
                {
                    test: /\.less$/,
                    use: ExtractTextPlugin.extract(['css-loader', 'less-loader'])
                },
                {
                    test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
                    use: [{
                        loader: 'file-loader',
                        options: {
                            name: '[name].[ext]',
                            outputPath: 'fonts/'
                        }
                    }]
                }
            ]
        },
        output: { path: path.join(__dirname, clientBundleOutputDir) },
        plugins: [
            new ExtractTextPlugin('site.css'),
            new webpack.DllReferencePlugin({
                context: __dirname,
                manifest: require('./wwwroot/dist/vendor-manifest.json')
            })
        ].concat(isDevBuild ? [
            // Plugins that apply in development builds only
            new webpack.SourceMapDevToolPlugin({
                filename: '[file].map', // Remove this line if you prefer inline source maps
                moduleFilenameTemplate: path.relative(clientBundleOutputDir, '[resourcePath]') // Point sourcemap entries to the original file locations on disk
            })
        ] : [
                // Plugins that apply in production builds only
                new webpack.optimize.UglifyJsPlugin()
            ])
    });

    // Configuration for server-side (prerendering) bundle suitable for running in Node
    const serverBundleConfig = merge(sharedConfig(), {
        resolve: { mainFields: ['main'] },
        module: {
            rules: [
                { test: /\.css$/, loader: 'ignore-loader' },
                { test: /\.less$/, loader: 'ignore-loader' }
            ]
        },
        entry: { 'main-server': './ClientApp/boot-server.tsx' },
        plugins: [
            new webpack.DllReferencePlugin({
                context: __dirname,
                manifest: require('./ClientApp/dist/vendor-manifest.json'),
                sourceType: 'commonjs2',
                name: './vendor'
            })
        ],
        output: {
            libraryTarget: 'commonjs',
            path: path.join(__dirname, './ClientApp/dist')
        },
        target: 'node',
        devtool: 'inline-source-map'
    });

    return [clientBundleConfig, serverBundleConfig];
};

UPDATE 2 36pm The result after transpiling is as so:

var WebSocketConnection = (function (_super) {
    __extends(WebSocketConnection, _super);
    function WebSocketConnection(url, protocols) {
        return _super.call(this, url, protocols) || this;
    }
    return WebSocketConnection;
}(WebSocket));

Adding plugin to Webpack with Rails

I'm using the Webpacker gem with Rails 5.2, and would like to access the environment in the Front End by setting a NODE_ENV global variable.
This is my config/webpack/environment.js file :

const { environment } = require('@rails/webpacker')

// Bootstrap 3 has a dependency over jQuery:
const webpack = require('webpack')

environment.plugins.prepend('Provide',
  new webpack.ProvidePlugin({
    $: 'jquery',
    jQuery: 'jquery'
  })
)

module.exports = environment

I saw that I needed to add the following plugin to webpack to be able access the environment in the front-end :

  new webpack.DefinePlugin({
    'NODE_ENV': JSON.stringify(process.env.NODE_ENV)
  })

But I don't know how to add it... I tried many options, including the line below and it always, either doesn't work, or break jQuery (i.e. Uncaught ReferenceError: jQuery is not defined) :

environment.plugins.prepend('Provide',
  new webpack.DefinePlugin({
    'NODE_ENV': JSON.stringify(process.env.NODE_ENV)
  })
)

Any help would be welcome, I've been struggling with that for hours.. Thanks a lot !!

EDIT

I found the solution... turns out you just need to prepend / append a new plugin and give it a different name that those of your other plugins. Now my config/webpack/environment.js looks like that :

const { environment } = require('@rails/webpacker')

// Bootstrap 3 has a dependency over jQuery:
const webpack = require('webpack')

environment.plugins.prepend('Provide',
  new webpack.ProvidePlugin({
    $: 'jquery',
    jQuery: 'jquery'
  })
)

environment.plugins.prepend('env',
  new webpack.DefinePlugin({
    'NODE_ENV': JSON.stringify(process.env.NODE_ENV)
  })
)


module.exports = environment

I can now access NODE_ENV from every js/jsx file !!

I'm trying to create colour variables in SASS that will style nested elements based on class being added to a parent element

From a styling point of view I can achieve what I need but it feels like I am duplicating a lot of code.

I've created a very small example of what I am trying to achieve on a much bigger scale. Each difficulty level as a colour associated with it and is used for different things like font colour, border colour, background colour etc.

CodePen

<div class="lesson easy">
  <h2>Easy Lesson</h2>
  <p>Description</p>
  <button>More Info</button>
</div>

<div class="lesson medium">
  <h2>Medium Lesson</h2>
  <p>Description</p>
  <button>More Info</button>
</div>

<div class="lesson hard">
  <h2>Hard Lesson</h2>
  <p>Description</p>
  <button>More Info</button>
</div>

//variables that relate to a specific difficulty
$easy: green;
$medium: orange;
$hard: red;

//base styles
.lesson {
  border: 2px solid black;
  width: 200px;
  float: left;
  margin-right: 10px;
  padding: 0px 20px 20px 20px;
}

button {
  border: 0;
  padding: 10px;
}

//specific styles, is there an easier, cleaner way to write this using a mixin that will allow me to use it on a much larger scale with even more nested HTML elements?
.lesson {
  &.easy {
    border-color: $easy;
    button {
      background: $easy;
    }
    p {
      color: $easy;
    }
  }
  &.medium {
    border-color: $medium;
    button {
      background: $medium;
    }
    p {
      color: $medium;
    }
  }
  &.hard {
    border-color: $hard;
    button {
      background: $hard;
    }
    p {
      color: $hard;
    }
  }
}

Image height same as width
I have an image inside of a container and I want it to be a perfect square. I'm setting my width to be 100% of the container and the goal is to get the height of the image to be the same as the width, as I don't know what size the container will be due to responsive design.

Any ideas? I'm using sass, if that helps..
```
.container {
width: 50%;
}

.container img {
  width: 100%;
  height: 400px; //this should be the same as the width value..
}
```
```
<div class="container"><img src="https://images.pexels.com/photos/1249588/pexels-photo-1249588.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260"/></div>
```
Preferably no javascript solution, but maybe it's not possible otherwise?
Get in SCSS Mixin inside @each vars from next array entrie
I want to higher my quality standards of frontends and build today a little helper for the background image part:

.html
```
<div></div>
```
.scss
```
@mixin backgroundImage($path: '/assets/images', $fileName: null, $supports: null, $fileType: '.jpg', $unitType: 'px', $startFrom: 0) {
    @each $res in $supports {
        @media only screen and (min-width: $startFrom / 720 / 1280 / 1920 / 2560 / Last not need) and (max-width: $res#{$unitType}) {
            background-image: url("#{$path}#{$fileName}-#{$res}#{$fileType}");
        }
    }
}

div {
    height: 100vh;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 50%, 50%;
    background-color: navajowhite;
    @include backgroundImage($fileName: 'background', $supports: (720, 1280, 1920, 2560, 3840), $startFrom: 480);
}
```
I tryed to create a stackblitz, but realized then, that i cant upload there images. So if you need a demo to test, please create in root where the index.html will be a folder named assets/images/ and place there 5 files named background-720, background-1280 etc...

Ok the point is that i need here: (min-width: $startFrom / 720 / 1280 / 1920 / 2560 / Last not need) to get in every @each the number of $supports of the last @each. Just in the first @each i need to use the $startFrom

I know its confusing. But I never wrote complex SCSS Mixins before. I hope someone can help me with that.

Deploying React App to Git Hub Pages failed

I am trying to deploy my react app to github pages............

Followed a tutorial and managed to make it work for a previous project. When i run npm run deploy I am getting this error Any help would be appreciated how to interpret this error I tried different solutions found here but none helped

npm run deploy

> Neighbourhood-Map-React@0.1.0 predeploy C:\Users\mels_\Documents\Neighbourhood-Map-React
> npm run build


> Neighbourhood-Map-React@0.1.0 build C:\Users\mels_\Documents\Neighbourhood-Map-React
> react-scripts build

   Creating an optimized production build...
   Failed to compile.

   Error: Parse Error: <meta name="viewport" content="width=device-width, initial  
     -scale=1>
      <meta name="theme-color" content="#000000">
      <!--
        manifest.json provides metadata used when your web app is added to the
        homescreen on Android. See https://developers.google.com/web/fundamental  
      s/engage-and-retain/web-app-manifest/
      -->
      <link rel="manifest" href="/github.io/Neighbourhood-Map-React/manifest.jso  n">
      <link rel="shortcut icon" href="/github.io/Neighbourhood-Map-React/favicon  .ico">
      <!--
        Notice the use of /github.io/Neighbourhood-Map-React in the tags above.
        It will be replaced with the URL of the `public` folder during the build  .
        Only files inside the `public` folder can be referenced from the HTML.
        Unlike "/favicon.ico" or "favicon.ico", "/github.io/Neighbourhood-Map-Re  act/favicon.ico" will
        work correctly both with client-side routing and a non-root public URL.
        Learn how to configure a non-root public URL by running `npm run build`.      -->
      <title>React App</title>
    <link href="/github.io/Neighbourhood-Map-React/static/css/main.c066d278.css"   rel="stylesheet"></head>
    <body>
      <noscript>
        You need to enable JavaScript to run this app.
      </noscript>
      <div id="root"></div>
      <!--
        This HTML file is a template.
        If you open it directly in the browser, you will see an empty page.
        You can add webfonts, meta tags, or analytics to this file.
        The build step will place the bundled scripts into the <body> tag.
        To begin the development, run `npm start` or `yarn start`.
        To create a production bundle, use `npm run build` or `yarn build`.
      -->
    <script type="text/javascript" src="/github.io/Neighbourhood-Map-React/stati  c/js/main.df359430.js"></script></body>
  </html>

  - htmlparser.js:240 new HTMLParser
    [Neighbourhood-Map-React]/[html-minifier]/src/htmlparser.js:240:13

  - htmlminifier.js:951 minify
    [Neighbourhood-Map-React]/[html-minifier]/src/htmlminifier.js:951:3

  - htmlminifier.js:1306 exports.minify
    [Neighbourhood-Map-React]/[html-minifier]/src/htmlminifier.js:1306:16

  - index.js:296
    [Neighbourhood-Map-React]/[html-webpack-plugin]/index.js:296:16

  - util.js:16 tryCatcher
    [Neighbourhood-Map-React]/[bluebird]/js/release/util.js:16:23

  - promise.js:512 Promise._settlePromiseFromHandler
    [Neighbourhood-Map-React]/[bluebird]/js/release/promise.js:512:31

  - promise.js:569 Promise._settlePromise
    [Neighbourhood-Map-React]/[bluebird]/js/release/promise.js:569:18

  - promise.js:614 Promise._settlePromise0
    [Neighbourhood-Map-React]/[bluebird]/js/release/promise.js:614:10

  - promise.js:693 Promise._settlePromises
    [Neighbourhood-Map-React]/[bluebird]/js/release/promise.js:693:18

  - async.js:133 Async._drainQueue
    [Neighbourhood-Map-React]/[bluebird]/js/release/async.js:133:16

  - async.js:143 Async._drainQueues
    [Neighbourhood-Map-React]/[bluebird]/js/release/async.js:143:10

  - async.js:17 Immediate.Async.drainQueues [as _onImmediate]
    [Neighbourhood-Map-React]/[bluebird]/js/release/async.js:17:14


npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! Neighbourhood-Map-React@0.1.0 build: `react-scripts build`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the Neighbourhood-Map-React@0.1.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\mels_\AppData\Roaming\npm-cache\_logs\2018-07-20T13_00_54_457Z-debug.log
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! Neighbourhood-Map-React@0.1.0 predeploy: `npm run build`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the Neighbourhood-Map-React@0.1.0 predeploy script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\mels_\AppData\Roaming\npm-cache\_logs\2018-07-20T13_00_54_550Z-debug.log
warning: LF will be replaced by CRLF in package-lock.json.
The file will have its original line endings in your working directory.

"Failed to minify the code from this file" for an arrow function
I have an ejected CRA/CRNA (React Native Web) application, and my index.js has the following lines:
```
import {AppRegistry} from 'react-native';
import App from './src/App/App';

AppRegistry.registerComponent('my_app', () => App);
```
which are basically copy/pasted from a guide. But webpack (when running npm run build, which calls CRA build.js script) emits an error on the 4th line, which contains an arrow function. If replaced with just AppRegistry.registerComponent('my_app', App);, which is correct syntax, but will cause a runtime error, it compiles just fine, which makes me think that there is a problem with arrow functions and webpack, despite the fact that my code uses arrow functions extensively, only the one in index.js causes an error. What gives?

Express static files URL changes based on route

I have create-react-app thats using react-router-dom. I'm also using express server-side-rendering for SEO. Below is my simple express config. When I got to the '/' route or any of the first-level routes ("/contact", "/blog", etc), it works as intended. The static files come in as:

"http://localhost:8080/static/css/main.ec91a01d.css".

But when I navigate to any multi-level routes ("/blog/blog-post-1"), it adds the first route to the static files URl ex:

http://localhost:8080/blog/static/js/main.d9a1d852.js

What am I doing wrong? Also, the folder structure is that of a regular Create-react-app. Im serving my index.html from the build folder and my styles/js from build/static.

Project
----build
----public
...etc

And my server.js

const express = require('express');
const path = require('path');
const ssr = require('./ssr.mjs');

const app = express();

const crawler = async (req, res) => {
  const isBot = req.get('User-Agent').indexOf('Googlebot') > -1 || 
  req.get('User-Agent').indexOf('googlebot') > -1;
  if (isBot) {
    const { html } = await ssr(`http://www.example.com${req.path}`);
    return res.status(200).send(html);
  }
  res.sendFile(path.join(__dirname + '/build/index.html'));
};
app.use(express.static('build'));
app.get('/', crawler);

app.get('/process', crawler);
app.get('/work', crawler);
app.get('/contact', crawler);
app.get('/blog', crawler);
app.get('/blog/create-post', crawler);
app.get('/blog/:id', crawler);
app.get('/services', crawler);
app.get('/services/:id', crawler);
app.get('/payments', crawler);



const PORT = process.env.PORT || 8080;

app.listen(PORT, () => console.log('Server started. Press Ctrl+C to quit'));

node-sass-chokidar will only output a folder instead of just a file into my src directory
Simple question here, and probably a stupid one. I'm trying to get node-sass-chokidar to output a main.css file into src in my react application but I can only get it to output a main.css directory with the main.css file in it.
```
"build-css": "node-sass-chokidar src/sass/main.scss -o src/main.css"
```
npm run + node-sass-chokidar: how do I use --source-map-root correctly?

node-sass-chokidar

Here is my npm run-scripts: node-sass-chokidar --source-map-embed --quiet --watch --output ./webpack-css --source-map-root file://${PWD}/ --source-map true ./app/scss/main/app.scss

I ran this under /Users/me/Desktop/my-project. However, every source map is prepended with only /Users/me/Desktop/.

/my-project is missing somehow. How can I fix it?

Related questions

Importing CSS from node_modules into a Create React App

2 answers

See also questions close to this topic