Watch not working about raw-loader

[paulduthoit]

@evilebottnawi i finally found the solution ^^ : https://github.com/elliottsj/babel-inline-import-loader

The README of the package is very explicit and it fix the issue. Maybe this discussion will help another developer !

Thanks for your time. 👍

[alexander-akait]

@paulduthoit Can you create reproducible test repo?

[paulduthoit]

Hi @evilebottnawi, i've made a very simple reproducible test repo, and it works like this. So i'm trying to investigate further to try to find where it crash i'm my project. I will let you known in the next hours.

[paulduthoit]

@evilebottnawi i've found the issue. It occurred with the babel-plugin-inline-import module in the babel.config.js. I'm using this because i'm running my React app in SSR so i need the webpack import AND the babel import...

My test repo :
https://github.com/paulduthoit/raw-loader-watch-issue

[cristian-spiescu]

@paulduthoit: Actually, your solution doesn't use raw-loader anymore. But babel-inline-import-loader + babel-plugin-inline-import. This solution seems more difficult to integrate in create-react-app based applications.

Is there a solution for watch + raw-loader? I'm suggesting to reopen the issue.

[cristian-spiescu]

UPDATE: actually the solution to go for is:

• in webpack: use raw-loader; it does have reload capability; no modifs to babel config
• in nodejs (e.g. during test w/ mocha): use babel-plugin-inline-import; it doesn't have reload capability; actually it does w/ babel cache = OFF, which in my case was no-go

In my case raw-loader was not working, because I am using linked directories. I had to monkeypatch chokidar to have followSymlinks = true.

[paulduthoit]

Hi @cristian-spiescu. You're right ! But i don't understand why it would be more difficult to integrate ?

In my webpack config file, i have :

...,
module: {
  rules: [
    {
      test: /\.(js|jsx)$/,
      exclude: /node_modules/,
      use: [
        'babel-inline-import-loader',
        {
          loader: 'babel-loader',
          options: {
            presets: [
              '@babel/preset-env',
              '@babel/preset-react'
            ]
          }
        }
      ]
    }
  ]
},
...

And in my babel.config.js file, i have :

...,
plugins: [
  ...
  [
    'babel-plugin-inline-import',
    {
      extensions: [ '.css', '.md' ]
    }
  ]
],
...

Maybe it will help you and fix your symlink issue.

I think that it's not a good idea to use raw-loader if you need to import raw files with babel in addition to webpack. It's better to have raw-loader if you only need webpack, but take babel-plugin-inline-import if you need the support of both babel and webpack.

[cristian-spiescu]

I proposed this text here:

• An alternative library for webpack is raw-loader. Advantage = detects changes to imported file w/o additional config or losing babel's cache. Disadvantage: maintain 2 separate configs. E.g. 1) one w/ raw-loader for webpack, and 2) another one for babel using babel-plugin-inline-import. E.g. if you use a create-react-app / CRA based React app, you may have 1) for yarn start / webpack and 2) for yarn test / babel. For CRA, craco and craco-raw-loader may help.

Apps created w/ CRA have little control over the webpack default. Even w/ CRACO, it's not trivial. And CRA is the default used by a lot of people I guess. Hence I use the dual config, cf. above.

And 2) losing babel's cache is a major drawback; at least for me. W/ my setup of mocha + babel + cache, every test run is executed instantly. W/o cache: each save => about 10s of recompilation. Which is no go.

[paulduthoit]

I cannot help you with that, i never used CRA. :)
The only thing i can say is that when i'm using the babel-plugin-inline-import library, my cache is still there and it's instantly rebuilt.