NODE_PATH и абсолютный импорт с Laravel Mix and React? - PullRequest
Новая
       4

NODE_PATH и абсолютный импорт с Laravel Mix and React?

0 голосов
/ 25 октября 2018

Я пытаюсь объединить приложение React в проект Laravel, разместив свой код React здесь: MyLaravelProject/resources/assets/js.Я хотел бы использовать Laravel Mix для генерации сборки разработки React с использованием npm run dev.

Мой webpack.mix.js файл: 

let mix = require('laravel-mix');
mix.react('resources/assets/js/index.js', 'public/js');

Мой index.js файл: 

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter, Route } from 'react-router-dom';
import Root from 'Root';
import App from 'components/App';

ReactDOM.render(
  <Root>
    <BrowserRouter>
        <Route path='/' component={App} />
    </BrowserRouter>
  </Root>,
  document.querySelector('#root')
);

Моя проблема заключается в том, что все мои файлы приложения React зависят от.env файл, содержащий NODE_PATH=js/ для включения абсолютного импорта .Я получаю эту ошибку при запуске npm run dev: 

ERROR in ./resources/assets/js/index.js
Module not found: Error: Can't resolve 'Root' in '/Users/MyUser/MyLaravelProject/resources/assets/js'
 @ ./resources/assets/js/index.js 4:0-24
 @ multi ./resources/assets/js/index.js

ERROR in ./resources/assets/js/index.js
Module not found: Error: Can't resolve 'components/App' in '/Users/MyUser/MyLaravelProject/resources/assets/js'
 @ ./resources/assets/js/index.js 5:0-33
 @ multi ./resources/assets/js/index.js

Я могу исправить эту ошибку, если я изменю свои операторы импорта на относительные пути, но это будет головной болью, чтобы сделать это со всеми моими Reactфайлы. 

import Root from './Root;
import App from './components/App;

Я пробовал следующие изменения в .env безрезультатно:
1) NODE_PATH=resources/assets/js/
2) NODE_PATH=./
3) MIX_NODE_PATH=resources/assets/js/
4) MIX_NODE_PATH=./

Я также попытался изменить сценарий package.json dev, добавив NODE_PATH=./.

Ни одно из этих сообщений об ошибке не изменилось, поэтому моя проблема заключается вБыть может, путь, который я определяю в webpack.mix.js, является одновременно и исходным файлом приложения React, и абсолютным путем.

Нужно ли мне менять все пути в файлах приложения React на относительные или есть более простой способ?

1 Ответ

0 голосов
/ 28 ноября 2018

Я обнаружил, что в моем сценарии Laravel / React хорошо работает следующее:

Добавьте это в ваш webpack.mix.js файл 

mix.webpackConfig({
    resolve: {
        extensions: [".js", ".jsx"],
        alias: {
            "@": __dirname + "/resources/assets/js"
        }
    }
});

Теперь ваш импорт становится 

import Root from '@/Root';
import App from '@/components/App';

Надеюсь, это поможет.

Особая благодарность Каз Гошо

...