CopyWebpackPlugin cannot find files defined in config

See also questions close to this topic

• how to change prettier format for react native

  my code formatting prettier didn't works well for react native, i don't understand where to config it but it works well with flutter

  from this code

        import { View, Text } from 'react-native'
      
      import React from 'react'
      
      export default function App() {
        return (
          <View>
      
      <Text>Apps</Text>   
  </View>
        )
      }
  

  it's formatted to this

  import {
    View,
    Text
  } from 'react-native'
  
  import React from 'react'
  
  export default function App() {
    return ( <
      View >
  
      <
      Text > Apps < /Text>
  
  
      <
      /View>
    )
  }
  
• MarkLogic server-side JavaScript and XQuery

  I am just starting using NoSQL MarkLogic DB and trying to choose for me the best query language to learn and use in future. On server side MarkLogic provides the possibility to use JavaScript API or XQuery API.

  I want to receive an advice. Which language is better to concentrate on and learn? JavaScript or XQuery?
• Popover in chrome extension using js

  My goal is I want to create a chrome extension like Toucan Extension. I want to highlight some paragraphs in random site then translate it to specific language. The problem is I do not have an idea on how to implement a popover in chrome extension like in the picture below.

  
• How to import rails engine assets in application.scss of rails application

  I have a rails engine that is specifically created for storing assets. I have assets in rails engine gem as follows:

  app/assets/stylesheets/stack/atoms/_all.scss
  app/assets/stylesheets/stack/molecules/_all.scss
  

  I created engine.rb file in lib folder as follows: lib/stack/engine.rb

  module Stack
    class Engine < ::Rails::Engine
    end
  end
  

  I mounted stack gem in rails application

  mount Stack::Engine, at: "/stack"
  

  I am now trying to import those scss files from rails engine into the rails application as follows

  application.scss

  /*
   *= require stack/atoms/all
   *= require stack/molecules/all
   */
  
  // Stack Atoms
  @import 'stack/atoms/all';
  
  // Stack Molecules
  @import 'stack/molecules/all';
  
  @import 'variables'
  

  Now when I run assets:precompile I get error:

    app/assets/stylesheets/application.scss 9:9  root stylesheet
  SassError: SassError: Can't find stylesheet to import.
    ╷
  9 │ @import 'stack/atoms/all';
  

  What am I missing so I can import css files from rails engine into the application.scss?

  I also tried to do following in rails gem but still no luck.

  module Stack
    class Engine < ::Rails::Engine
    isolate_namespace Stack
      initializer "stack.assets.precompile" do |app|
        app.config.assets.precompile += %w( stack/atoms/_all.scss )
      end
    end
  end
  
• How to trigger hmr when a virtual module updated in webpack 4?

  Have a package, used webpack-virtual-modules to write a virtual module, when I modified my code, this module will be auto updated, but broswer can't replaced.

  I try to write to local disk, it can triggered hmr when modified, but this module needs to be edited in real time.
• is there any difference between this commands to install webpack? "npm install webpack webpack-cli --save-dev" & "npm install -D webpack webpack-cli "

  Hello everyone I´m learning about webpack and i saw this two ways to install it, I was wondering if there is any difference between this two ways:

  this one is from webpack documentation

  "npm install webpack webpack-cli --save-dev"

  And this other I just saw it in a youtube tutorial

  "npm install -D webpack webpack-cli "

  thanks for your help and if there is any difference pleace let me know which is the best of both.
