CSS and Images files not coming after transpiling package with babel in new CRA

user_9478145 0
Viewed 2195

I am importing CSS as import './style.css'; and images in CSS with background URL property. What I want is to make a package, publish it to npm without building and then install it into a new CRA and use it there. Using self made npm package in react. Failed to compile. From here I got to know that to use that installed package now I have to transpile it. But the issue is my js/jsx are getting transpiled from ES6 to ES5 but the images and CSS aren't coming into the new transpiled folder.

DETAILS I made a package in Reactjs and was not able to use it after publishing the source, not by making the build. Then I posted a question on it: Using self made npm package in react. Failed to compile.

Now I am able to use it by following the steps in the accepted answer i.e. by transpiling ./src using babel.

The issue on which I am still stuck is that I don't get my CSS and images in the new transpiled location i.e. ./lib/src. If I copy all the images and CSS folders in the respective places in ./lib/src. It works but I don't want to do it manually.

Any suggestions on how to achieve this.

WEBPACK.CONFIG.JS

module.exports = {
  overrides: [
    {
      test: ["./node_modules/<component_name>"],
      presets: ["@babel/preset-env", "@babel/preset-react"],
      plugins: ["@babel/plugin-proposal-class-properties"]
    }
  ]
};

PACKAGE.json

{
  "name": "package-test",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@babel/preset-es2015": "^7.0.0-beta.53",
    "@babel/preset-react": "^7.8.3",
    "@material-ui/core": "^1.5.1",
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.4.0",
    "@testing-library/user-event": "^7.2.1",
    "active-event-stack": "^1.0.0",
    "babel-loader": "^8.0.6",
    "babel-plugin-webpack-loaders": "^0.9.0",
    "classnames": "^2.2.3",
    "css-loader": "^3.4.2",
    "file-loader": "^5.0.2",
    "material-ui": "^0.20.0",
    "path": "^0.12.7",
    "prop-types": "^15.6.0",
    "react": "^16.12.0",
    "react-dom": "^16.12.0",
    "react-draggable": "^2.2.6",
    "react-onclickoutside": "^5.10.0",
    "react-redux": "^7.1.3",
    "react-resizable": "^1.7.1",
    "react-router-dom": "^5.1.2",
    "react-scripts": "3.4.0",
    "redux": "^3.7.2",
    "style-loader": "^1.1.3",
    "styled-components": "^4.3.2",
    "url-loader": "^3.0.0",
    "wolfy87-eventemitter": "^5.2.9"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@babel/cli": "^7.8.4"
  }
}
babeljs npm webpack reactjs file-upload
3 Answers

Ok if you want to publish a component library then there are plenty of tutorials available online, and if your specific issue is about not been able to publish your static resources such as css images and scss etc then you can just append a cp command (linux & macos) to your build script

 "scripts": {

    "build": "babel src --out-dir lib --ignore src/__tests__/ && cp -R src/assets lib/",
  },

Notice this towards the end of the command cp -R src/assets this will manually copy your static assets to the desired location when your run npm run build

user_6011820

You should use file-loader to load image files and css-loader to load your css files.

Your webpack will then know how to deal with your files

If you have created your project with create-react-app. In that case, you just need to import your CSS file and image file to your components.

user_30042580

You should do this while importing css files :

import './style.css';

If you want to create this from scratch.

Inside your webpack.config.js , insert this (change the path according to your folder structure):

const path = require("path");

const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  entry: path.join(__dirname, "src", "index.js"),
  output: {
    path: path.join(__dirname, "build"),
    filename: "index.bundle.js"
  },
  mode: process.env.NODE_ENV || "development",
  resolve: { modules: [path.resolve(__dirname, "src"), "node_modules"] },
  devServer: {
    contentBase: path.join(__dirname, "src"),
    hot: true,
    port: 3000
  },
  module: {
    rules: [
      {
        // this is so that we can compile any React,
        // ES6 and above into normal ES5 syntax
        test: /\.(js|jsx)$/,
        // we do not want anything from node_modules to be compiled
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      },
      {
        test: /\.(css|scss)$/,
        use: [
          "style-loader", // creates style nodes from JS strings
          "css-loader", // translates CSS into CommonJS
          "sass-loader" // compiles Sass to CSS, using Node Sass by default
        ]
      },
      {
        test: /\.(jpg|jpeg|png|gif|mp3|svg)$/,
        loaders: ["file-loader"]
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: path.join(__dirname, "src", "index.html")
    })
  ]
};

and edit your .babelrc to contain just this:

{
  "presets": ["@babel/env", "@babel/react"],
  "plugins": ["@babel/plugin-proposal-class-properties"]
}

also your package.json should list these dev-dependencies:

@babel/core,@babel/node,@babel/plugin-proposal-class-properties,@babel/preset-env,@babel/preset-react,babel-jest,babel-loader,css-loader,file-loader,html-webpack-plugin,path,style-loader,webpack,webpack-cli,webpack-dev-server

If this doesn't help please paste the link to your github repo. I will take a look.

user_52068740
Related