amir
amir

Reputation: 218

hot to 'build' a react project for tizen os

im building a react app for tizen (samsung TV) when im doing 'npm run build' it gives me the error "tizen is undefined" and becuase of that im not able to build the app for producution and run it on tizen studio

i added webapck.config.js as said in this link : webpack but without any success

my webpack.config.js file:

const webpack = require('webpack');
const path = require('path');

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

const htmlPlugin = new HtmlWebPackPlugin({
  template: "./public/index.html",
  filename: "./index.html"
});

module.exports = {
  entry: "./src/index.js",
  mode: 'development',
  devtool: 'cheap-module-eval-source-map',
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: [
          {
            loader: 'babel-loader',
            options: {

            },
          }
        ]
      },
      {
        test: /\.(png|jpe?g|gif|ttf|mp4|svg)$/,
        use: [
          {
            loader: 'file-loader',
            options: {},
          },
        ],
      },
      {
        test: /\.(scss|sass|css)$/,
        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
        ]
      }
    ]
  },
  optimization: {

  },
  resolve: {
    extensions: ['*', '.js', '.jsx']
  },
  output: {
    path: __dirname + '/dist',
    publicPath: 'dist/',
    filename: 'bundle.js',
    sourceMapFilename: 'bundle.map'

  },
  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    htmlPlugin
  ],
  devServer: {
    contentBase: './dist',
    hot: true
  }
};

my package.json:

{
  "name": "portal-games",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.5.0",
    "@testing-library/user-event": "^7.2.1",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-scripts": "3.4.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "dist": "webpack"
  },
  "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-core": "^6.26.3",
    "babel-loader": "^8.1.0",
    "babel-preset-es2015": "^6.24.1",
    "css-loader": "^3.6.0",
    "file-loader": "^6.0.0",
    "html-webpack-plugin": "^4.3.0",
    "sass-loader": "^8.0.2",
    "style-loader": "^1.2.1",
    "webpack-cli": "^3.3.11"
  }
}

Upvotes: 1

Views: 1705

Answers (1)

Charles
Charles

Reputation: 1844

If your developing an application for tizen i think the best approach is to use this renative it will simplfy a lot of the build process and also you can port you existing code with no issues after this you can use

rnv run -p --tizen once your set up everything

Upvotes: 2

Related Questions