• Is it possible to convert the String "1L" to the corresponding Long value?

  I am parsing a config file with the following instructions:

  public String getProperty(String key) throws IOException {
    Properties prop = new Properties();
    String path = "path/to/file/file.properties";
    InputStream stream = this.class.getResourceAsStream(path);
    prop.load(stream);
    return prop.getProperty(key);
  

  The returned value, that is a String, is later converted into the expected type from the calling method. How can I convert the String 1L into a Long type?
  I tried:

  Long.valueOf(this.getProperty(key));
  

  but it raises NumberFormatException. Is there a way to do it?
• TypeScript configuration

  I'm new to the world of typeScript, hence I'm having some configuration issues. The problem is that some methods are not working even though they theoretically should. Currently my typeScript config looks as follows:

      {
    "compilerOptions": {
      "target": "ES6",
      "module": "commonjs",
      "esModuleInterop": true,
      "forceConsistentCasingInFileNames": true,
      "strict": true,
      "skipLibCheck": true,
      "noEmitOnError": true,
      "strictNullChecks": true,
      "lib": [
        "dom",
        "ES2015.Collection",
        "ES2015.Iterable",
        "ES2016.Array.include",
        "ES2017.Object",
        "ES5",
        "ES6",
      ],
    }
  }
  

  Everything seems to be fine besides the fact that when I try to use for example Number.isInteger() method or Array.entries() method following error occurs:

  Property 'isInteger' does not exist on type 'NumberConstructor'. Do you need to change your target library? Try changing the 'lib' compiler option to 'es2015' or later.

  The same happens with .entries(). Can anyone help?
• Anyway to find out hosting server LAN IP in nginX?

  When I use $server_addr in my nginX configuration, it returns "127.0.0.1", but my script needs to know the actual LAN IP of the hosting server for some conditional items. Is there anyway to find out actual LAN IP (such as "192.168.1.32") instead of "127.0.0.1" in nginX?
• How do I copy files using CopyWebpackPlugin using a pattern

  I am trying to use the CopyWebpackPlugin to copy some files used for i18n.

  My folders look like this

  src/menu/locales/   
                   en/menu.json
                   fr/menu.json
  src/home/locales/   
                   en/home.json
                   fr/home.json
  src/book/locales/   
                   en/book.json
                   fr/book.json
  

  I need to copy the files during the build, so that I end up with the following folder structure:

  dist/locales/en/
                  menu.json
                  home.json
                  page.json
  dist/locales/fr/
                  menu.json
                  home.json
                  page.json
  

  I can't seem to get the pattern right for what I need. Thanks in advance!
• Webpack cache copied files

  I'm using webpack and webpack-dev-server to test changes to a React application but I have a large number of prebuilt resources (JS/CSS/etc).

  To make these available to the rest of the application I am using copy-webpack-plugin and copying them into the build folder.

  Any time I make a change to the React code, I see that it recompiles all of those resources, even though they are static, which takes almost 30 seconds to recompile. (Before adding them it took <2 seconds).

  Is there any way to cache those resources or prevent them from needing to be recompiled after watched changes?

  webpack.config.js

  {
    mode: 'development',
    entry: './src/index.tsx',
    plugins: [
      new HtmlWebpackPlugin(),
      new CopyPlugin([{
        from: "path/to/prebuilt/resources", to: "dist" },
      ]}),
    ],
    output: {
      filename: '[name].js',
      chunkFilename: '[name].bundle.js',
    },
    module: {
      rules: [
        {
          test: /\.(ts|tsx|js|jsx)$/,
          enforce: 'pre',
          exclude: /node_modules/,
          use: ['eslint-loader'],
        },
        {
          test: /\.(ts|tsx)$/,
          exclude: /node_modules/,
          use: ['babel-loader'],
        },
        {
          test: /\.css$/,
          use: ['css-loader', 'style-loader'],
        },
    },
    devServer: {
      historyApiFallback: true,
      contentBase: ['./build', './node_modules'],
    },
  }
  
• Scandit using typescript

  I wanted to convert this repo(in this particular file) to use typescript. My problem is that I'm not too familiar with using classes. So far I have done this, however, I'm still getting errors.

  The issues that I'm facing are that scan gives the error "Property 'scan' has no initializer and is not definitely assigned in the constructor." as well as Property 'scan' is used before being assigned. As well as the type for viewRef seems to be incorrect. I haven't been able to find anything about what types are supposed to be used.

  Does anyone know what I'm doing wrong?

  import React, { Component } from "react";
  import { Alert, AppState, BackHandler } from "react-native";
  import {
    BarcodeCapture,
    BarcodeCaptureOverlay,
    BarcodeCaptureOverlayStyle,
    BarcodeCaptureSettings,
    Symbology,
    SymbologyDescription,
    BarcodeCaptureListener,
  } from "scandit-react-native-datacapture-barcode";
  import {
    Camera,
    CameraSettings,
    DataCaptureContext,
    DataCaptureView,
    FrameSourceState,
    RectangularViewfinder,
    RectangularViewfinderStyle,
    RectangularViewfinderLineStyle,
    VideoResolution,
  } from "scandit-react-native-datacapture-core";
  import { styles } from "./styles";
  
  import { requestCameraPermissionsIfNeeded } from "./camera-permission-handler";
  import { SCANDIT_LICENSE_KEY } from "../../assets/util/constants";
  
  interface Scandit {
    dataCaptureContext?: DataCaptureContext;
    viewRef?: DataCaptureView;
    barcodeCaptureMode: BarcodeCapture;
    camera?: Camera;
    barcodeCaptureListener?: BarcodeCaptureListener;
    overlay: BarcodeCaptureOverlay;
  }
  
  export class Scanner extends Component<Scandit> {
    scan: Scandit;
    constructor(props: Scandit) {
      super(props);
       this.scan = props;
      // Create data capture context using your license key.
      this.scan.dataCaptureContext = DataCaptureContext.forLicenseKey(SCANDIT_LICENSE_KEY);
      this.scan.viewRef = React.createRef();
    }
  
    componentDidMount() {
      AppState.addEventListener("change", this.handleAppStateChange);
      this.setupScanning();
    }
  
    componentWillUnmount() {
      AppState.removeEventListener("change", this.handleAppStateChange);
      if (this.scan.dataCaptureContext) this.scan.dataCaptureContext.dispose();
    }
  
    handleAppStateChange = async (nextAppState: string) => {
      if (nextAppState.match(/inactive|background/)) {
        this.stopCapture();
      } else {
        this.startCapture();
      }
    };
  
    startCapture() {
      this.startCamera();
      this.scan.barcodeCaptureMode.isEnabled = true;
    }
  
    stopCapture() {
      this.scan.barcodeCaptureMode.isEnabled = false;
      this.stopCamera();
    }
  
    stopCamera() {
      if (this.scan.camera) {
        this.scan.camera.switchToDesiredState(FrameSourceState.Off);
      }
    }
  
    startCamera() {
      if (!this.scan.camera) {
        // Use the world-facing (back) camera and set it as the frame source of the context. The camera is off by
        // default and must be turned on to start streaming frames to the data capture context for recognition.
        this.scan.camera = Camera.default;
        this.scan.dataCaptureContext.setFrameSource(this.scan.camera);
  
        const cameraSettings = new CameraSettings();
        cameraSettings.preferredResolution = VideoResolution.FullHD;
        this.scan.camera.applySettings(cameraSettings);
      }
  
      // Switch camera on to start streaming frames and enable the barcode capture mode.
      // The camera is started asynchronously and will take some time to completely turn on.
      requestCameraPermissionsIfNeeded()
        .then(() => {
          if (this.scan.camera) this.scan.camera.switchToDesiredState(FrameSourceState.On);
        })
        .catch(() => BackHandler.exitApp());
    }
  
    setupScanning() {
      // The barcode capturing process is configured through barcode capture settings
      // and are then applied to the barcode capture instance that manages barcode recognition.
      const settings = new BarcodeCaptureSettings();
  
      // The settings instance initially has all types of barcodes (symbologies) disabled. For the purpose of this
      // sample we enable a very generous set of symbologies. In your own app ensure that you only enable the
      // symbologies that your app requires as every additional enabled symbology has an impact on processing times.
      settings.enableSymbologies([
        Symbology.EAN13UPCA,
        Symbology.EAN8,
        Symbology.UPCE,
        Symbology.QR,
        Symbology.DataMatrix,
        Symbology.Code39,
        Symbology.Code128,
        Symbology.InterleavedTwoOfFive,
      ]);
  
      // Some linear/1d barcode symbologies allow you to encode variable-length data. By default, the Scandit
      // Data Capture SDK only scans barcodes in a certain length range. If your application requires scanning of one
      // of these symbologies, and the length is falling outside the default range, you may need to adjust the "active
      // symbol counts" for this symbology. This is shown in the following few lines of code for one of the
      // variable-length symbologies.
      const symbologySettings = settings.settingsForSymbology(Symbology.Code39);
      symbologySettings.activeSymbolCounts = [7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20];
  
      // Create new barcode capture mode with the settings from above.
      this.scan.barcodeCaptureMode = BarcodeCapture.forContext(this.scan.dataCaptureContext, settings);
  
      // Register a listener to get informed whenever a new barcode got recognized.
      this.scan.barcodeCaptureListener = {
        didScan: (_: any, session: { newlyRecognizedBarcodes: any[] }) => {
          const barcode = session.newlyRecognizedBarcodes[0];
          const symbology = new SymbologyDescription(barcode.symbology);
  
          // The `alert` call blocks execution until it's dismissed by the user. As no further frames would be processed
          // until the alert dialog is dismissed, we're showing the alert through a timeout and disabling the barcode
          // capture mode until the dialog is dismissed, as you should not block the BarcodeCaptureListener callbacks for
          // longer periods of time. See the documentation to learn more about this.
          this.scan.barcodeCaptureMode.isEnabled = false;
  
          Alert.alert(
            "null",
            `Scanned: ${barcode.data} (${symbology.readableName})`,
            [{ text: "OK", onPress: () => (this.scan.barcodeCaptureMode.isEnabled = true) }],
            { cancelable: false }
          );
        },
      };
  
      this.scan.barcodeCaptureMode.addListener(this.scan.barcodeCaptureListener);
  
      // Add a barcode capture overlay to the data capture view to render the location of captured barcodes on top of
      // the video preview, using the Frame overlay style. This is optional, but recommended for better visual feedback.
      this.scan.overlay = BarcodeCaptureOverlay.withBarcodeCaptureForViewWithStyle(
        this.scan.barcodeCaptureMode,
        this.scan.viewRef.current,
        BarcodeCaptureOverlayStyle.Frame
      );
      this.scan.overlay.viewfinder = new RectangularViewfinder(RectangularViewfinderStyle.Square, RectangularViewfinderLineStyle.Light);
  
      this.scan.overlay = this.scan.overlay;
    }
  
    render() {
      return <DataCaptureView style={styles.container} context={this.scan.dataCaptureContext} ref={this.scan.viewRef} />;
    }
  }
  
• Scandit AR functionality on Flutter does not show anything

  I'm developing a shopping list application in which users can scan multiple barcodes and see some data associated with the products. I succesfully integrated Scandit with MatrixScan and with BarcodeTrackingBasicOverlay it focuses correctly on the barcodes. I want then to migrate to BarcodeTrackingAdvancedOverlay and show a simple view with some text over the barcode but it doesen't work. I have a license to use Matrixscan. My initialization code is this

  bool _loading = false;
  Camera _camera = Camera.defaultCamera;
  BarcodeTracking _barcodeTracking;
  DataCaptureView _captureView;
  TorchState _torchState = TorchState.off;
  bool _isPermissionMessageVisible = false;
  BarcodeTrackingAdvancedOverlay overlay;
  
  @override
    void initState() {
  super.initState();
  WidgetsBinding.instance.addObserver(this);
  
  _camera.applySettings(BarcodeCapture.recommendedCameraSettings);
  
  _checkPermission();
  
  var captureSettings = BarcodeTrackingSettings();
  captureSettings.enableSymbologies({
    Symbology.ean8,
    Symbology.ean13Upca,
    Symbology.upce,
    Symbology.code39,
    Symbology.code128,
  });
  
  _barcodeTracking = BarcodeTracking.forContext(_context, captureSettings)
    ..addListener(this);
  
  _captureView = DataCaptureView.forContext(_context);
  
  /*var _basicOverlay = BarcodeTrackingBasicOverlay.withBarcodeTrackingForView(
    _barcodeTracking,
    _captureView,
  )..brush = Brush(Color(0x00FFFFFF), Color(0xFFFFFFFF), 2);*/
  
  overlay = BarcodeTrackingAdvancedOverlay.withBarcodeTrackingForView(
    _barcodeTracking,
    _captureView,
  )..listener = this;
  
  //_captureView.addOverlay(_basicOverlay);
  _captureView.addOverlay(overlay);
  
  _context.setFrameSource(_camera);
  _camera.switchToDesiredState(FrameSourceState.on);
  _barcodeTracking.isEnabled = true;
  }
  

  The body of the view is a simple Stack with a Center in which I show the _captureview and some text. My fist implementation was with the BarcodeTrackingAdvancedOverlayListener and it didn't show any widget over barcodes:

    @override
   PointWithUnit offsetForTrackedBarcode(
    BarcodeTrackingAdvancedOverlay overlay, TrackedBarcode trackedBarcode) {
  return PointWithUnit(DoubleWithUnit(0, MeasureUnit.fraction),
      DoubleWithUnit(-1, MeasureUnit.fraction));
   }
  
   @override
   Anchor anchorForTrackedBarcode(
    BarcodeTrackingAdvancedOverlay overlay, TrackedBarcode trackedBarcode) {
    return Anchor.center;
   }
  
   @override
   Widget widgetForTrackedBarcode(
    BarcodeTrackingAdvancedOverlay overlay, TrackedBarcode trackedBarcode) {
  return ARWidget(data: trackedBarcode.barcode.data ?? 'CIAO');
   }
  

  I also tried with the didUpdateSession implementation (similar to the Scandit sample app) but also didn't work:

  @override
  void didUpdateSession(
    BarcodeTracking barcodeTracking, BarcodeTrackingSession session) {
  
    for (final lostTrackIdentifier in session.removedTrackedBarcodes) {
    // You now know the identifier of the tracked barcode that has been lost.
    // Usually here you would remove the views associated.
    }
  
  for (final trackedBarcode in session.addedTrackedBarcodes) {
    // Fixed identifier for the tracked barcode.
    var trackingIdentifier = trackedBarcode.identifier;
  
    // Current location of the tracked barcode.
    var location = trackedBarcode.location;
    _captureView
        .viewQuadrilateralForFrameQuadrilateral(location)
        .then((quadrilateral) => {
      _updateView(trackedBarcode, location)
            });
    }
  }
  
  _updateView(TrackedBarcode trackedBarcode, Quadrilateral viewLocation) {
  // If the barcode is wider than the desired percent of the data capture view's width, show it to the user.
  var shouldBeShown = viewLocation.width() > MediaQuery.of(context).size.width * 0.1;
  if (!shouldBeShown) {
    overlay.setWidgetForTrackedBarcode(null, trackedBarcode);
    return;
  }
  
  var bubble = ARWidget(data: trackedBarcode.barcode.data ?? '');
  overlay.setWidgetForTrackedBarcode(bubble, trackedBarcode);
  print('YES');
  }
  

  @override void didTapViewForTrackedBarcode( BarcodeTrackingAdvancedOverlay overlay, TrackedBarcode trackedBarcode) {}

  My ARWidget is this:

  class ARWidget extends StatelessWidget {
  final String data;
  
  const ARWidget({Key key, this.data}) : super(key: key);
  
  @override
  Widget build(BuildContext context) {
  return Container(
    width: 180,
    height: 60,
    decoration: BoxDecoration(
      color: const Color(0xFFFFFFEE),
      borderRadius: BorderRadius.circular(30),
    ),
    child: Row(
      textDirection: TextDirection.ltr,
      children: [
        Container(
          width: 60,
          height: 60,
          decoration: BoxDecoration(
            color: const Color(0xFF58B5C2),
            borderRadius: BorderRadius.circular(30),
          ),
          child: Icon(
            Icons.widgets,
            color: Colors.white,
          ),
        ),
      ],
    ),
  );
  }
  

  }

  I saw on console that every time it tries to render the widget this error occur:

  [        ] I/flutter ( 1208): 'package:flutter/src/widgets/focus_manager.dart': Failed assertion: line 1463 pos 12: 'RawKeyboard.instance.keyEventHandler == null': is not true.
  

  Which with a bit of debugging found that it refers to LINE 34 of widget_to_base64_converter.dart.

  final buildOwner = BuildOwner();
  

  I also tried the sample AR Flutter app and had the same result. Do you have any idea on how to solve this issue or is it Scandit's fault?